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

jquery галерея

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

Вот и всё.

План DOM

план DOM

HTML вёрстка

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

JavaScript

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

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

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

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

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

CSS стили

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

Вот и всё!

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

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

Задача 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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree