чилка HTML
 
Скрипты

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

 

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

 

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

 

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

 

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

  • Загружаем функции переходов и прокрутки картинок из fancybox:
    <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript" 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 type="text/javascript"> $(document).ready(function(){ $("a.photo").fancybox(); }); </script>

 

Шаг 4. Создаем элемент ссылки (<a href>)
  • Создаем галерею из больших и маленьких картинок (в нашем примере 4 картинки.jpg).
  • Для каждой маленькой картинки указываем ссылку на большую картинку:
    <a rel="gallery" class="photo" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

 

Шаг 5. Украшаем нашу галерею рамками с помощью CSS
.gallery img{ /* внешние отступы картинок */ margin:5px; /* рамка картинок */ border:2px solid #ffffff; } a.photo:hover img{ /* изменение цвета рамки при наведении на картинку */ border:2px solid #7e5a25; }

 

Галерея

 

 

Пишем в документе на HTML:

 

 

 

 

Справка

Модальное окно - это окно,
которое блокирует работу пользователя с родительским приложением до тех пор, пока пользователь это окно не закроет.

Плагин (англ. plug-in, «подключать»)
— независимый программный модуль, динамически подключаемый к основной программе и предназначенный для расширения и/или использования её возможностей.
Плагины обычно выполняются в виде разделяемых библиотек.

API - интерфейс программирования приложений
(англ. application programming interfaces API [эй-пи-ай])
— набор готовых классов, процедур, функций, структур и констант, предоставляемых приложением (библиотекой, сервисом) для использования во внешних программных продуктах.
Используется программистами для написания всевозможных приложений.

JQuery это быстрая, маленькая, и многофункциональная библиотека JavaScript.

Учебник JQuery >>>

 

 

 

 


Copyright © Москва
Училка HTML: сайт  u4ilka.kcbux.ru