Fotorama slider не работает

Выглядит это так:

Или так (нумерация ссылок необязательна):

Примеры настроек Fotorama

Размеры контейнера

Размеры блока фоторамы является размер первого изображения, другие картинки масштабируются пропорционально первой. Для исправления этой ситуации можно указать размеры вручную.

Существуют и другие настройки:

Миниатюры

За миниатюры отвечает data-nav=»thumbs»

Но такой способ не очень эффективен, так как скрипту приходится загружать сразу все фотографии для генерации миниатюр, поэтому будет рациональнее заранее подготовить маленькие копии картинок. WordPress автоматически делает миниатюры, мы их и будем использовать. Чтобы получить ссылку на миниатюру добавьте -70×70 к названию файла (https://pupi-boy.ru/wp-content/uploads/2017/11/27ltl9eRXk.jpg → https://pupi-boy.ru/wp-content/uploads/2017/11/27ltl9eRXk-70×70.jpg).

По умолчанию миниатюра — 64 × 64. Откорректировать этот параметр можно с помощью data-thumbwidth (ширина) и data-thumbheight (высота). Если вам нужно чтобы миниатюра имела свой собственный размер, то задайте параметры width и height для файла миниатюры:

HTML-код + Fotorama

Фоторама отлично обрабатывает HTML и CSS, что значительно расширяет функционал скрипта. Работайте со ссылками, блоками, таблицами, абзацами, пишите CSS и многое другое. Ниже представлены некоторые примеры работы галереи. Если визуальная часть не отображается, то нажмите кнопку «Result».

See the Pen ooppwb by Ivanov Klim (@DreamerKlim) on CodePen.

See the Pen aVEEVb by Ivanov Klim (@DreamerKlim) on CodePen.

Полноэкранный режим

Существует возможность добавить отдельное большое изображение для полноэкранного режима через data-full :

Источник

Фоторама

Около полугода назад я написал простой джейкверный плагин для галерей на сайтах. Назвал его Фоторамой и выложил в интернет. По клику кроссфейдом показывалась следующая фотография, клик с шифтом мотал назад — вот и всё.

За эти месяцы Фоторама повзрослела, обзавелась сайтом с логотипом и, думаю, теперь можно написать о ней на Хабре.

На 0,1-ю версию меня вдохновили «галереи» в тревелах Артемия Лебедева. И я решил сделать что-то похоже, не выглядящее чужеродным «флешом» на странице. Сделал. Плагином начали пользоваться, присылать жалобы и предложения. Это заставило меня не останавливать работу над скриптом.

В 0,5-й версии я решил уйти от простой лебедевской кликалки, и развернуть Фотораму в сторону бюрошных галерей (см. Орион-арт и КМ/Ч). Опыт бюро отражён во всех нюансах поведения и дизайна Фоторамы.

Внешний вид

Ничего лишнего, что бы отвлекало от изображений и их превьюшек:

Управление

Переключение по простому клику работает с нулевых версий. При наведении показываются стрелочки «туда-сюда» с расширенной зоной для курсора. На мобильных устройствах фотографии двигаются и бросаются пальцем, как и мышкой на компьютере:

Если нажимать на превьюшки, Фоторама будет подставлять следующую под курсор, чтобы свести к минимуму движения мышью или пальцем. Саму ленту можно сдвигать в сторону и смотреть соседние наборы превьюшек.

Физика

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

Подключение

Cценарий такой: подключить свежий jquery.js, два файла Фоторамы — fotorama.css и fotorama.js, поставить картинки в некий блок, инициировать Фотораму на этом блоке конструкцией $(%block-selector%).fotorama() :

Ещё есть класс .fotorama_auto для автоматического превращения блоков.

Настройка

Для быстрого изменения внешнего вида проще не лезть в CSS, а указать новые значения прямо на инициализации — цвета фона, стрелок и «активной» рамки, размер превьюшек, отступы между ними.

Можно убрать ленту превьюшек:

Отключить жесты, включить вертикальный режим вместо горизонтального, кроп невписывающихся фотографий, резиновый ресайз, поиграть со скоростью анимаций, количеством предзагружаемых фотографий и т. д. — всего не перечесть. См. пример со всеми доступными опциями на jsFiddle.

Маленькое, но гордое API состоит из 3 компонентов. Колбека, вызываемого на смене кадров:

И двух событий, дёргая которые, можно управлять Фоторамой собственными функциями и, скажем, сделать слайд-шоу (см. реальный пример):

Или полноэкранный режим:

Поверх изображений можно разместить любой произвольный HTML:

Настраивать стили для встраиваемых блоков нужно самостоятельно, см. пример кода.

Загрузка и ошибки

Если указать отдельные файлы превьюшек, большие фотографии будут загружаться лениво, по мере необходимости. Когда превьюшки не подготовлены, они генерируются автоматически, но для этого сразу загружаются все фотографии.

Пока фотография не загрузилась, крутится прелоадер, а рамка вокруг актуальной превьюшки становится прерывистой:

Битая фотография подменяется растянутой превьюшкой:

А если и превьюшки нет на месте, то так:

Технологии

Фоторама не использует в своём интерфейсе ни одной картинки, спрайт прелоадера и знак ошибки — это PNG в data:url. В современных браузерах все анимации сделаны на CSS3 с 3d-трансформациями для включения аппаратного ускорения в мобильном Вебките. Превьюшки отрисовываются с помощью canvas.

При этом всё нормально работает и в антикварных браузерах, даже в IE6:

Деградации такие: нет data:url — делаем прелоадер из многоточия, нет поддержки CSS-анимаций — анимируем джаваскриптом, нет canvas — сжимаем обычную картинку, нет тенюшек — ну и ладно.

Для приемлемой производительности в карманных дивайсах применяются разные методы вроде загрузки и отрисовки изображений очередями по таймауту, удаления из DOM ненужных в данный момент кадров, кеширования атрибутов изображений для ухода от повторных вычислений и т. д.

Источник

После ajax не работает jquery?

но при подгрузке новых постов перестает работать слайдер поста

Alexander_peshkov,
В Исходниках фоторамы можно найти кусок кода, отвечающий за инициализацию библиотеки на моменте DOMContentLoaded:

Когда вы выводите изначальное состояние на страницу (1 страница пагинации), карточки инициализируются кодом из фоторамы, а далее — нужно делать это самому.
Соответственно, вам нужно после добавления новых карточек на страницу — инициализировать их, кусок кода выше.

Я нашел такой кусок кода

но что дальше делать в ступоре)

В success callback, Вам нужно вызвать код инициализации :

Зачем вы сделали data-auto=false ? В вашем случае его можно оставить, иначе первая страница инициализироваться не будет.
Я не пользовался фоторамой, у меня под рукой подобного стенда нет,
В теории если вызывать каждый раз после подгрузки новой страницы — то в выборку будут попадать уже инициализированные элементы и могут возникнуть баги.

Вот вам тестовый стенд, где есть эмуляции кнопки «показать еще», нажимаете кнопку — добавляются новые карточки и у них работает фоторама ( в данном стенде фоторама выражается кнопкой фуллскрина в правом верхнем углу картинки )

Источник

jQuery слайдер–галерея «Фоторама»

Фоторама — простая в установке, понятная в настройках, удобная в навигации jQuery галерея от отечественного разработчика — Артёма Поликарпова.

Fotorama

Важно Фоторама постоянно обновляется. Настоящая заметка о Фотораме версии 3.0.8

Подключение Фоторамы 3.0.8

Подключаем jQuery (версия 1.8 и выше), стили fotorama.css, скрипт fotorama.js и добавляем фотографии в блок «fotorama».

И всё — Фоторама работает:-)

Для улучшения производительности, можно подготовить уменьшенные копии изображений и указать их.

Опции Фоторамы 3.0.8

Опции Фоторамы задаются через атрибуты data-optionName . Например, data-autoplay=»true» — воспроизведение слайдшоу, data-fullscreenIcon=»true» — показывает иконку входа в полноэкранный режим и т.д.

data-width=»» default: auto
Ширина контейнера с изображениями в пикселях (например, width=»700″) или в процентах (width=»100%»).

data-height=»» default: auto
Высота контейнера с изображениями в пикселях (height=»467″) или авто (height=»auto»).

data-aspectRatio=»» default: auto
Соотношение сторон. Вычисляется делением ширины на высоту, например, у картинки 700×467 соотношение сторон равно 1.4989293362. Рекомендуется указывать aspectRatio, если ширина задана в процентах (data-aspectRatio=»1.5″).

data-minWidth=»» default: auto
Минимальная ширина контейнера с изображениями в пикселях.

data-maxWidth=»» default: auto
Максимальная ширина контейнера с изображениями в пикселях.

data-minHeight=»» default: auto
Минимальная высота контейнера с изображениями в пикселях.

data-maxHeight=»» default: auto
Максимальная высота контейнера с изображениями в пикселях.

data-background=»»
Фон контейнера с изображениями. Переопределяет значение из CSS.

data-zoomToFit=»» default: true
Растягивает изображения, если они меньше контейнера: да — (data-zoomToFit=»true»), нет — (data-zoomToFit=»false»).

data-cropToFit=»» default: false
Растягивает и обрезает изображения, чтобы они занимали всю площадь контейнера (data-cropToFit=»true») (data-cropToFit=»false»).

data-cropToFitIfFullscreen=»» default: false
Растягивает и обрезает изображения, чтобы они занимали всю площадь контейнера только в полноэкранном режиме.

data-nav=»» default: thumbs
Стиль навигации. Превьюшки —’thumbs’, точки —’dots’, ничего —’none’.

data-navPosition=»» default: bottom
Расположение блока навигации относительно изображений. В горизонтальном режиме возможны ‘bottom’ или ‘top’, в вертикальном — ‘left’ или ‘right’.

data-navBackground=»» default: null
Фон контейнера с превьюшками или точками. Переопределяет значение из CSS.

data-dotColor=»»
Цвет точек. Переопределяет значение из CSS.

data-thumbBorderWidth=»» default: 3
Толщина рамки активной превьюшки.

data-thumbBorderColor=»»
Цвет рамки активной превьюшки. Переопределяет значение из CSS.

data-hideNavIfFullscreen=»» default: false
Скрывает навигацию в полноэкранном режиме.

data-arrows=»» default: true
Включает навигационные стрелки над фотографиями.

data-arrowsColor=»»
Цвет стрелок. Переопределяет значение из CSS.

data-arrowPrev=»» default: горизонтальный режим — ◄, вертикальный — ▲
Cимвол или ХТМЛ для стрелки «назад».

data-arrowNext=»» default: горизонтальный режим — ►, вертикальный — ▼
Cимвол или ХТМЛ для стрелки «вперёд».

data-caption=»» default: none
Отображение подписей (задаются через атрибут alt). Под Фоторамой — ‘simple’, над изображениями — ‘overlay’, без подписей — ‘none’.

data-flexible=»» default: false
Если data-flexible=»true», Фоторама принимает размеры активного изображения при каждом переходе. По умолчанию, размер вашей Фоторамы — это размер первого изображения. Остальные картинки вписываются в заданные рамки, сохраняя пропорции. Чтобы зарезервировать место под галерею на странице до загрузки первого изображения, используйте опции width и height

data-fitToWindowHeight=»» default: false
Уменьшает высоту Фоторамы, если она больше высоты окна браузера.

data-fitToWindowHeightMargin=»» default: 20
Разница между высотой Фоторамы и окна браузера при активном режиме fitToWindowHeight.

data-fullscreen=»» default: false
Полноэкранный режим Фоторамы при инициализации.

data-fullscreenIcon=»» default: false
Показывает иконку входа в полноэкранный режим.

data-autoplay=»» default: false
Воспроизведение слайд-шоу.

data-stopAutoplayOnAction=»» default: true
Останавливает слайд-шоу после взаимодействия пользователя с Фоторамой.

data-vertical=»» default: false
Вертикальная ориентация Фоторамы.

data-shadows=»» default: true
Включает тени в интерфейсе.

data-hash=»» default: false
Включает изменение УРЛ страницы при переходах между изображениями. Чтобы другу послать ссылку на конкретную фотографию 🙂 Рекомендуется использовать только с одной Фоторамой на странице.

Пример Фоторамы с другими настройками — вертикальный слайдер, превьюшки — справа, полноэкранный просмотр.

Источник