77 Slider

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 - документация

Скачать 4881Загрузок 5,26 Mb
Демо

Комментарии

  • Facebook
  • Вконтакте

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