UniteGallery - многофункциональная адаптивная галерея
Unite Gallery - многофункциональная галерея для вывода изображений, музыки, видео. Галерея адаптивная с поддержкой touch устройств.
HTML
Размещаем html код элементов из которых будет состоять наша галерея, например в таком виде:
<div id="gallery" style="display:none;">
<img alt="Заголовок изображения 1" src="thumbs/image1.jpg" data-image="images/image1.jpg" data-description="Описание изображения 1">
<img alt="Заголовок изображения 2" src="thumbs/image2.jpg" data-image="images/image02.jpg" data-description="Описание изображения 2">
</div>- alt - название изображения (опционально)
- src - гиперссылка изображения с миниатюрами
- data-image - гиперссылка большого изображения.
- data-description - описание изображения (опция)
JS
Далее перед закрывающим тего HEAD подключим необходимые файлы:
<head>
<!-- ... [другие включения] ... -->
<script type='text/jаvascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script type='text/jаvascript' src='unitegallery/js/unitegallery.min.js'></script>
<link rel='stylesheet' href='unitegallery/css/unite-gallery.css' type='text/css' />
<script type='text/jаvascript' src='unitegallery/themes/default/ug-theme-default.js'></script>
<link rel='stylesheet' href='unitegallery/themes/default/ug-theme-default.css' type='text/css' />
</head>Для инициализации галереи нужно добавить следующий скрипт на страницу:
<script type="text/jаvascript">
$(document).ready(function(){
$("#gallery").unitegallery();
});
</script> HTML для медиа содержимого
В галереи могут проигрываться следующие медиа данные: Youtube, Vimeo, Html5 Video, Wistia, SoundCloud:
<img alt="Youtube с картинками"
data-type="youtube"
src="thumbs/youtube_thumb.jpg"
data-image="images/youtube_image.jpg"
data-videoid="A3PDXmYoF5U"
data-description="Описание видео с Youtube">
<img alt="Youtube без картинок"
data-type="youtube"
data-videoid="A3PDXmYoF5U"
data-description="Описание видео с Youtube">
<img alt="Vimeo Video"
data-type="vimeo"
src="thumbs/vimeo_thumb.jpg"
data-image="images/vimeo_image.jpg"
data-videoid="73234449"
data-description="Описание видео с Vimeo">
<img alt="Html5 Video"
src="thumbs/html5_video_thumb.png"
data-type="html5video"
data-image="thumbs/html5_video_image.png"
data-videoogv="http://video-js.zencoder.com/oceans-clip.ogv"
data-videowebm="http://video-js.zencoder.com/oceans-clip.webm"
data-videomp4="http://video-js.zencoder.com/oceans-clip.mp4"
data-description="Описание видео Html5">
<img alt="Wistia Video"
src="thumbs/wistia_thumb.jpg"
data-image="images/wistia_image.jpg"
data-videoid="9oedgxuciv"
data-description="Описание видео с Wistia!">
<img alt="Sound Cloud Track"
src="thumbs/sound_cloud_thumb.jpg"
data-type="soundcloud"
data-image="images/sound_cloud_image.jpg"
data-trackid="8390970"
data-description="Описание трека с SoundCloud">Для видео с youtube миниатюра и большое изображение не обязательны. Если не указаны, то будут подцеплены с сайта youtube.
Смена темы
Изменить внешний вид галереи не сложно. Достаточно подключить в шапке файл стилей с новой темой:
<link rel='stylesheet' href='unitegallery/skins/alexis/alexis.css' type='text/css' />Например с темой alexis. Хотите создать свою? Просто создайте другую папку, скопируйте туда файлы из темы alexis и замените своими графическими элементами и стилями.
Далее вы можете указать какие именно графические элементы хотите изменить (кнопки, стрелки и т.д.), либо глобально - все элементы:
$("gallery").unitegallery({
gallery_skin:"alexis"
}); Более подробно читайте на офф. сайте плагина.
Галерея имеет собственное API - документация
