Эффектная галерея на jquery с использованием анимации спрайтов vol. 2

Дата публикации: 2011-08-01

jquery галерея

От автора: было дело, мы решили, что можем своими руками сделать красивый анимированный слайдер на jquery. Решили, и собственно что-то у нас даже получилось. Теперь наша задача, сделать его достойным этого замечательного ресурса.

В этом уроке, я покажу, какие решения я применил к модернизации приложения и ликвидации багов в альфа версии нашего слайдера.

Чтобы приступить к этому уроку, Вам необходимо тщательно изучить альфа версию слайдера по моему предыдущему уроку.

Задача

1. Первым делом необходимо устранить баг, некорректной работы приложения в IE.

2. Надо возвести скрипт приложения в одну функцию, для простого вызова и настройки слайдера.

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

4. Добавить пару красивых эффектов появления слайда.

Метод

Итак, разберёмся, по средствам каких изменений мы будем добиваться результата.

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

1. Начнём с кроссбраузерности

Причиной бага в IE оказалась весьма безобидная ошибка. При клике по ссылке, мы вызывали слайд в соответствии с атрибутом href этой ссылки. IE приписывал к содержанию атрибута href путь к текущей директории, и, естественно, скрипт не находил слайда с таким идентификатором. Решение этой проблемы как никогда просто: мы будем вылавливать слайд в соответствии с атрибутом rel ссылки, а не href.

2. Возведение скрипта в одну функцию

Что бы реализовать эту затею, придётся вытащить скрипт из $(document).ready(function(){});, так как в нём мы будем функцию слайдера вызывать.

Также, не менее важен вопрос объектного ориентирования. Мы сделаем так, чтобы на одной странице можно было запустить два разных слайдера. Для этого мы будем передавать функции класс дива, в котором лежат картинки. Затем все элементы слайдера будут вызываться как дочерние элементы дива с этим классом.

3. определение параметров слайдера

3.1 Чтобы пользователь мог изменять количество фрагментов, нужно возвести создание этих фрагментов в цикл "for".

3.2 Скорость и задержка появления фрагментов естественно будет определятся переменными, переданными в функцию.

3.3 Для определения эффекта, мы используем оператор if/else , который будет проверять, какой эффект выбран пользователем и в соответствии с результатом проверки будем применять нужный эффект.

4. Добавление новых эффектов

Свежий эффект, который мы будем использовать – это падение фрагмента сверху, вылезание фрагмента снизу и чередование этих двух вариантов.

Для реализации этого эффекта, нам в первую очередь нужно будет насильно убить паддинг у главного дива и присвоить ему релятивное позиционирование position:relative;. Затем, в случае выбора это эффекта, нам нужно будет при клике задать фрагменту отрицательный или положительный маргин топ на количество пикселей, равное высоте фрагмента. И анимировать плавное возвращение фрагмента к 0-му маргину.

Решение

1. меняем href на rel

Тут все просто, ищем в коде все привязки к href и заменяем на rel.

2. возводим скрипт в функцию

2.1 Убираем из скрипта ожидание загрузки DOM в самом начале документа js.js

 $(document).ready(function() { // это надо убрать

1	$(document).ready(function() { // это надо убрать

И убираем его закрытие в конце документа.

 });  // это тоже надо убрать

1	}); // это тоже надо убрать

2.2 Оборачиваем скрипт в функцию

function mygoodslider( // закидываем весь код слайдера в функцию mygoodslider(), для упрошения его настройки
 speed, // параметр - скорость появления каждого фрагмента (оптимальный вариант - 500)
 delay, // задержка появления следующего фрагмента, после начала появления предыдущего (оптимальный вариант - 50)
 fragments, // колличество фрагментов (оптимальный вариант - 20) (этот параметр должен быть делителем ширены изображения НАЦЕЛО!)
 classname, // тут всё понятно - указывем класс дива, в который засунули изображения
 effect // здесь пишем какой эффект хотим использовать
 /* 
 ВАРИАНТЫ ЭФФЕКТОВ
 fade - плавное появление фрагмента из прозрачного в непрозрачный;
 wave - врагмент появляется использую анимацию show();
 slide - фрагмент появляется, открываясь сверху вниз;
 toup - фрагмент падает сверху;
 todown - фрагмент вылезает снизу;
 toupdown - фрагмент вылезает снизу, а следующий падает сверху, и так чередуясь;
 roll - фрагменты открываются слева на право

 */
 ) 
{

function mygoodslider( // закидываем весь код слайдера в функцию mygoodslider(), для упрошения его настройки

speed, // параметр - скорость появления каждого фрагмента (оптимальный вариант - 500)

delay, // задержка появления следующего фрагмента, после начала появления предыдущего (оптимальный вариант - 50)

fragments, // колличество фрагментов (оптимальный вариант - 20) (этот параметр должен быть делителем ширены изображения НАЦЕЛО!)

classname, // тут всё понятно - указывем класс дива, в который засунули изображения

effect // здесь пишем какой эффект хотим использовать

ВАРИАНТЫ ЭФФЕКТОВ

fade - плавное появление фрагмента из прозрачного в непрозрачный;

wave - врагмент появляется использую анимацию show();

slide - фрагмент появляется, открываясь сверху вниз;

toup - фрагмент падает сверху;

todown - фрагмент вылезает снизу;

toupdown - фрагмент вылезает снизу, а следующий падает сверху, и так чередуясь;

roll - фрагменты открываются слева на право

)

{

Соответственно закрываем эту функцию в конце скрипта.

} // закрываем тело функции

1	} // закрываем тело функции

2.3 Определяем переменные

В начале тела функции определяем значения переменных, которые нам нужно будет использовать.

var theclass = "." + classname; // определяем класс как селектор
var sldimgl = $('.myslider img').size(); // вычисляем количество картинок для слайдера
var showspeed = speed; 
var interval = delay;
var coustfrags = fragments; 
var tofrags = coustfrags - 1; // помним, что перечисление элементов в массиве начинается с "0" и по этому последнее значение будет меньше на еденицу!
var linmx = sldimgl - 1; // уменьшаем колличество на 1, так как при отбражении порядкого номера, JS начинает с "0", а не с "1"

var theclass = "." + classname; // определяем класс как селектор

var sldimgl = $('.myslider img').size(); // вычисляем количество картинок для слайдера

var showspeed = speed;

var interval = delay;

var coustfrags = fragments;

var tofrags = coustfrags - 1; // помним, что перечисление элементов в массиве начинается с "0" и по этому последнее значение будет меньше на еденицу!

var linmx = sldimgl - 1; // уменьшаем колличество на 1, так как при отбражении порядкого номера, JS начинает с "0", а не с "1"

2.4 Запускаем функцию в head нашей странички

После подключения jquery и нашего слайдера вставляем короткий скрипт запуска функции.

<script type="text/javascript">
        $(document).ready(function() {
         mygoodslider(
		 500, // speed
		 50,  // delay
		 20,  // fragments
		 'myslider', // classname
		 'toupdown' // effect
		 );
        });
</script>

$(document).ready(function() {

mygoodslider(

500, // speed

50, // delay

20, // fragments

'myslider', // classname

'toupdown' // effect

);

});

</script>

3. Применение переданных функции параметров

3.1 fragments

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

Эту строку:

var slfrag = "<div class='slfrag' style='background:url(" + imgsrc + ") no-repeat left top;'></div><div class='slfrag' style='background:url(" + imgsrc + ") no-repeat -" + slfragw + "px top;'></div><div class='slfrag' style='background:url(" + imgsrc + ") no-repeat -" + slfragw * 2 + "px top;'></div><div class='slfrag' style='background:url(" + imgsrc + ") no-repeat -" + slfragw * 3 + "px top;'></div>";

var slfrag = "<div class='slfrag' style='background:url(" + imgsrc + ") no-repeat left top;'></div><div class='slfrag' style='background:url(" + imgsrc + ") no-repeat -" + slfragw + "px top;'></div><div class='slfrag' style='background:url(" + imgsrc + ") no-repeat -" + slfragw * 2 + "px top;'></div><div class='slfrag' style='background:url(" + imgsrc + ") no-repeat -" + slfragw * 3 + "px top;'></div>";

Заменяем на этот цикл:

var slfrag = "";
  for(var i=0;i<=tofrags;i++) 
  {
  var spr = slfragw * i;
  
  var sprite = "-" + spr + "px"; // определяем положение спрайта у фрагмента
  var slfrag = slfrag + "<div class='slfrag' style=' position:absolute; left:" + spr + "px; background:url(" + imgsrc + ") no-repeat " + sprite + " top;'></div>"; // создаём фрагмент и прилепляем к предыдущему
  }

var slfrag = "";

for(var i=0;i<=tofrags;i++)

{

var spr = slfragw * i;

var sprite = "-" + spr + "px"; // определяем положение спрайта у фрагмента

var slfrag = slfrag + "<div class='slfrag' style=' position:absolute; left:" + spr + "px; background:url(" + imgsrc + ") no-repeat " + sprite + " top;'></div>"; // создаём фрагмент и прилепляем к предыдущему

}

3.2 Применяем параметр класса к объектному ориентированию

Здесь нужно покопаться и повставлять в селекторы переменную "theclass".

Например, строка вставляющая слайд:

 $('.myslider').prepend(slideoun); // вставляем только что созданный слайд

1	$('.myslider').prepend(slideoun); // вставляем только что созданный слайд

Заменяется на:

$(theclass).prepend(slideoun); // вставляем только что созданный слайд

1	$(theclass).prepend(slideoun); // вставляем только что созданный слайд

Естественно все элементы слайдера, такие как, например, фрагменты должны вылавливаться как:

$(theclass + ’ element’);

1	$(theclass + ’ element’);

3.3 Применяем эффект, скорость и задержку

Для решения этой задачи мы поправим цикл появления фрагментов.

Старый цикл:

$('.sldlink').click(function(e) { // вылавливаем событие - клик по ссылке слайдера
e.preventDefault(); // запрещаем браузеру переход по ссылке


var item1 = $(this).attr('href'); // выдёргиваем href ссылки 
var item = '#' + item1; // делаем из него id
if($(item).attr('dir') == 'b1') {} // проверяем не ведёт ли ссылка на текущий слайд. Если да, то курим
else { // если нет, то работаем
   
      $(item + ' div').hide(); // прячем фрагменты этого слайда
      $(item).show(); // показываем сам слайд
      $(".slide[dir = 'b1']").css({'z-index':'2'}); // утапливаем прошлый слайд по оси z на второй уровень
      $(item).css({'z-index':'3'}).attr('dir','b2'); // выдавливаем наш слайд по оси z на третий уровень и присваеваем ему dir появляющегося слайда

      for(var i=0;i<=3;i++) // запускаем цикл появления фрагментов слайда
       {
        var del = i * 100; // переменная del устанавливает длинну задержки коявления фрагмента в милисекундах
   
        if(i != 3) // проверяем не является ли фрагмент последним
        {
         $(item + ' div:eq(' + i + ')').delay(del).show(500); // если нет, то просто его открваем
        }
        else
        {
         $(item + ' div:eq(' + i + ')').delay(del).show(500, function() { // если да, то открываем его и...
         $(".slide[dir = 'b1']").hide().css({'z-index':'1'}).attr('dir','b0'); // утапливаем прошлый слайд на первый уровень по оси z делаем ему dir невидимого
         $(item).attr('dir','b1'); // нашему слайду делаем dir текущего
		 $('.sldlink').css({'background':'url(img/link.png) no-repeat center top'}); // возвращаем фон всех ссылок на исходную
		 $(".sldlink[href='" + item1 + "']").css({'background':'url(img/link.png) no-repeat center -20px'});   // сдвигаем фон кликнутой ссылки вверх
         });
        }
       }
      }
   });

$('.sldlink').click(function(e) { // вылавливаем событие - клик по ссылке слайдера

e.preventDefault(); // запрещаем браузеру переход по ссылке

var item1 = $(this).attr('href'); // выдёргиваем href ссылки

var item = '#' + item1; // делаем из него id

if($(item).attr('dir') == 'b1') {} // проверяем не ведёт ли ссылка на текущий слайд. Если да, то курим

else { // если нет, то работаем

$(item + ' div').hide(); // прячем фрагменты этого слайда

$(item).show(); // показываем сам слайд

$(".slide[dir = 'b1']").css({'z-index':'2'}); // утапливаем прошлый слайд по оси z на второй уровень

$(item).css({'z-index':'3'}).attr('dir','b2'); // выдавливаем наш слайд по оси z на третий уровень и присваеваем ему dir появляющегося слайда

for(var i=0;i<=3;i++) // запускаем цикл появления фрагментов слайда

{

var del = i * 100; // переменная del устанавливает длинну задержки коявления фрагмента в милисекундах

if(i != 3) // проверяем не является ли фрагмент последним

{

$(item + ' div:eq(' + i + ')').delay(del).show(500); // если нет, то просто его открваем

}

else

{

$(item + ' div:eq(' + i + ')').delay(del).show(500, function() { // если да, то открываем его и...

$(".slide[dir = 'b1']").hide().css({'z-index':'1'}).attr('dir','b0'); // утапливаем прошлый слайд на первый уровень по оси z делаем ему dir невидимого

$(item).attr('dir','b1'); // нашему слайду делаем dir текущего

$('.sldlink').css({'background':'url(img/link.png) no-repeat center top'}); // возвращаем фон всех ссылок на исходную

$(".sldlink[href='" + item1 + "']").css({'background':'url(img/link.png) no-repeat center -20px'}); // сдвигаем фон кликнутой ссылки вверх

});

}

});

Заменяем на новый:

$(theclass).next('.slnav').children('.sldlink').click(function(e) { // вылавливаем событие - клик по ссылке слайдера
e.preventDefault(); // запрещаем браузеру переход по ссылке


var item1 = $(this).attr('rel'); // выдёргиваем href ссылки 
var item = '#' + item1; // делаем из него id
if($(item).attr('alt') == 'b1') {} // проверяем не ведёт ли ссылка на текущий слайд. Если да, то курим
else { // если нет, то работаем
   
      $(item + ' div').hide(); // прячем фрагменты этого слайда
      $(item).show(); // показываем сам слайд
      $(theclass + " .slide[alt=b1]").css({'z-index':'2'}); // утапливаем прошлый слайд по оси z на второй уровень
      $(item).css({'z-index':'3'}).attr('alt','b2'); // выдавливаем наш слайд по оси z на третий уровень и присваеваем ему alt появляющегося слайда
       $(this).css({'background':'url(img/link.png) no-repeat center -20px'});
      for(var i=0;i<=tofrags;i++) // запускаем цикл появления фрагментов слайда
       {
        var del = i * interval; // переменная del устанавливает длинну задержки коявления фрагмента в милисекундах
        
        if(i != tofrags) // проверяем не является ли фрагмент последним
        {
		 if(effect == "roll") // если эффект задан roll
		 {
		 var wi = $(item + ' div:eq(' + i + ')').width();
         $(item + ' div:eq(' + i + ')').delay(del).css({'width':'0px'}).show().animate({'width': wi }, showspeed); // если нет, то просто его открваем
         }
		 else if(effect == "fade") // если эффект задан fade
		 {
		  $(item + ' div:eq(' + i + ')').delay(del).fadeIn(showspeed);
		 }
		 else if(effect == "slide") // если эффект задан slide
		 {
		  $(item + ' div:eq(' + i + ')').delay(del).slideDown(showspeed);
		 }
		 else if(effect == "toup") // если эффект задан toup
		 {
		  var he = $(item + ' div:eq(' + i + ')').height();
		  $(item + ' div:eq(' + i + ')').delay(del).css({'margin-top':'-' + he + 'px'}).show().animate({'margin-top':'0px'}, showspeed); 
		 }
		 else if(effect == "todown") // если эффект задан todown
		 {
		  var he = $(item + ' div:eq(' + i + ')').height();
		  $(item + ' div:eq(' + i + ')').delay(del).css({'margin-top': he + 'px'}).show().animate({'margin-top':'0px'}, showspeed); 
		 }
		 else if(effect == "toupdown") // если эффект задан toupdown
		 {
		  var he = $(item + ' div:eq(' + i + ')').height();
		  if(i == 0) {var mar = '-' + he + 'px';}
		  else if(i & 1){var mar =  he + 'px';} else {var mar = '-' + he + 'px';}
		  $(item + ' div:eq(' + i + ')').delay(del).css({'margin-top': mar}).show().animate({'margin-top':'0px'}, showspeed); 
		 }
		 else if(effect == "wave") // если эффект задан wave
		 {
		  $(item + ' div:eq(' + i + ')').delay(del).show(showspeed);
		 }
		} // если фрагмент последний
        else
        {
		 if(effect == "roll") // если эффект задан roll
		 {
		 var wi = $(item + ' div:eq(' + i + ')').width();
         $(item + ' div:eq(' + i + ')').delay(del).css({'width':'0px'}).show().animate({'width': wi }, showspeed, function() { // если да, то открываем его и...
         $(".slide[alt=b1]").hide().css({'z-index':'1'}).attr('alt','b0'); // утапливаем прошлый слайд на первый уровень по оси z делаем ему alt невидимого
         $(item).attr('alt','b1'); // нашему слайду делаем alt текущего
		 $('.sldlink').css({'background':'url(img/link.png) no-repeat center top'}); // возвращаем фон всех ссылок на исходную
		 $(".sldlink[rel=" + item1 + "]").css({'background':'url(img/link.png) no-repeat center -40px'});   // сдвигаем фон кликнутой ссылки вверх
         });
		 }
		 else if(effect == "fade") // если эффект задан fade
		 {
		  $(item + ' div:eq(' + i + ')').delay(del).fadeIn(showspeed, function() { // если да, то открываем его и...
         $(".slide[alt=b1]").hide().css({'z-index':'1'}).attr('alt','b0'); // утапливаем прошлый слайд на первый уровень по оси z делаем ему alt невидимого
         $(item).attr('alt','b1'); // нашему слайду делаем alt текущего
		 $('.sldlink').css({'background':'url(img/link.png) no-repeat center top'}); // возвращаем фон всех ссылок на исходную
		 $(".sldlink[rel=" + item1 + "]").css({'background':'url(img/link.png) no-repeat center -40px'});   // сдвигаем фон кликнутой ссылки вверх
         });
		 }
		 else if(effect == "slide") // если эффект задан fade
		 {
		  $(item + ' div:eq(' + i + ')').delay(del).slideDown(showspeed, function() { // если да, то открываем его и...
         $(".slide[alt=b1]").hide().css({'z-index':'1'}).attr('alt','b0'); // утапливаем прошлый слайд на первый уровень по оси z делаем ему alt невидимого
         $(item).attr('alt','b1'); // нашему слайду делаем alt текущего
		 $('.sldlink').css({'background':'url(img/link.png) no-repeat center top'}); // возвращаем фон всех ссылок на исходную
		 $(".sldlink[rel=" + item1 + "]").css({'background':'url(img/link.png) no-repeat center -40px'});   // сдвигаем фон кликнутой ссылки вверх
         });
		 }
		 else if(effect == "wave") // если эффект задан wave
		 {
		  $(item + ' div:eq(' + i + ')').delay(del).show(showspeed, function() { // если да, то открываем его и...
         $(".slide[alt=b1]").hide().css({'z-index':'1'}).attr('alt','b0'); // утапливаем прошлый слайд на первый уровень по оси z делаем ему alt невидимого
         $(item).attr('alt','b1'); // нашему слайду делаем alt текущего
		 $('.sldlink').css({'background':'url(img/link.png) no-repeat center top'}); // возвращаем фон всех ссылок на исходную
		 $(".sldlink[rel=" + item1 + "]").css({'background':'url(img/link.png) no-repeat center -40px'});   // сдвигаем фон кликнутой ссылки вверх
         });
		 }
		 else if(effect == "toup") // если эффект задан toup
		 {
		  var he = $(item + ' div:eq(' + i + ')').height();
		  $(item + ' div:eq(' + i + ')').delay(del).css({'margin-top':'-' + he + 'px'}).show().animate({'margin-top':'0px'}, showspeed, function() { // если да, то открываем его и...
         $(".slide[alt=b1]").hide().css({'z-index':'1'}).attr('alt','b0'); // утапливаем прошлый слайд на первый уровень по оси z делаем ему alt невидимого
         $(item).attr('alt','b1'); // нашему слайду делаем alt текущего
		 $('.sldlink').css({'background':'url(img/link.png) no-repeat center top'}); // возвращаем фон всех ссылок на исходную
		 $(".sldlink[rel=" + item1 + "]").css({'background':'url(img/link.png) no-repeat center -40px'});   // сдвигаем фон кликнутой ссылки вверх
         });
		 }
		 else if(effect == "todown") // если эффект задан todown
		 {
		  var he = $(item + ' div:eq(' + i + ')').height();
		  $(item + ' div:eq(' + i + ')').delay(del).css({'margin-top': he + 'px'}).show().animate({'margin-top':'0px'}, showspeed, function() { // если да, то открываем его и...
         $(".slide[alt=b1]").hide().css({'z-index':'1'}).attr('alt','b0'); // утапливаем прошлый слайд на первый уровень по оси z делаем ему alt невидимого
         $(item).attr('alt','b1'); // нашему слайду делаем alt текущего
		 $('.sldlink').css({'background':'url(img/link.png) no-repeat center top'}); // возвращаем фон всех ссылок на исходную
		 $(".sldlink[rel=" + item1 + "]").css({'background':'url(img/link.png) no-repeat center -40px'});   // сдвигаем фон кликнутой ссылки вверх
         });
		 }
		 else if(effect == "toupdown") // если эффект задан toupdown
		 {
		  var he = $(item + ' div:eq(' + i + ')').height();
		  if(i == 0) {var mar = '-' + he + 'px';}
		  else if(i & 1){var mar =  he + 'px';} else {var mar = '-' + he + 'px';}
		  $(item + ' div:eq(' + i + ')').delay(del).css({'margin-top': mar}).show().animate({'margin-top':'0px'}, showspeed, function() { // если да, то открываем его и...
         $(".slide[alt=b1]").hide().css({'z-index':'1'}).attr('alt','b0'); // утапливаем прошлый слайд на первый уровень по оси z делаем ему alt невидимого
         $(item).attr('alt','b1'); // нашему слайду делаем alt текущего
		 $('.sldlink').css({'background':'url(img/link.png) no-repeat center top'}); // возвращаем фон всех ссылок на исходную
		 $(".sldlink[rel=" + item1 + "]").css({'background':'url(img/link.png) no-repeat center -40px'});   // сдвигаем фон кликнутой ссылки вверх
         }); 
		 }
        }
       }
      }
   });

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

$(theclass).next('.slnav').children('.sldlink').click(function(e) { // вылавливаем событие - клик по ссылке слайдера

e.preventDefault(); // запрещаем браузеру переход по ссылке

var item1 = $(this).attr('rel'); // выдёргиваем href ссылки

var item = '#' + item1; // делаем из него id

if($(item).attr('alt') == 'b1') {} // проверяем не ведёт ли ссылка на текущий слайд. Если да, то курим

else { // если нет, то работаем

$(item + ' div').hide(); // прячем фрагменты этого слайда

$(item).show(); // показываем сам слайд

$(theclass + " .slide[alt=b1]").css({'z-index':'2'}); // утапливаем прошлый слайд по оси z на второй уровень

$(item).css({'z-index':'3'}).attr('alt','b2'); // выдавливаем наш слайд по оси z на третий уровень и присваеваем ему alt появляющегося слайда

$(this).css({'background':'url(img/link.png) no-repeat center -20px'});

for(var i=0;i<=tofrags;i++) // запускаем цикл появления фрагментов слайда

{

var del = i * interval; // переменная del устанавливает длинну задержки коявления фрагмента в милисекундах

if(i != tofrags) // проверяем не является ли фрагмент последним

{

if(effect == "roll") // если эффект задан roll

{

var wi = $(item + ' div:eq(' + i + ')').width();

$(item + ' div:eq(' + i + ')').delay(del).css({'width':'0px'}).show().animate({'width': wi }, showspeed); // если нет, то просто его открваем

}

else if(effect == "fade") // если эффект задан fade

{

$(item + ' div:eq(' + i + ')').delay(del).fadeIn(showspeed);

}

else if(effect == "slide") // если эффект задан slide

{

$(item + ' div:eq(' + i + ')').delay(del).slideDown(showspeed);

}

else if(effect == "toup") // если эффект задан toup

{

var he = $(item + ' div:eq(' + i + ')').height();

$(item + ' div:eq(' + i + ')').delay(del).css({'margin-top':'-' + he + 'px'}).show().animate({'margin-top':'0px'}, showspeed);

}

else if(effect == "todown") // если эффект задан todown

{

var he = $(item + ' div:eq(' + i + ')').height();

$(item + ' div:eq(' + i + ')').delay(del).css({'margin-top': he + 'px'}).show().animate({'margin-top':'0px'}, showspeed);

}

else if(effect == "toupdown") // если эффект задан toupdown

{

var he = $(item + ' div:eq(' + i + ')').height();

if(i == 0) {var mar = '-' + he + 'px';}

else if(i & 1){var mar = he + 'px';} else {var mar = '-' + he + 'px';}

$(item + ' div:eq(' + i + ')').delay(del).css({'margin-top': mar}).show().animate({'margin-top':'0px'}, showspeed);

}

else if(effect == "wave") // если эффект задан wave

{

$(item + ' div:eq(' + i + ')').delay(del).show(showspeed);

}

} // если фрагмент последний

else

{

if(effect == "roll") // если эффект задан roll

{

var wi = $(item + ' div:eq(' + i + ')').width();

$(item + ' div:eq(' + i + ')').delay(del).css({'width':'0px'}).show().animate({'width': wi }, showspeed, function() { // если да, то открываем его и...

$(".slide[alt=b1]").hide().css({'z-index':'1'}).attr('alt','b0'); // утапливаем прошлый слайд на первый уровень по оси z делаем ему alt невидимого

$(item).attr('alt','b1'); // нашему слайду делаем alt текущего

$('.sldlink').css({'background':'url(img/link.png) no-repeat center top'}); // возвращаем фон всех ссылок на исходную

$(".sldlink[rel=" + item1 + "]").css({'background':'url(img/link.png) no-repeat center -40px'}); // сдвигаем фон кликнутой ссылки вверх

});

}

else if(effect == "fade") // если эффект задан fade

{

$(item + ' div:eq(' + i + ')').delay(del).fadeIn(showspeed, function() { // если да, то открываем его и...

$(item).attr('alt','b1'); // нашему слайду делаем alt текущего

$('.sldlink').css({'background':'url(img/link.png) no-repeat center top'}); // возвращаем фон всех ссылок на исходную

$(".sldlink[rel=" + item1 + "]").css({'background':'url(img/link.png) no-repeat center -40px'}); // сдвигаем фон кликнутой ссылки вверх

});

}

else if(effect == "slide") // если эффект задан fade

{

$(item + ' div:eq(' + i + ')').delay(del).slideDown(showspeed, function() { // если да, то открываем его и...

$(item).attr('alt','b1'); // нашему слайду делаем alt текущего

$('.sldlink').css({'background':'url(img/link.png) no-repeat center top'}); // возвращаем фон всех ссылок на исходную

$(".sldlink[rel=" + item1 + "]").css({'background':'url(img/link.png) no-repeat center -40px'}); // сдвигаем фон кликнутой ссылки вверх

});

}

else if(effect == "wave") // если эффект задан wave

{

$(item + ' div:eq(' + i + ')').delay(del).show(showspeed, function() { // если да, то открываем его и...

$(item).attr('alt','b1'); // нашему слайду делаем alt текущего

$('.sldlink').css({'background':'url(img/link.png) no-repeat center top'}); // возвращаем фон всех ссылок на исходную

$(".sldlink[rel=" + item1 + "]").css({'background':'url(img/link.png) no-repeat center -40px'}); // сдвигаем фон кликнутой ссылки вверх

});

}

else if(effect == "toup") // если эффект задан toup

{

var he = $(item + ' div:eq(' + i + ')').height();

$(item + ' div:eq(' + i + ')').delay(del).css({'margin-top':'-' + he + 'px'}).show().animate({'margin-top':'0px'}, showspeed, function() { // если да, то открываем его и...

$(item).attr('alt','b1'); // нашему слайду делаем alt текущего

$('.sldlink').css({'background':'url(img/link.png) no-repeat center top'}); // возвращаем фон всех ссылок на исходную

$(".sldlink[rel=" + item1 + "]").css({'background':'url(img/link.png) no-repeat center -40px'}); // сдвигаем фон кликнутой ссылки вверх

});

}

else if(effect == "todown") // если эффект задан todown

{

var he = $(item + ' div:eq(' + i + ')').height();

$(item + ' div:eq(' + i + ')').delay(del).css({'margin-top': he + 'px'}).show().animate({'margin-top':'0px'}, showspeed, function() { // если да, то открываем его и...

$(item).attr('alt','b1'); // нашему слайду делаем alt текущего

$('.sldlink').css({'background':'url(img/link.png) no-repeat center top'}); // возвращаем фон всех ссылок на исходную

$(".sldlink[rel=" + item1 + "]").css({'background':'url(img/link.png) no-repeat center -40px'}); // сдвигаем фон кликнутой ссылки вверх

});

}

else if(effect == "toupdown") // если эффект задан toupdown

{

var he = $(item + ' div:eq(' + i + ')').height();

if(i == 0) {var mar = '-' + he + 'px';}

else if(i & 1){var mar = he + 'px';} else {var mar = '-' + he + 'px';}

$(item + ' div:eq(' + i + ')').delay(del).css({'margin-top': mar}).show().animate({'margin-top':'0px'}, showspeed, function() { // если да, то открываем его и...

$(item).attr('alt','b1'); // нашему слайду делаем alt текущего

$('.sldlink').css({'background':'url(img/link.png) no-repeat center top'}); // возвращаем фон всех ссылок на исходную

$(".sldlink[rel=" + item1 + "]").css({'background':'url(img/link.png) no-repeat center -40px'}); // сдвигаем фон кликнутой ссылки вверх

});

}

});

Как видите, в этом же отрезке мы добавили новые эффекты

Заключение

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

Ваши вопросы и отзывы жду в комментариях

С уважением Михаил Беляев

Автор: Михаил Беляев

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Метки: jquery галерея, анимация спрайтов