Не отображается слайдер с фотками через Instant View?

Question

[lpin]

На странице есть слайдер сделанный через плагин Easing Slider. Генерирую шаблон этой страницы в Instant View, открываю через телеграм и вместо слайдера белые квадраты один за другим. Число квадратор равно числу фото, которые должны были быть в слайдере.

Кто-нибудь знаешь как сделать так, что бы через Insant View слайдер корректно отображался?

Answer 1

[shurshur]

Надо сделать шаблон для Instant View, который правильно сверстает эти фото. Ведь генерация Instant View не использует JavaScript. Соответственно, нужно понять, как достать реальные адреса картинок.

Например, на одном сайте картинки грузились лениво с помощью JavaScript с указанием реальных картинок в атрибуте data-src, а в src была указана картинка-заглушка. Я сделал для этого сайта шаблон с таким правилом:

# fix lazy load images
@set_attr(src, ./@data-src): //img[has-class("image-lazy")]

В результате вместо заглушек в Instant View показываются реальные картинки.

Comments

[lpin]

Спасибо за ответ. Прошу прощения, я не очень разбираюсь в коде. Нашел как выглядит блок со слайдером (могу только скриншотом приложить, так как через форму ответа код не отображается).

Буду очень благодарен, если поможете разобраться как настроить отображение картинок в шаблоне Instan View.

[shurshur]

lpin, чтобы код показывать тут, надо использовать предпоследнюю кнопку на панели:

<div>пример!</div>

А так вполне себе несложно устроено (могло быть и хуже):

<img src="placeholder-pixel.png data-src="фактический адрес" class="... easingslider-lazy" />

Я набросал такой шаблон и вроде как он уже работает неплохо на нескольких страницах сайта, читать в Телеграме уже вполне можно:

# http://jumpcut.blog instant view template
~version: "2.1"

?path: .*
site_name: //title
body: //main

#убираем лишние тэги вокруг img
<figure>: $body//h2[.//img]
<figure>: $body//p[.//img]
<figure>: $body//a[.//img]
<figure>: $body//footer[.//img]

# исправляем lazy load картинки
@set_attr(src, ./@data-src): //img[has-class("easingslider-lazy")]

# убираем навигацию
@remove: //nav

[lpin]

shurshur, Всё заработало. Большое спасибо! очень помогли.