Галерея Изображений
#1
Отправлено 03 Март 2011 - 21:22
Изображения товаров открываются в виде замечательной галереи. Но кроме товаров, хотелось бы иметь возможность выкладывать подобным образом и просто фотографии на контент-страницы (портфолио, например). А то вот так получается не очень.
Можете добавить фичу?
Илья.
#2
Отправлено 04 Март 2011 - 21:18
#3
Отправлено 05 Март 2011 - 17:10
support (04 Март 2011 - 21:18) писал:
1. На странице фотографии показываются в меньшем размере, по сравнению с полным (открывается при клике по любому из фото).
2. По клику открывается галерея фото в полный размер с возможностью пролистывания фотографий.
В общем все как с галереей фото товара, но только в произвольном месте произвольной страницы без привязки к товарам.
Надеюсь, понятно объяснил. Если нужно что-то уточнить/объяснить, то я с радостью это сделаю.
Илья.
#4
Отправлено 10 Март 2011 - 14:37
#5
Отправлено 02 Декабрь 2011 - 18:40
Когда можно ожидать появления этой фичи?
С уважением,
Илья.
#6
Отправлено 02 Январь 2012 - 11:23
#7
Отправлено 08 Февраль 2013 - 13:34
#8
Отправлено 08 Февраль 2013 - 13:38
Eugie89 (08 Февраль 2013 - 13:34) писал:
Создаете отдельную страницу через раздел Сайт -> Страницы и все также по инструкции выполняете. Сами библиотеки можете подключить через файл HTML, а так, в описание вполне галерея должна поставиться. Этот раздел не воспринимает только внутренний код системы, такие как {% IF index_page %} . . . {% INDIF %}
#9
Отправлено 14 Апрель 2016 - 09:31
support 2.0 (08 Февраль 2013 - 13:38) писал:
Не очень понял это сообщение - какие библиотеки и как подключать, по какой инструкции выполнять. Решился ли этот вопрос?
#10
Отправлено 14 Апрель 2016 - 11:01
vasilevichiv (14 Апрель 2016 - 09:31) писал:
Не очень понял это сообщение - какие библиотеки и как подключать, по какой инструкции выполнять. Решился ли этот вопрос?
Здравствуйте, есть простая и легкая версия галереи: http://shpargalkablo...02/gallery.html
Для ее установки в конце style.css (либо main.css) добавляете код:
#gallery { position: relative; padding-top: 50%; -moz-user-select: none; user-select: none; } #gallery img { position: absolute; top: 25%; left: 12.5%; max-width: 24.5%; max-height: 49.5%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); cursor: zoom-in; transition: .2s; } #gallery img:nth-child(4n-2) {left: 37.5%;} #gallery img:nth-child(4n-1) {left: 62.5%;} #gallery img:nth-child(4n) {left: 87.5%;} #gallery img:nth-child(n+5) {top: 75%;} #gallery img:focus { position: absolute; top: 50%; left: 50%; z-index: 1; max-width: 100%; max-height: 100%; outline: none; pointer-events: none; } #gallery img:focus ~ div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #fff; cursor: zoom-out; }
дальше переходим на вкладку "Сайт" - "Страницы", создаем страницу, например " Галерея изображений" в описании нажимаем на кнопку "источник" и уже в источнике добавляем код:
<div id="gallery"> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <div></div> </div>
"ссылка на изображение" заменяете на ссылку. Важно! ссылку нужно добавлять не через переменную (в редакторе страниц они не работают) а третий вариант ссылки, который выдается в редакторе шаблонов при клике на кнопку-цепочку, для получения ссылки на изображение.
Второй вариант галереи по той же ссылке. В main.css добавляйте код:
#gallery1 { position: relative; padding-top: 50%; -moz-user-select: none; user-select: none; } #gallery1 img { position: absolute; top: 25%; left: 12.5%; max-width: 24.5%; max-height: 49.5%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -moz-user-select: none; user-select: none; cursor: zoom-in; } #gallery1 img:nth-child(4n-2) {left: 37.5%;} #gallery1 img:nth-child(4n-1) {left: 62.5%;} #gallery1 img:nth-child(4n) {left: 87.5%;} #gallery1 img:nth-child(n+5) {top: 75%;} #gallery1 img:focus { position: fixed; top: 50%; left: 50%; z-index: 31; max-width: 100%; max-height: 100%; outline: none; pointer-events: none; } #gallery1 img:focus ~ div { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(240,240,240,.9); cursor: zoom-out; }
а в редакторе страниц добавляйте код:
<div id="gallery1"> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <div></div> </div>
"ссылка на изображение" заменяете на ссылку.
#11
Отправлено 14 Апрель 2016 - 15:31
<div id="gallery1">
<img src="ссылка на изображение" alt="" tabindex="0" />
<img src="ссылка на изображение" alt="" tabindex="0" />
<img src="ссылка на изображение" alt="" tabindex="0" />
<img src="ссылка на изображение" alt="" tabindex="0" />
<img src="ссылка на изображение" alt="" tabindex="0" />
<img src="ссылка на изображение" alt="" tabindex="0" />
<img src="ссылка на изображение" alt="" tabindex="0" />
<img src="ссылка на изображение" alt="" tabindex="0" />
<div></div>
</div>
И даже при этом есть некоторая проблема в слоях, в которой сам не разберусь: развернутое изображение выводится между слоев, и поверх него оказываются некоторые меню.
#12
Отправлено 14 Апрель 2016 - 16:02
vasilevichiv (14 Апрель 2016 - 15:31) писал:
<div id="gallery1">
<img src="ссылка на изображение" alt="" tabindex="0" />
<img src="ссылка на изображение" alt="" tabindex="0" />
<img src="ссылка на изображение" alt="" tabindex="0" />
<img src="ссылка на изображение" alt="" tabindex="0" />
<img src="ссылка на изображение" alt="" tabindex="0" />
<img src="ссылка на изображение" alt="" tabindex="0" />
<img src="ссылка на изображение" alt="" tabindex="0" />
<img src="ссылка на изображение" alt="" tabindex="0" />
<div></div>
</div>
И даже при этом есть некоторая проблема в слоях, в которой сам не разберусь: развернутое изображение выводится между слоев, и поверх него оказываются некоторые меню.
Да, спасибо, поправила инструкцию.
#13
Отправлено 14 Апрель 2016 - 16:39
#16
Отправлено 15 Апрель 2016 - 09:29
vasilevichiv (15 Апрель 2016 - 09:16) писал:
В main.css найдите код:
.prod_hold, .prod_hold_recent {*zoom: 1; display: inline-block;display: -moz-inline-stack;*display: inline;vertical-align: top;margin:0 7px 20px 8px;padding:5px;background-color:#1d283c;position:relative;text-align:center;border:1px solid #a39384;z-index: 100;}
и замените на код:
.prod_hold, .prod_hold_recent {*zoom: 1; display: inline-block;display: -moz-inline-stack;*display: inline;vertical-align: top;margin:0 7px 20px 8px;padding:5px;background-color:#1d283c;position:relative;text-align:center;border:1px solid #a39384;}
#17
Отправлено 15 Апрель 2016 - 11:01
Меню "вы смотрели" ушло, что хорошо (скриншот оставил старый). Но верхнее меню продолжает наплывать на развернутую картинку.
#18
Отправлено 15 Апрель 2016 - 11:07
vasilevichiv (15 Апрель 2016 - 11:01) писал:
Меню "вы смотрели" ушло, что хорошо (скриншот оставил старый). Но верхнее меню продолжает наплывать на развернутую картинку.
в main.css код:
#header {position: relative;z-index: 99;background-color:#a39384;border-top:3px solid #1d283c;}
замените на код:
#header {position: relative;z-index: 29;background-color:#a39384;border-top:3px solid #1d283c;}
#19
Отправлено 06 Май 2016 - 14:48
#20
Отправлено 06 Май 2016 - 15:04
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных