Главная jQuery Фотогалерея-1

Фотогалерея на jQuery и Fancybox v.1

(Галерея картинок-1)

Задача:
Нужно создать галерею картинок, в которой при нажатии на маленькую картинку она открывалась в увеличенном виде в новом модальном окне.

 

Для решения этой задачи используем:
  • плагин (инструмент) для отображения изображений в HTML - Fancybox
  • бесплатную библиотеку jQuery, которая состоит из функций JavaScript-кодов.

 

Шаг 0. Скачиваем и создаем

 

Шаг 1. Подключаем на сайт необходимые JS файлы
  • Подключаем внешнюю библиотеку JQuery-mini с google к сайту:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

    Не рекомендуется использовать на одной странице несколько разных версий jQuery, чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery, так как не все версии взаимозаменяемы.

  • Загружаем функции переходов и прокрутки картинок из папки fancybox:
    <script src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

    Для настройки фотогалереи Fancybox откройте файл jquery.fancybox-1.3.4.js в любом HTML- или текстовом редакторе, например, в Блокноте. В самом конце файла увидите доступные настройки, например:
    overlayShow : true, //затемнение основной страницы (фон) true/false
    overlayOpacity : 0.8, //прозрачность фона
    overlayColor : '#777', //цвет фона
    titleShow : true, //вывод надписей под изображениями
    width : 560, //ширина окна
    height : 340 //высота окна
    и так далее...

 

Шаг 2. Добавляем из папки fancybox файл стилей CSS

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen">

 

Шаг 3. Вызываем функцию fancybox для ссылок на каптинки с классом photo 

<script>
    $(document).ready(function() {
        $("a.photo").fancybox();
    });
</script>

 

Шаг 4. Создаем элемент ссылки (<a href>)
  • Создаем галерею из больших и маленьких картинок (в нашем примере 8 картинок.jpg).
  • Для каждой маленькой картинки указываем ссылку на большую картинку:

    <a rel="gallery" class="photo" href="image_big.jpg"><img src="image_small.jpg" alt=""></a>
  • Все ссылки на картинки объединяем в одну галерею исползуя атрибут rel="gallery".
    Значение атрибут rel может быть любым, но одинаковым для всех элементов одной галереи. Таким образом можно создать на странице несколько фотогалерей, давая им разные имена в атрибуте rel, например, group_1, group_2 и т.д.. Для вывода одиночных изображений rel не нужен.

 

Шаг 5. Украшаем нашу галерею картинок рамками с помощью CSS 

<style>                
.gal-img img{
/* внешние отступы картинок */
margin:5px;
/* рамка картинок */
border:2px solid #ffffff;
}
a.photo:hover img{
/* изменение цвета рамки при наведении на картинку */
border:2px solid #7e5a25;
}
</style>

Результат

Фотогалерея

 

Пишем в документе на HTML код Фотогалереи: