Рубрика CSS

Слайд-шоу с эффектом жалюзи

Этот скрипт был представлен Питером Джехригом на сайте www.fabulant.com. Исходный скрипт находиться по адресу: http://www.fabulant.com/downloadcenter/imglamellar3/imglamellar3.html.

Конфигурация.

Массив изображений.

Чтобы использовать этот скрипт, Вы должны создать массив, содержащий изображения с заголовками, а также URL адреса для перехода к ним.

var pictures = [
{ src : 'images/image1_big.jpg',
msg : 'Picture from a Norwegian island',
url : 'http://www.dhtmlgoodies.com'
},
{ src : 'images/image2_big.jpg',
msg : 'Gokart is fun',
url : 'http://www.dhtmlgoodies.com'
},
{ src : 'images/image3_big.jpg',
msg : 'Gokart is fun',
url : 'http://www.dhtmlgoodies.com'
},
{ src : 'images/image4_big.jpg',
msg : 'Me at the keyboard',
url : 'http://www.dhtmlgoodies.com'
},
{ src : 'images/image5_big.jpg',
msg : 'Somewhere in Europe',
url : 'http://www.dhtmlgoodies.com'
},
{ src : 'images/image6_big.jpg',
msg : 'My chess set',
url : '#'
} ];

Параметры конфигурации.

Этот скрипт имеет следующие доступные настройки:

1. Target_url: В каком окне открывается ссылка на изображения («_blank», «_top», «_self», «_parent» или «ИмяВашегоФрейма»);
2. X_slices: Количество ламелей (кусочков);
3. Slideshow_width: Ширина слайд-шоу – обратите внимание, что все фотографии должны быть одинакового размера;
4. Slideshow_height: Общая высота слайд-шоу;
5. Message_height: Высота надписи под фотографиями;
6. Pause: Пауза между показом фотографий в секундах.

Пример:

// target of the picture-links ("_blank", "_top", "_self", "_parent" or "nameOfYourFrame") var target_url="_blank"
// number of lamellas.
var x_slices=8

// width of slideshow
var slideshow_width=400

// height of slideshow
var slideshow_height=320

// height of messagebox
var message_height=17

// pause beween the pictures (seconds)
var pause=1

CSS.

Заголовок, расположенный под картинкой, может формироваться с помощью CSS.

Пример:

<style type="text/css">
.messagestyle{
font-family:Arial;
font-size:11px;
color:white;
background-color:#888888;
text-align:center;
position:absolute;
bottom:0px;
vertical-align:middle;
margin:0px;
}

Подключаем файл slideshow-lamellar.js.

После того, как Вы определили файлы с  изображениями, а также параметрами конфигурации, Вы должны подключить файл slideshow-lamellar.js.

Пример:

<script src="/submitted-scripts/slideshow-lamellar/js/slideshow-lamellar.js"></script>

Источник: www.dhtmlgoodies.com.
Перевод: Администратор сайта explorer-soft.com.