Здравствуй, уважаемый друг!

Кажется, ты используешь AdBlock. Этот проект развивается и существует за счет доходов от рекламы.
Добавь, пожалуйста, нас в исключения.

Спасибо за понимание.

Создание сайтов Харьков

Слайд-шоу с анимацией «жалюзи»

21 февраля 2012 в 1:48 Автор: Nikita_Sp в категории Плагины и модули 0 комментариев

Привет, Уважаемые читатели!

Сегодня я расскажу как добиться в jQuery-плагине слайдшоу jqFancyTransitions полного эффекта смены жалюзи. Пример

Итак, для этого нам потребуется сама библиотека jQuery, и сам плагин jqFancyTransitions. Все это можно получить по ссылкам:

1) Установка плагина:
Установка данного плагина проста:
Подключаем между <head> и </head> наши скрипты:

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

И указываем наши изображения:

<div id='slideshowHolder'>
<img src='img1.jpg' alt='img1' />
<img src='img2.jpg' alt='img2' />
<img src='img3.jpg' alt='img3' />
</div>

Инициализируем наш плагин следующим кодом, в head после подключения скриптов:

<script>
$(document).ready( function(){
$('#slideshowHolder').jqFancyTransitions({
width: 400, height: 300
});
});
</script>

Подробнее о подключении и настройке

2) Настройка вида анимации «жалюзи»
После того, как мы поставим себе на страничку обычную галерейку, нам нужно теперь сделать вид жалюзи. Как тут.

Для этого мы открываем файл jqFancyTransitions.x.x.js, (где x.x — версия), и ищем строку

<div class='ft-"+el.id+"' id='ft-"+el.id+j+"' style='width:"+tstripWidth+"px; border-right:5px solid #fff; height:"+params.height+"px; float: left; position: absolute;'></div>

она у меня под номером 22. И заменяем style на слудующий:

style='width:"+tstripWidth+"px; border-right:5px solid #fff; height:"+params.height+"px; float: left; position: absolute;'

Грубо говоря мы просто добавляем border для наших «кусочков» анимации. Но в целом создает впечатление перелистывания жалюзи.
Надеюсь что я вам помог, удачного кодинга!

Скачать исходники

Вверх!

Меню блога

Категории блога

Облако тегов