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

jquery галерея

От автора: Многие назовут эту статью «баяном», так как из интернета так и сыпятся различные плагины слайдеров и многие из них бесплатные. Но тут мы вспомним одно из приоритетных правил программиста: «Не стесняйся изобретать велосипед». Это лучший способ досконально разобраться в принципе работы приложения.
Я собственно сам решил разобраться в этой теме и начал писать слайдер с нуля, так и появился материал статьи, которую вы читаете.

автор

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

Доморощенный веб-программист. Проживаю в г. Калининграде, работаю веб-мастером в веб-студии.

Разработкой сайтов занимаюсь с 2008 года. По совместительству занимаюсь дизайном и иллюстрацией.

Сайт: http://mortalbonds.ru/ – «сайт — галерея»

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Что мы хотим получить?

Я решил усложнить себе и вам задачу по программированию, чтобы максимально упростить эксплуатацию приложения.

Нам нужно, чтобы для активации слайдера достаточно было сделать див определённого класса и просто вложить в него нужные img картинки.

Нам нужно, чтобы слайд открывался поверх прошлого.

Нам нужно чтобы слайд красиво открывался по кусочкам.

Нам нужно оформить слайдер так, чтобы люди залипали и как зомби кликали по кнопочкам.

анимация спрайтов

Принцип работы планируемого приложения

При загрузке страницы, скрипт считает количество картинок в диве слайдера и создаёт столько же слайдов и присваивает им уникальные id. В слайдах скрипт создаёт 4 фрагмента, в которых соответствующая картинка используется как фон, и фон этот расположен в каждом фрагменте так, чтобы из всех фрагментов собиралась наша картинка. Изначально скрипт делает все слайды невидимыми, кроме первого, первый он выводит тогда, когда прогружается его img оригинал. Скрипт присваивает слайдам атрибут dir, в котором он определяет статус слайда (новый, текущий, остальные). Первому слайду, при загрузке присваивается статус – «текущий», остальным – «остальные».

Так же при загрузке, скрипт вставляет после слайдера див для ссылок и набивает его ссылками, в соответствии с количеством картинок. Каждой ссылке в атрибут href вставляется уникальный id слайда, в соответствии с порядковым номером.

При клике по ссылке, скрипт находит слайд с id соответствующим хрефу ссылки, ставит ему статус – «новый» и выдавливает его на третий уровень по оси z. Затем фрагменты вызванного слайда исчезают, а сам слайд появляется и фрагменты по очереди начинают красиво вылизать. После появления, слайдер переходит на второй уровень по оси z и ему присваивается статус – «текущий», а прошлый переходит на первый и получает статус – «остальные».

После проделанного, скрипт возвращает спрайты ссылок в исходную, а спрайт кликнутой поднимает на 50%.

Вот и всё.

План DOM

план DOM

HTML вёрстка

Вёрстка очень проста, так как мы планируем, как я уже говорил, максимально упростить процедуру подключения слайдера. Всё что нужно сделать – это подключить библиотеку jquery, подключить наш файл JavaScript, присоединить стили CSS, создать див с классом «myslider» и вставить в него наши картинки (Внимание! Картинки должны быть одного размера).

<!-- Начало - голова документа -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="">
<meta name="keywords" content="">
<!-- Подключаем стили CSS  -->
<link rel="stylesheet" href="css.css" type="text/css"/>
        <!-- Подключаем файл jquery -->
		<script src="js/jquery.js" type="text/javascript"></script>
		<!-- Подключаем наши скрипты -->
		<script src="js/js.js" type="text/javascript"></script>
<title> </title>
</head>
<body>
<!-- div all в котором находится всё содержимое страницы, я использую его для выравнивания страницы по центру -->
<div class="all" align='center'>
<h1>Красивый слайдер на jquery от Михаила Беляева,<br /> специально для <a href='http://webformyself.com'>webformyself.com</a></h1>
<!-- div myslider - это див, в который надо вставлять картинки, которые хотим отобразить в слайдере -->
	<div class="myslider">
	    <!-- те самые img, которые будут листаться   -->
		<img src="img/1.jpg" alt="" />
		<img src="img/2.jpg" alt="" />
		<img src="img/3.jpg" alt="" />
		<img src="img/4.jpg" alt="" />
		<img src="img/5.jpg" alt="" />
		<!-- / те самые img, которые будут листаться   -->
	<!-- / div myslider - это див, в который надо вставлять картинки, которые хотим отобразим в слайдере -->
	</div>
<!-- / div all в котором находится всё содержимое страницы, я использую его для выравнивания страницы по центру -->
</div>

</body>
</html>

JavaScript

Я не просто так показываю JS до стилей CSS. Дело в том, что в файле CSS описаны стили элементов, которых нет в HTML вёрстке, эти объекты добавит скрипт.

Досконально изучите содержание JS файла! Каждое действие мной прокомментировано.
Вы должны понять принцип работы слайдера, чтобы легко его настраивать и дополнять.

Должен признаться, IE меня подставил с этим слайдером не по детски… Он нашёл какие-то ошибки в библиотеке jquery.

Для IE есть рабочий вариант — http://mortalbonds.ru/stethem/
Он значительно проще, это было первое, что у меня получилось.

PS: Найдёте причину бага, пишите в комменты, буду очень благодарен!

$(document).ready(function() { // проверяем загружен ли документ
var sldimgl = $('.myslider img').size(); // вычисляем количество картинок для слайдера

var linmx = sldimgl - 1; // уменьшаем количество на 1, так как при отображении порядкового номера, JS начинает с "0", а не с "1"
$('.myslider').after("<div class='slnav' align='center'></div>"); // вставляем блок для ссылок, сразу после дива - слайдера
var i = 0;

for(var i=0;i <= linmx; i++) // начинаем цикл вставки дивов, которые и будут отображаться как картинки

{

  var imgd = ".myslider img:eq(" + i + ")"; // определяем выборку картинки по порядковому номеру в соответствии с циклом
  var imid = "imid_" + i; // создаём уникальный id для картинки, в соответствии с циклом
  $(imgd).attr('id', "imid_" + i); // выбираем эту картинку и присваиваем ей созданный id

  $(imgd).load(function(){ // ждём пока браузер не прогрузит картинку
   
  
  var diid = $(this).attr('id'); // узнаём id картинки
  var imgsrc = $(this).attr('src'); // узнаём url картинки
  var sldw = $(this).width(); // узнаём ширину картинки
  var sldh = $(this).height(); // и высоту тоже узнаём
  var slfragw = sldw / 4; // делим ширину на четыре, чтобы определить ширину фрагмента слайда
  var div_id = "div_" + diid; // создаём id для дива слайда

  var slideoun = "<div rel='b0' class='slide' id='" + div_id + "' style='display:none; position:absolute; z-index:1;'></div>"; // создаём див слайда, присваивая ему определённые нами значения
  
  $('.myslider').prepend(slideoun); // вставляем только что созданный слайд
  $("#" + div_id).width(sldw); // присваиваем слайду ширину как у картинки
  $("#" + div_id).height(sldh); // присваиваем слайду высоту как у картинки
  
  // вот тут ВНИМАНИЕ!!! Следующая строка определяет фрагменты для слайда и присваивает им бэкграунд картинки.
  // это можно сделать циклом, но я не стал портить себе жизнь, так как фрагментов у меня всего 4.
  // смысл в том, что позиция бэкграунда зависит от порядкового номера фрагмента, чтобы вместе они выглядели как одна картинка 
  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>";
  $("#" + div_id).append(slfrag); // вставляем фрагменты в слайд
  var thisimg = "#" + div_id; // строка для вызова слайда по id
  $('.slfrag').width(slfragw); // присваиваем фрагментам ширину
  $('.slfrag').height(sldh); // присваиваем фрагментам высоту

    



  
  });
 }
 $('.myslider img:first').load(function() { // проверяем загружена ли первая картинка
  $('.slide:first').attr('rel','b1').fadeIn(200); // показываем её слайд и присваиваем его атрибуту рел значение b1, по этому атрибуту, слайдер узнаёт - является ли слайд текущим
 });

 

for(var i = 0; i <= linmx; i++) // запускаем цикл по созданию ссылок на слайды
 {
  if(i == 0) // узнаём не является ли слайд первым
  {
   var pos = "-20px"; // для ссылок мы используем спрайт, если ссылка ведёт на первый слайд то сдвигаем ей фон, 
  }
  else
  {
   var pos = "top"; // если нет, то оставляем его на месте
  }
  
  // при вставке ссылки, мы присваиваем ей href, соответствующий id слайда, на который она ведёт
  $('.slnav').append("<a class='sldlink' href='div_imid_" + i + "' style='background:url(img/link.png) no-repeat center " + pos + ";'></a>");
 }


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


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

      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[rel = 'b1']").hide().css({'z-index':'1'}).attr('rel','b0'); // утапливаем прошлый слайд на первый уровень по оси z делаем ему rel невидимого
         $(item).attr('rel','b1'); // нашему слайду делаем rel текущего
		 $('.sldlink').css({'background':'url(img/link.png) no-repeat center top'}); // возвращаем фон всех ссылок на исходную
		 $(".sldlink[href='" + item1 + "']").css({'background':'url(img/link.png) no-repeat center -20px'});   // сдвигаем фон кликнутой ссылки вверх
         });
        }
       }
      }
   });
});

CSS стили

Тут всё понятно…

 /* убиваем отступы */
*
{
margin:0px;
padding:0px;
}

/* произвольные стили страницы */
h1
{
font-family:Arial;
font-size:24px;
color:#707070;
margin-top:30px;
}

a
{
text-decoration:none;
color:#768c97;
}

a:hover
{
text-decoration:underline;
color:#00b4ff;
}


/* тут я растягиваю страницу и выравниваю содержание по центру */
.all
{
width:100%;
}

/* стили дивы с картинками для слайдера */
.myslider
{
margin-top:50px;
/* ширину и высоту надо задать такие же, как есть у ваших картинок */
width:600px;
height:300px;

/* всякие некроссбраузерные красотульки ))) */
padding:20px;
box-shadow:0px 0px 50px #ccc;
-moz-box-shadow:0px 0px 50px #ccc;
-webkit-box-shadow:0px 0px 50px #ccc;
}

/* скрываем вложенные изображения, так как нам нужны только их атрибуты а не они сами */
.myslider img
{
display:none;
}

/* стили блока ссылок на картинки */

.slnav
{
width:600px;

}

/* стили самих ссылок на картинки */

.sldlink
{

margin:5px;
display:inline-block;
width:20px;
height:20px;
}


/* выравниваем дивы - фрагменты изображения по левому краю */
.slfrag
{
float:left;
}

Вот и всё!

Для закрепления материала!

Я уверен, что если вы попробуете изменить или дополнить код, то вы полностью поймёте принцип его работы.

Задача 1

Увеличьте количество фрагментов слайда и скорость их появления.

Задача 2

Присвойте img атрибут description и выводите его при клике по ссылке в удобном для вас месте.

На этом все. Пишите Ваши вопросы, отзывы, пожелания в комментариях!

киберсант-вебмастер

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

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

E-mail: contact@webformyself.com

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (30)

  1. Отец Виктор

    Спасибо! Добавил в коллекцию, обязательно пригодится!

  2. Эдуард

    Очень красиво!
    Нельзя-ли увидеть код JS от mortalbonds.ru/stethem/ ?
    Хочется запустить в IE (ОЧЕНЬ странный браузер! Как его земля носит?),
    и скорее на сайт!!!
    Мой e-mail: kothergin@mail.ru
    Спасибо за статью!

  3. Михаил Беляев

    Баг решён! Копайтесь в js. id слайда должен хранится в атрибуте rel а не href. При создании слайда замените href на rel и при клике тоже самое.
    Но на всякий случай ссылка на js первой версии: mortalbonds.ru/stethem/js/js.js

  4. Эдуард

    IE «замирает» на 16.$(imgd).load(function(){ // ждём пока браузер не прогрузит картинку
    Он что, тупой?

  5. Сергей

    Большое спасибо! Очень интересно.

  6. Игорь

    Спасибо, очень интерисует, возможно ли сделать прокрутку автоматом, т.е. чтобы само прокручивалось или вручную на выбор?

  7. Денис Николаевич

    А меня вот интересует вопрос: если мы устанавливаем фон для 4х дивов одну и туже картинку, но только смещенную , разве не увеличивает это вес странички и конкретно при работе слайдера.
    Возможно есть вариант программно разрезать изображения? Например сервис PHP который и будет их корнать, или же все таки самостоятельно их создать , имею в виду 4 картинки чем одну в фон 4ем.
    И вообще слишком много кода.

    • Михаил Беляев

      Как раз наоборот!
      Если картинку нарезать, то браузер будет отдельно подгружать каждый фрагмент и страница станет тяжелее.
      А в нашем случае браузер грузит картинку и когда видит её путь в следующий раз, вспоминает её и выводит снова без повторной загрузки.

  8. Macs

    Красивая штучка. Большое спасибо.

  9. Тагир

    Отлично!
    Я как раз думал как разместить несколько фотографий в одной статье и чтобы места много не занимало и все показать.
    Благодарю, за своевременный материал.
    Положил все себе в архив.
    Удачи!

  10. Максим

    Не работает в IE и Opera!

  11. Михаил Беляев

    В ие — это понятно, но вот опера — странно… Протестил только что, у меня всё работает.

    • Эдуард

      Тот файл, которым пользуетесь Вы и тот, что в исходниках явно разные.
      У Вас переменная ‘rel’, а в исходниках она ‘dir’.
      Это, конечно, не существенно, но, возможно, есть и другие отличия!

  12. Ольга

    Очень красиво! Oбязательно вставлю на свой сайт

  13. Эдуард

    Демо из статьи в Opera работает, скачанный вариант-нет!

  14. Константин

    Странно. Опера 11.10 и Мозила 4 — не работает. показывает две совмещённых в серединке картинов и всё. На кнопки нет реакции.

  15. Иван

    Спасибо. Классная галерея получилась! Буду использовать у себя на сайте!

  16. Олег

    В мозилле не работают демо исходники урока в другом браузере все нормально.

  17. Владимир

    Какая жалость! А под IE8 не работает демо!

  18. Васильков

    Кто-то разобрался в чем проблема?

  19. stepan

    Благодарю за урок, весьма необходим был мне.

  20. Иван

    Как всегда полезно и бесплатно!

  21. Seldon

    берд в коде ((( пишите код понятно с использованием классов для расширяемости и независимости.
    Идея понятна сразу если посмотреть демо, но в код смотреть не стал ибо каша полная

    • wraven

      У тебя в башке «берд»: ты сам «классы» в javascript придумал? Код вполне доступный и со своей задачей (показать принцип) справился на отлично.

  22. _b1

    похоже на
    http://nivo.dev7studios.com/
    только ваш в 6ке не завелся и слегка глючит в фоксе — картинки не показывал, разбираться сейчас лень %)

    за практикум спасибо

  23. Face2005

    Зачем этот геморой, если не пашет в большей половине браузеров?

    • Васильков

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

  24. Максим

    Как авто прокрутку сделать?

  25. Влад

    В следующей статье «Эффектная галерея на jquery с использованием анимации спрайтов vol. 2.» там была решена проблема с IE. Как можно то решение привязать к этому слайдеру?
    И как сделать, чтобы слайдер работал на автомате без нажатия кнопкой мыши?
    Спасибо за содействие!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree