Шаг 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/