Главная » Файлы » Прочие скрипты » Яваскрипты |
Очень крутая галерея Shadowbox для разного контента с кучей плюшек для вашего сайта
[ Скачать с сервера (22.7 Kb) ] | 20.09.14, 10:43:02 |
Вообще шикарная галерея, которая имеет кучу настроек и умеет одинаково хорошо открывать как картинки, так и видео с различных источников. Галерея очень проста в установке и использовании, что делает её доступной всем желающим Для начала посмотрите ДЕМО Моё тестирование в фидле: КЛИК Для начала после < /head > вставьте: Код <link rel="stylesheet" type="text/css" href="/css/shadowbox.css"> <script type="text/javascript" src="/js/shadowbox.js"></script> <script> Shadowbox.init(); // Включение библиотеки Shadowbox.setup("a.gallery1", { // Элементы с каким тегом и классом обрабатывать gallery: "mustang", continuous: true, counterType: "skip" }); В качестве примера я использовал набор картинок с общим одинаковым классом gallery1, чтобы скрипт позволил нам листать эти изображения поочерёдно Картинки для галереи оформляются следующим образом: Код <a class="gallery1" href="Ссылка на большое изображение 1"> <img src="Ссылка на миниатюру 1" alt="Заголовок" class="border" /> </a> <a class="gallery1" href="Ссылка на большое изображение 2"> <img src="Ссылка на миниатюру 2" alt="Заголовок" class="border" /> </a> <a class="gallery1" href="Ссылка на большое изображение 3"> <img src="Ссылка на миниатюру 3" alt="Заголовок" class="border" /> </a> Вот как оформляются ролики, к примеру, с источника youtube: Код <a rel="shadowbox;width=405;height=340;player=swf" title="Заголовок" href="http://www.youtube.com/v/lSnWhsmlGec&hl=en&fs=1&rel=0&autoplay=1"> <img src="http://i1.ytimg.com/vi/lSnWhsmlGec/default.jpg" class="border"/> </a> Обратите внимание на ссылку на картинку. Мы используем сервис для быстрых скриншотов видеоконтента и нам в в адресе ссылки достаточно заменить то, что я пометил в ссылке Цитата http://i1.ytimg.com/vi/lSnWhsmlGec/default.jpg Как использовать галерею, вроде, разобрались. Это базовое использование Более продвинутое использование расписано ЗДЕСЬ Как я уже говорил, у галереи куча настроек, перечень которых вы можете найти ЗДЕСЬ Пример использования настроек + русификация: Код Shadowbox.setup("a.gallery1", { // Элементы с каким тегом и классом обрабатывать gallery: "mustang", // Название генерируемой галереи animate: true, // Использовать ли анимацию animateFade: true, // Использовать ли эффект затухания animSequence: 'sync', // Использовать ли анимацию при изменении размера окна autoplayMovies: true, // Автовоспроизведение continuous: true, // Можно ли листать изображения по кругу или только от первого до последнего counterLimit: 10, // Ограничение количества отображаемых цифр на счётчике под картинкой counterType: 'default', // Тип счётчика displayCounter: true, // Отображать ли счётчик displayNav: true, // Отображать ли навигацию enableKeys: true, // Обрабатывать ли клавиатурные нажатия fadeDuration:0.35, // Скорость анимации flashParams: {bgcolor:"#000000"}, // Настройки флеш flashVars: {}, // Переменные флеш flashVersion: "9.0.0", // Версия флеш handleOversize: "resize", // Обработчик событий на изображении. "resize", "drag" и "none" доступны handleUnsupported: "link", // Что-то вроде обработчика совместимости элементов initialHeight: 160, // Высота блока предзагрузки initialWidth: 320, // Ширина блока предзагрузки modal: false, // Не закрывать окно при клике по затемнению (Оверлею) overlayColor:'#000', // Цвет оверлея overlayOpacity: 0.5, // Прозрачность оверлея resizeDuration: 0.35, // Скорость анимации изменения размеров окна showOverlay: true, // Показывать ли оверлей showMovieControls: true, // Отображать ли кнопки управления видео skipSetup: true, // Отключить ли автоматический вызов функции Shadowbox.setup slideshowDelay: 0, // Задержка в слайдшоу troubleElements: ["select", "object", "embed", "canvas"], // Массив элементов, которые перекрывает оверлей viewportPadding: 20 // Ширина отступов вокруг окна }); Скрипт из прикреплённого архива залейте в папку js, стиль в папку css и все картинки в папку img Материал подготовлен Apocalypse | |
Просмотров: 935 | Загрузок: 274 | |
Всего комментариев: 0 | |
| |