Как обычно, в самом верху документа размещает все скрипты и таблицы стилей для корректной работы галереи:
Code
<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>
Далее для создания галереи в теле документа необходимо начать с нескольких дивов вначале и все фото оформить в виде неупорядоченного списка. Внутри тега с изображением можно указать заголовок и описание. Также обратите внимание на пути к изображению и его миниатюре.
Code
<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>
Вместо ... по аналогии можно добавить неограниченное число изображений. Таким образом можно создавать внушительные фотогалереи.
Возможно Вам захочется отображать более мелкие\крупные изображения. В таком случае Вам необходимо изменить под свои нужды несколько стилей:
Code
.ad-gallery {
width: НЕОБХОДИМАЯ ШИРИНАpx;
}
.ad-gallery .ad-image-wrapper {
height: НЕОБХОДИМАЯ ВЫСОТАpx;
}
Тут также нет ничего сложного. В файле jquery.ad-gallery.js Вам необходимо найти параметр effect и подставить одно из 5-и возможных значений
Code
('slide-vert', 'slide-hori'', fade', или 'resize', 'none').
Доступно только для пользователей
Сайт
Форум
Фотоальбом
Настройки
Расширенный поиск
Лента новостей
05.06.2010, Суббота в 23:14
