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

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

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

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

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

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

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

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

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

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

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

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

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

3.1 fragments

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

Эту строку:

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

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

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

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

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

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

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

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

Старый цикл:

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

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

Заключение

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

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

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

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

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

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

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

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

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

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

Научиться

Метки: ,

Похожие статьи:

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

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

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

  1. Руслан

    Полезная информация!

  2. Виталий

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

  3. Баночкин Сергей

    Пака пошел осваивать урок.
    Слишком много буковок и цифирок.

  4. alex

    Интересная работа… Поразбираюсь-ка в вашем коде )))

  5. Александр

    добавил в закладки позже почитаю

  6. Виктория

    К сожалению, в Opera не запускается

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

Ваш 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