Галерея «Unite Gallery»

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Предисловие.

Была задача, по переносу сайта с конструктора wix.com на wordpress. Тупо скопировать код сайта и использовать в шаблоне вордпреса не получится, много заморочек, и одна, существенная, это галерея картинок. Прикинув что возможно конструктор использует не свою разработку а готовый скрипт, начал копать в этом направлении. Просмотрев в консоле браузера, какие скрипты задействованы в галереи, увидел что используются из директории «santa-galleries».

Погуглив, нашел сайт http://unitegallery.net, где собственно и представлена такая же галерея картинок и при том с возможностью скачать и хелпы по настройке.

Теперь по настройкам.

Подключение скриптов и стилей, обратите внимание что для каждого шаблона используется свой скрипт. Например если использовать шаблон Tiles Grid то подключать надо только ug-theme-tilesgrid.js

а этот не надо — ug-theme-default.js

<head>
. . .

<script type='text/javascript' src='/unitegallery/js/unitegallery.min.js'></script>

<link rel='stylesheet' href='/unitegallery/css/unite-gallery.css' type='text/css' />
<!-- скрипт для шаблона гдира -->
<script type='text/javascript' src='/unitegallery/themes/tilesgrid/ug-theme-tilesgrid.js'></script>
<!-- скрипт для шаблона по умолчанию -->
<script type='text/javascript' src='/unitegallery/themes/default/ug-theme-default.js'></script>

<link rel='stylesheet' href='/unitegallery/themes/default/ug-theme-default.css' type='text/css' />

. . .
</head>

Создаем блок с картинками, к которому в последующем подключим скрипт.

src — урл картинки превью

data-image — урл полной версии картинки

data-description — описание картинки


<div id="gallery" style="display:none;">

  <img alt="Image 1 Title" src="/thumbs/img1.jpg"
  data-image="/img/img1.jpg"
  data-description="Image 1 Description"
  style="display:none">

  <img alt="Image 2 Title" src="/thumbs/img2.jpg"
  data-image="/img/img2.jpg"
  data-description="Image 2 Description"
  style="display:none">

  <img alt="Image 3 Title" src="/thumbs/img3.jpg"
  data-image="/img/img3.jpg"
  data-description="Image 3 Description"
  style="display:none">

</div>

Указываем скрипту, какой блок использовать для галереи, в примере с id=»gallery»


<script type="text/javascript">

$(document).ready(function(){
  $("#gallery").unitegallery();
});

</script>

2 комментария

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *