Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> jQuery

ELASTISLIDE - создаём простой, но функциональный плагин просмотра изображений


Elastislide – создаём карусель изображений, адаптирующихся под различные размеры экрана. Плагин написан с помощью jQuery, и может располагаться как по вертикали, так и по горизонтали, имея возможность по умолчанию показывать необходимое минимальное количество изображений.


    Сайты несущие важную и актуальную информацию всегда в спросе, но нельзя забывать и о таком аспекте как отзывчивый интерфейс, ведь интерес пользователей к вашему ресурсу может возрасти, если на нём будут размещены элементы с которыми можно взаимодействовать и получать дополнительную информацию. Сегодня мы рассмотрим jQuery плагин Elastislide, который представляет собой карусель миниатюр изображений адаптирующийся под различные разрешения экрана. Установив его в блок с процентной шириной, он так же будет изменять свои размеры на соответствующие.

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

    Для улучшенной поддержки сенсорных мониторов, Elastislide использует библиотеку jQuery++.

    Оригинальные изображения для демонстрации работы плагина были предоставлены Sherman Geronimo-Tan  и находятся под лицензией Creative Commons Attribution 2.0 Generic (CC BY 2.0).

    HTML

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

<ul id="carousel" class="elastislide-list">
    <li><a href="#"><img src="images/1.jpg" alt="image01" /></a></li>
    <li><a href="#"><img src="images/2.jpg" alt="image02" /></a></li>
    <li><a href="#"><img src="images/3.jpg" alt="image03" /></a></li>
    <!-- ... -->
</ul>

    Инициализация плагина для описанной выше структуры HTML, будет следующей:

$('#carousel').elastislide();

    Настройки

    Плагин Elastislide по умолчанию имеет следующие настройки:

$.Elastislide.defaults = {
    // ориентация 'horizontal' || 'vertical'
    orientation : 'horizontal',
 
    // скорость смены ряда миниатюр
    speed : 500,
 
    // тип сглаживания анимации смены ряда миниатюр
    easing : 'ease-in-out',
 
    // минимальное число миниатюр для показа.
    // если мы меняем размер окна, это позволит убедиться, что число миниатюр minItems всегда отобразятся
    // (если, конечно, minItems больше, чем общее число миниатюр)
    minItems : 3,
 
    // индекс текущей миниатюры (крайняя левая миниатюра плагина)
    start : 0,
     
    // нажимая на миниатюру, вызывается функция обратного вызова
    onClick : function( el, position, evt ) { return false; },
    onReady : function() { return false; },
    onBeforeSlide : function() { return false; },
    onAfterSlide : function() { return false; }
};

    Мы так же можем добавлять новые элементы списка в автоматическом режиме. Ниже приведён пример как это можно сделать:

var carousel = $('#carousel').elastislide();
...
 
$('#carousel').append("<li><a href="#"><img src="images/10.jpg" alt="image03" /></a></li>");
carousel.add();

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

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

    Демонстрации

Демонстрация 1: по умолчанию видны минимум 3 миниатюры;
Демонстрация 2: вертикальное расположение, по умолчанию видны минимум 3 миниатюры;
Демонстрация 3: обёртка и по умолчанию минимум 2 миниатюры видны;
Демонстрация 4: использование плагина как галерею, минимум 4 миниатюры видны.

    Я надеюсь, вам понравился этот плагин, и вы нашли его интересным!

    Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


Дата публикации: 11.04.2013
Опубликовал: Сергей Кашурин
Просмотров: 1956
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


100 бесплатных PSD элементов для веб-дизайна и мобильных устройств.
Всем привет! Давайте сегодняшний день сделаем исключением, и вместо урока, посмотрим очень классные PSD заготовки для веб-сайтов и мобильных приложений которые вы сможете бесплатно скачать!
24 классных PHP библиотеки, о которых вы должны знать
Для PHP-разработчика, и времени лучшего не придумаешь чем сейчас. Ведь каждый день, появляются всё новые и новые вспомогательные элементы, такие, как например полезные библиотеки.
23 jQuery плагина для организации слайд-шоу и галерей на сайте
Дорогие Друзья! Сегодня, я хочу познакомить вас с подборкой замечательных jQuery плагинов для создания слайд-шоу и галерей. Все они являются бесплатными и очень просты в установке и настройке.

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

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

Быть в курсе всех событий: