HtmlGuide.ru

Листинг (слайдшоу) картинок

Автор admin | Дата: 25.01.2009

Давно я не писал на сайте, а все потому, что занимался версткой и разработкой сайтов. Но, блог это мой дневник, только не тот, что обычно ведут для сохранения всех своих событий в жизни, а тот, в котором я могу оставить хоть и не все, но то немногое, что знаю и умею.

В данной статье я решил написать о таком функционале, как слайдшоу картинок. Например, вы делаете сайт какого-нибудь артиста, или группы, у вас есть свой форум, гостевая книга и, конечно же, галерея. Так вот, на титульной странице вашего сайта можно поместить блок, в котором будут крутиться картинки из галереи. Можно поставить просто листинг картинок, а можно сделать их ссылками, указать промежуток времени после которого открывается следующая картинка.

Для работы такого скрипта необходим всего лишь один js файл. Я уже писал, что применение JavaScript на сайте накладывает некоторые ограничения. Так, например если у пользователя отключена поддержка JavaScript, листинг работать не будет. Но вы можете указать фоновое изображение для блока, где будет установлен скрипт, а значит, в случае, если у пользователя поддержка js отсутствует, он увидит фоновое изображение.

Стоит также заметить, что для использования этого скрипта вам не нужно знать HTML или языки программирования. В комплекте с скриптом идет файл readme.txt, в котором написано (правда, на английском) как его установить на странице. Но, ниже я привел пример отображения слайдшоу, поэтому код вы можете взять и с этого сайта.

Сам скрипт вставляется на страницу вставкой JS-кода:

<script type=”text/javascript”>
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(slide1, 140, 225, 0, 3000, 1, “R”)
</script>

Выше в комментарии даны подсказки, рассмотрим их подробнее:

IMAGES_ARRAY_NAME: название массива, с вашими картинками, например в нашем примере мы указали slide1;
slideshow_width: ширина вашего блока, соответственно, slideshow_height: его высота.
borderwidth: ширина бордюра, можно поставить, 0, 1 и т.д.;
delay: промежуток времени, перед появлением следующей картинки;
pause: имеет два параметра 1 и 0, если выберите 1, то при наведении курсора на картинку слайдшоу остановится;
optionalRandomOrder: если укажите “R” картинки будут отображаться случайным образом, если вам это не нужно, просто уберите этот параметр, как в нашем примере.

Пример
Скачать скрипт слайдшоу картинок

Листинг картинок, это как просмотр кино по качественному телевизору. Их не так много, но найти можно. Например, данный ресурс, предлагает телевизоры samsung, по отличному соотношению цена/качество.