25 797 Скрипты / 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:

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

Смена темы

Изменить внешний вид галереи не сложно. Достаточно подключить в шапке файл стилей с новой темой:

<link rel='stylesheet' href='unitegallery/skins/alexis/alexis.css' type='text/css' />

Например с темой alexis. Хотите создать свою? Просто создайте другую папку, скопируйте туда файлы из темы alexis и замените своими графическими элементами и стилями.

Далее вы можете указать какие именно графические элементы хотите изменить (кнопки, стрелки и т.д.), либо глобально - все элементы:

$("gallery").unitegallery({
    gallery_skin:"alexis"
}); 

Более подробно читайте на офф. сайте плагина.

Галерея имеет собственное API - документация

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

Комментарии

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

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