Предисловие.
Была задача, по переносу сайта с конструктора 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>
Здравствуйте, подскажите как убрать zoom у больших фото ?
gallery_mousewheel_role: «none»,
доброго времени.
а где что изменить? :
нужно изменить тайм между картинками в слайдшоу
и по дефолту что б галерея открывалась на весь экран