
Галерея для сайта – скрипт, который позволяет вставить на страницу несколько галерей без доработки яваскриптов, давно такой искал!
В сегодняшнем уроке мы рассмотрим очень интересную и функциональную галерею с возможностью изменения эффектов появления фотографий.
Как обычно, в самом верху документа размещает все скрипты и таблицы стилей для корректной работы галереи:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<link rel="stylesheet" type="text/css" href="jquery.ad-gallery.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.ad-gallery.js?rand=995"></script> <script type="text/javascript"> $(function() { var galleries = $('.ad-gallery').adGallery(); }); </script> <style type="text/css"> * { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif; color: #333; line-height: 140%; } body { padding: 30px; font-size: 70%; width: 800px; } #gallery { padding: 30px; background: #e1eef5; } </style> |
Далее для создания галереи в теле документа необходимо начать с нескольких дивов вначале и все фото оформить в виде неупорядоченного списка. Внутри тега с изображением можно указать заголовок и описание. Также обратите внимание на пути к изображению и его миниатюре.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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="images/1.jpg"> <img src="images/thumbs/t1.jpg" title="Заголовок для 1.jpg" longdesc="Длинное и подробное описание для 1.jpg" class="image0"> </a> </li> ... ... ... </ul> </div> </div> </div> |
Вместо … по аналогии можно добавить неограниченное число изображений. Таким образом можно создавать внушительные фотогалереи.
Изменение размера изображений
Возможно Вам захочется отображать более мелкие\крупные изображения. В таком случае Вам необходимо изменить под свои нужды несколько стилей:
1 2 3 4 5 6 |
.ad-gallery { width: НЕОБХОДИМАЯ ШИРИНАpx; } .ad-gallery .ad-image-wrapper { height: НЕОБХОДИМАЯ ВЫСОТАpx; } |
Изменение эффекта смены изображений
Тут также нет ничего сложного. В файле jquery.ad-gallery.js Вам необходимо найти параметр effect и подставить одно из 5-и возможных значение (‘slide-vert’, ‘slide-hori”, fade’, или ‘resize’, ‘none’).
Все готово. Пользуйтесь!
Источник: ruseller.com