меня попросили найти подобный скрипт - я нашёл... скрипт не мой, но могу помочь с настройкой.
Шаг 1. Установка:
в HTML-верх добавляем следующий код:
<link rel="stylesheet" href="http://files.witchvswinx.ru/Other/gallery/css/jd.gallery.css" type="text/css" media="screen" /> <script src="http://files.witchvswinx.ru/Other/gallery/scripts/mootools.v1.11.js" type="text/javascript"></script> <script src="http://files.witchvswinx.ru/Other/gallery/scripts/jd.gallery.js" type="text/javascript"></script>
Шаг 2. Структура.
Тут мы рассмотрим строение кода, в котором содержаться картинки и сама галерея:
<div id="myGallery"> <div class="imageElement"> <h3>Название 1 картинки</h3> <img src="ссылка_на_картинку_1_большую" class="full" /> <img src="ссылка_на_картинку_1_малую(т.е.предосмотр)" class="thumbnail" /> </div> <div class="imageElement"> <h3>Название 2 картинки</h3> <img src="ссылка_на_картинку_2_большую" class="full" /> <img src="ссылка_на картинку_2_предосмотр" class="thumbnail" /> </div> </div>
Изображений в галерее может быть больше, каждое новое изображение надо добавлять по такому шаблону:
<div class="imageElement">
<h3>название</h3>
<img src="основная картинка" class="full" />
<img src="картинка для предосмотра(наверху при нажатии на "Pictures" можно увидеть предварительный просмотр всех изображений галереи)" class="thumbail" />
</div>конечно же они должны находится между <div id="myGallery> и закрывающего </div>
Шаг 3. Запуск.
После того как выполнили предыдущие шаги, вы наверняка заметили, что скрипт не работает и показывает только изображения... надо просто добавить строки кода, которые запустили бы сам скрипт...
добавьте следующий код в любое удобное место, желательно в хтмл-верх...:
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: false
});
}
window.addEvent('domready', startGallery);
</script>это один из вариантов запуска галереи...
например, можно включить автоматическую смену изображений, поменяв:
timed: false
на
timed: true
пример работы скрипта:
http://demotest.0pk.ru/
Отредактировано Ник Реднайт (2009-12-31 15:22:34)
