Для того, чтобы на Вашем сайте появилась красивая фотогалерея совсем не нужно изучать разные языки программирования и писать огромное количество кодов. Это же Интернет, все уже давно сделано за нас.
В качестве галереи мы возьмем бесплатно распространяемый скрипт thickbox на основе javascript-библиотеки lightwindow (это было самое сложное предложение в тексте).
Итак, устанавливаем галерею на сайт:
- Сохраните файлы thickbox.js и jquery.js в каталог /script/, файл thickbox.css в каталог /css/, файл loadinganimation.gif в каталог /i/
- В файле /script/thickbox.js поправьте строку
var tb_pathToImage = "images/loadingAnimation.gif";
на
var tb_pathToImage = "../i/loadingAnimation.gif";
- В коде страницы, куда Вы вставляете фотогалерею, перед тегом </head> впишите:
<script type="text/javascript" src="/script/jquery.js"></script>
<script type="text/javascript" src="/script/thickbox.js"></script>
<link rel="stylesheet"href="/css/thickbox.css" type="text/css" media="screen" />
- Сложите картинки, которые будут отображаться в галерее в каталог /images/. Помните, что т. к. галерея создается для web, нужно оптимизировать изображения для сокращения их размера. Для удобства называйте картинки так: image.jpg (увеличенное изображение) и s-image.jpg (картинка-превью)
- В коде страницы вставляем превью-ссылки на увеличенные изображения следующим образом:
<a href="/images/image.jpg" title="сюда впишите заголовок / или оставьте поле пустым" class="thickbox" rel="gallery-test"><img src="/images/s-image.jpg" alt="Изображение" /></a>
Вот и все. 5 простых шагов помогают сделать Ваш сайт более удобным, современным и привлекательным. Если у Вас возникли вопросы, посмотрите внимательно наш пример.