Сегодня я подготовил материалы об использовании новой впечатляющей галереи JQuery — Fotorama. Это красивая JQuery галерея с миниатюрами и с интуитивно понятным управлением, а также прекрасно совместимая со всеми современными браузерами. Вы можете использовать этот плагин для iPhone’ов и любых других мобильных устройств (вы можете перелистывать фотографии прикосновением).
Шаг 1. HTML
index.html
Разметка нашей страницы с галереей Fotorama:
<!DOCTYPE html>
<html lang="ru" >
<head>
<meta charset="utf-8" />
<title>Создание фотоальбома с JQuery Fotorama | officialplat-tt.ru</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/fotorama.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/fotorama.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<header>
<h2>Создание фотоальбома с JQuery Fotorama</h2>
<a href="http://officialplat-tt.ru/?p=1736" class="stuts">Вернуться обратно на <span>officialplat-tt.ru</span></a>
</header>
<div class="container">
<div id="fotorama">
<img src="images/pic1.jpg" alt="photo #1" />
<img src="images/pic2.jpg" alt="photo #2" />
<img src="images/pic3.jpg" alt="photo #3" />
<img src="images/pic4.jpg" alt="photo #4" />
<img src="images/pic5.jpg" alt="photo #5" />
<img src="images/pic6.jpg" alt="photo #6" />
<img src="images/pic7.jpg" alt="photo #7" />
<img src="images/pic8.jpg" alt="photo #8" />
<img src="images/pic9.jpg" alt="photo #9" />
<img src="images/pic10.jpg" alt="photo #10" />
<img src="images/pic11.jpg" alt="photo #11" />
<img src="images/pic12.jpg" alt="photo #12" />
</div>
</div>
</body>
</html>
Шаг 2. CSS
css/layout.css and css/fotorama.css
Первая файл - это макет страницы. Второй — файл стилей галереи fotorama. Вы можете настроить его (при необходимости). Оба файла находятся в исходниках.
Шаг 3. JS
js/fotorama.js
Этот файл содержит функционал галереи. Он использует JQuery, поэтому мы должны подключать файлы fotorama.js и JQuery. Этот файл доступен в исходниках.
js/main.js
jQuery(function(){
$('#fotorama').fotorama({
// width: 1000, // Ширина контейнера
// height: 600, // Высота контейнера
startImg: 0, // Исходное изображение
transitionDuration: 400, // Продолжительность перехода
touchStyle: true, // Включить перетаскивание
// pseudoClick: true, // Прокрутка избражений по щелчку мыши (если touchStyle = true)
// loop: false, // зациклить прокрутку изображений (если touchStyle = false)
// backgroundColor: null, // Пользовательский цвет фона
margin: 10, // Отступ межнду изображениями
// minPadding: 10, // Минимальный отступ
// alwaysPadding: false, // Применяют для заполнения изображения
// preload: 3, // Количество предварительно загруженных изображений с каждой стороны активного изображения
// resize: false, // Изменять размер изображений
// zoomToFit: true, // Увеличить
// cropToFit: false, // Обрезать изображения
// vertical: false, // Вертикальные эскизы
// verticalThumbsRight: false, // Вертикальные эскизы справа
// arrows: true, // Нарисовать стрелки
arrowsColor: '#3399cc', // Цвет стрелок
// thumbs: true, // Нарисовать эскизы
// thumbsBackgroundColor: null, // Фон эскизов
// thumbColor: null, // Цвет эскизов
// thumbsPreview: true, // Превью эскизов
thumbSize: 50, // Высота эскизов
// thumbMargin: 5, // Отступы от эскизов
thumbBorderWidth: 1, // Ширина границы
// thumbBorderColor: null, // Цвет границы
caption: true, // Показать подписи
// html: null, // html код можно вставить здесь
// onShowImg: null, // Пользовательские функции, когда мы выбираем изображение
// shadows: true // Использовать тени
});
});
В этом файле происходит инициализация fotorama галереи. Несколько стилей были настроены, остальные - нет. В комментариях я добавил описание всех возможных параметров этой галереи.
вы можете найти официальную документацию этой галереи.
Шаг 4. Изображения
Все изображения находятся в папке ‘images’.
Я надеюсь, что эта красивая фото галерея пригодится Вам в Ваших проектах. Удачи!
Получайте новые статьи блога прямо себе на почту