{lang: ‘ru’}

jquery галерея, query галерея с миниатюрами, плагины jquery, JQuery FotoramaСегодня я подготовил материалы об использовании новой впечатляющей галереи JQuery — Fotorama. Это красивая JQuery галерея с миниатюрами и с интуитивно понятным управлением, а также прекрасно совместимая со всеми современными браузерами. Вы можете использовать этот плагин для iPhone’ов и любых других мобильных устройств (вы можете перелистывать фотографии прикосновением).

Demo  Исходники

Шаг 1. HTML

index.html

Разметка нашей страницы с галереей Fotorama:

<!DOCTYPE html>
<html lang="ru" >
    <head>
        <meta charset="utf-8" />
        <title>Создание фотоальбома с JQuery Fotorama | biznistim.net</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://biznistim.net/?p=1736" class="stuts">Вернуться обратно на <span>biznistim.net</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’.

Я надеюсь, что эта красивая фото галерея пригодится Вам в Ваших проектах. Удачи!


Получайте новые статьи блога прямо себе на почту