Это описание скрипта, который позволяет организовать слайдшоу с эффектом вертикальных жалюзи. Скрипт разработал Peter Gehrig.
Страница скрипта: http://www.fabulant.com/downloadcenter/imglamellar3/imglamellar3.html
Конфигурация
Массив изображений
Чтобы использовать скрипт, нужно создать массив, который будет содержать ссылки на изображения, подписи, и адреса переходов при нажатии на изображении.
Пример:
var pictures = [
{ src : 'images/image1_big.jpg',
msg : 'Норвежский остров',
url : 'http://www.ruseller.com'
},
{ src : 'images/image2_big.jpg',
msg : 'Картинг — это классно!',
url : 'http://www.ruseller.com'
},
{ src : 'images/image3_big.jpg',
msg : 'Картинг — лучшее хобби!',
url : 'http://www.ruseller.com'
},
{ src : 'images/image4_big.jpg',
msg : 'Рука на клавиатуре',
url : 'http://www.ruseller.com'
},
{ src : 'images/image6_big.jpg',
msg : 'Шахматы',
url : 'http://www.ruseller.com'
}var pictures = [
{ src : 'images/image1_big.jpg',
msg : 'Норвежский остров',
url : 'http://www.ruseller.com'
},
{ src : 'images/image2_big.jpg',
msg : 'Картинг — это классно!',
url : 'http://www.ruseller.com'
},
{ src : 'images/image3_big.jpg',
msg : 'Картинг — лучшее хобби!',
url : 'http://www.ruseller.com'
},
{ src : 'images/image4_big.jpg',
msg : 'Рука на клавиатуре',
url : 'http://www.ruseller.com'
},
{ src : 'images/image6_big.jpg',
msg : 'Шахматы',
url : 'http://www.ruseller.com'
}
];
Опции конфигурации
Данный скрипт имеет следующие опции конфигурации:
target_url: в каком окне открывается ссылка, привязанная к изображению("_blank", "_top", "_self", "_parent" или "ИмяВашегоФрейма")
x_slices: количество ламелей жалюзи
slideshow_width: ширина слайдшоу — все изображения должны быть одного рамера
slideshow_height: общая высота слайдшоу
message_height : высота строки для подписи под изображением
pause: пауза перед переключением на следующее изображение в секундах
Пример:
// способ открытия ссылки ("_blank", "_top", "_self", "_parent" или "ИмяВашегоФрейма")
var target_url="_blank"
// количество ламелей жалюзи.
var x_slices=8
// ширина слайдшоу
var slideshow_width=400
// высота слайдшоу
var slideshow_height=300
// высота строки сообщений
var message_height=17
// пауза перед сменой изображения (секунды)
var pause=1
CSS
Стиль подписи под изображением может быть установлен с помощью CSS
Пример:
<style>
.messagestyle{
font-family:Arial;
font-size:11px;
color:white;
background-color:#888888;
text-align:center;
position:absolute;
bottom:0px;
vertical-align:middle;
margin:0px;
line-height:15px;
height:17px;
}
</style>
Включение файла slideshow-lamellar.js
После задания конфигурации и определения массива с изображениями нужно включить файл slideshow-lamellar.js
Пример:
<script src="/submitted-scripts/slideshow-lamellar/js/slideshow-lamellar.js"></script>