2013
10
Ноя

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





Галерея дает возможность просматривать слайды, используя различные настройки. В этой галере можно выбрать несколько вариантов смены изображений, имеется шкала с миниатюрами. Вы можете написать к изображениям текст,который будет сопровождать ваши картинки. Имеются и другие полезные функции. Пример такой галереи вы можете посмотреть здесь.



Порядок установки фотогалереи AD Gallery



Для дальнейшей работы скачиваем архив, разархивируем его и помещаем папку AD-Gallery на сайт.

В ней находятся js-скрипты, файл стилей CSS и вспомогательные изображения.

Между тегами <head>… <head>  вставить

<link rel="stylesheet" type="text/css" href="AD-Gallery/jquery.ad-gallery.css"> <script type="text/javascript" src="AD-Gallery/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="AD-Gallery/jquery.ad-gallery.js?rand=995"></script> <script type="text/javascript"> $(function() { var galleries = $('.ad-gallery').adGallery(); }); </script> </script>
На одной странице желательно применять одну версию jQuery, чтобы избежать конфликта друг с другом. Если вы на сайте используете несколько плагинов jQuery, разместите файл jquery.js в корневую папку, чтобы использовать его постоянно. При изменении места расположения файла правильно указывайте ссылку. Если файл в корневой папке, то ссылка будет выглядеть так
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>

Размер окна галереи зависит от размера самого большого изображения. Чтобы при показе не было пустого места, картинки подбираем одной высоты. Большие картинки имеют номера 1,2,3 (мои картинки 600х450px), маленькие - t1,t2,t3 (90х68px). В теги <div> вставляем неупорядоченный список. Изображения размещаем в теги <li>…</li>. Количество изображений берете любое.


Запишем HTML-код для нашей галереи:

<div id="gallery" class="ad-gallery"> <div class="ad-image-wrapper"></div> <div class="ad-controls"></div> <div class="ad-nav"> <div class="ad-thumbs"> <ul> <li><a href="AD-Gallery/images/1.jpg"> <img src="AD-Gallery/images/thumbs/t1.jpg" title="Меня зовут Даша" longdesc="" class="image0"></a> </li> <li><a href="AD-Gallery/images/2.jpg"> <img src="AD-Gallery/images/thumbs/t2.jpg" title="Семечки, чтоб не заснуть" longdesc="" class="image1"></a> </li> <li><a href="AD-Gallery/images/3.jpg"> <img src="AD-Gallery/images/thumbs/t3.jpg" title="Смотрим ТВ" longdesc="" class="image2"></a> </li> </ul> </div></div></div>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

Для вывода надписей под картинками используем атрибут title. Атрибут longdesc указывает адрес, где содержится аннотация к картинке. Атрибут class задается скриптом. Обратите внимание, что для первого изображения (1.jpg) задан class="image0", для второго изображения (2.jpg) задан class="image1". Если вы будете добавлять изображения, то для четвертого изображения (4.jpg) необходимо задать class="image3" и т.д.


Настройка параметров фотогалереи AD Gallery


Настройки внешнего вида фотогалереи AD Gallery выполняются с помощью файла jquery.ad-gallery.css. В файле стилей даны комментарии к тем параметрам, которые вы можете изменить. Текстовый файл "Для контейнера" содержит необходимые правила CSS.

Анимацию и другие параметры для галереи можно изменять в файле jquery.ad-gallery.js. Там также даны комментарии, и если вы его откроете в редакторе или в Блокноте, то сможете поэкспериментировать. Меняя значения параметров и просматривая в браузере, можно настроить работу фотогалереи по вашему вкусу.