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

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

Fotorama

Сайт Фоторамы  —http://fotorama.io/.

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

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

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

<link rel="stylesheet" href="/css/fotorama.css" />
<script type="text/javascript" src="/js/fotorama.js"></script>
<div class="fotorama">
<img src="/photo/1.jpg" />
<img src="/photo/2.jpg" />
<img src="/photo/3.jpg" />
<!-- ..... -->
<img src="/photo/12.jpg" />
</div>

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

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

<div class="fotorama">
<a href="/photo/1.jpg"><img src="/photo/1_preview.jpg"></a>
<a href="/photo/2.jpg"><img src="/photo/2_preview.jpg"></a>
<a href="/photo/3.jpg"><img src="/photo/3_preview.jpg"></a>
<!-- ..... -->
<a href="/photo/3.jpg"><img src="/photo/3_preview.jpg"></a>
</div>

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

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

<div class="fotorama" data-autoplay="true" data-fullscreenIcon="true">
<img src="/photo/1.jpg" />
<img src="/photo/2.jpg" />
<img src="/photo/3.jpg" />
<!-- ..... -->
<img src="/photo/12.jpg" />
</div>

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
Включает изменение УРЛ страницы при переходах между изображениями. Чтобы другу послать ссылку на конкретную фотографию :-) Рекомендуется использовать только с одной Фоторамой на странице.

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

Скачать примеры, размещенные на этой странице (zip)