Главная » Файлы » Прочие скрипты » Яваскрипты

Очень крутая галерея 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
на уникальный id ролика

Как использовать галерею, вроде, разобрались. Это базовое использование

Более продвинутое использование расписано ЗДЕСЬ

Как я уже говорил, у галереи куча настроек, перечень которых вы можете найти ЗДЕСЬ

Пример использования настроек + русификация:
Код
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

Категория: Яваскрипты | Добавил: Apocalypse | Теги: Shadowbox, очень, галерея, плюшек, кучей, контента, разного, для, Крутая
Просмотров: 798 | Загрузок: 194 | Рейтинг: 1.0/1
Всего комментариев: 0
Имя *:
Email: