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

Фотогалерея на jQuery

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

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

 

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

 

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

 

Шаг 1. Включаем на сайт необходимые JS файлы
  • Подключаем внешнюю библиотеку JQuery-mini с google к сайту:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  • Загружаем функции переходов и прокрутки картинок из fancybox:
    <script src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

 

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

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

 

Шаг 3. Вызываем функцию fancybox 

<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>

 

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

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

Результат

Фотогалерея


Талисманы Сочи-2014

Мишка Мишка

Смотреть / Скачать

 

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