Анимированное Javascript-слайдшоу

Главная

Статьи

Веб-программирование

23.12.2008 17:49

javascript-slideshow

Это динамичное javascript-слайдшоу имеет большие возможности и при этом весит всего лишь 5KB. Слайдшоу легко настраивается и добавляется на вашу страницу. Ниже представлен пример html-разметки слайдшоу и скрипта который его запускает.

<ul id="slideshow">

<li>

<h3>Первое изображение</h3>

<span>photos/image-one.jpg</span>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>

<a href="#"><img src="thumbnails/image-one.jpg" alt="Первое изображение" /></a>

</li>

<li>

<h3>Второе изображение</h3>

<span>photos/image-two.jpg</span>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>

<img src="thumbnails/image-two.jpg" alt="Второе изображение" />

</li>

</ul>

Каждый тег "li" представляет собой изображение. Заголовок "H3" становится названием (заголовком) изображения и, наконец, тег "р" - это описание. Тег "span" содержит путь к полноразмерному изображению. Далее идет ссылка на эскиз изображения.

Ниже приведены параметры, которые могут быть установлены для объекта... более полная документация будет в ближайшее время на сайте автора. Значения по умолчанию отображаются как (10), а, рекомендованные значения - [1-20].

Для изображений:
imgSpeed = int; (10)
navOpacity = int; (25)
navHover = int; (70)
letterbox = “string”; например, (#000) - цвет текста для описания изображений
link = “string”; имя класса для ссылки

Auto Slideshow
auto = boolean; (false)
speed = int; (10)

Information Dialog
info = boolean; (true)
infoID = “string”;
infoSpeed = int; (10)

Thumbnail Slider
thumbs = “string”; id эскизов слайдшоу
scrollSpeed = int; [1-20] (5)
thumbOpacity = int; [0-100] (70)
active = “string”; устанавливает рамку для активных эскизов
spacing = int; (5) расстояние между эскизами
left = “string”; id of left navigation link, required for slider
right = “string”; id of right navigation link, required for slider

Здесь пример вызова скрипта:

<script type="text/javascript" src="compressed.js"></script>

<script type="text/javascript">

$('slideshow').style.display='none';

$('wrapper').style.display='block';

var slideshow=new TINY.slideshow("slideshow");

window.onload=function(){

slideshow.auto=true;

slideshow.speed=5;

slideshow.link="linkhover";

slideshow.info="information";

slideshow.thumbs="slider";

slideshow.left="slideleft";

slideshow.right="slideright";

slideshow.scrollSpeed=4;

slideshow.spacing=5;

slideshow.active="#fff";

slideshow.init("slideshow","image","imgprev","imgnext","imglink");

}

</script>

Этот скрипт был протестирован в Firefox, Internet Explorer, Opera, Safari and Chrome. Скрипт может быть использован в личных и коммерческих проектах creative commons лицензии.

Демо-версия.

Скачать.

Источник.