Галерея Изображений

Здравствуйте!
Изображения товаров открываются в виде замечательной галереи. Но кроме товаров, хотелось бы иметь возможность выкладывать подобным образом и просто фотографии на контент-страницы (портфолио, например). А то вот так получается не очень.
Можете добавить фичу?
Илья.

Фичу добавить думаю сможем, вопрос скорее в другом, как должна выглядеть подобная страница? Это делать отдельным модулем без описания или ещё каким-то образом, могли бы Вы посоветовать, или пример дать, как Вам хотелось бы это видеть.

support (04 Март 2011 - 21:18) писал:

Мне бы хотелось иметь возможность вставлять в контент любой страницы такой элемент, как "галерея изображений" и загружать туда одну или несколько картинок. Основные свойства этой фичи.
1. На странице фотографии показываются в меньшем размере, по сравнению с полным (открывается при клике по любому из фото).
2. По клику открывается галерея фото в полный размер с возможностью пролистывания фотографий.
В общем все как с галереей фото товара, но только в произвольном месте произвольной страницы без привязки к товарам.
Надеюсь, понятно объяснил. Если нужно что-то уточнить/объяснить, то я с радостью это сделаю.
Илья.

Хорошо, задачу понял, записал в задачник.

Здравствуйте!
Когда можно ожидать появления этой фичи?
С уважением,
Илья.

А мне бы хотелось чтобы эта функция была реализована на отдельной странице, я думаю это осуществить будет куда проще.

Меня интересует подобный вопрос: как создать галерею изображений в отдельной вкладке? Кто-нибудь решил эту задачу у себя в магазине?

Eugie89 (08 Февраль 2013 - 13:34) писал:

Создаете отдельную страницу через раздел Сайт -> Страницы и все также по инструкции выполняете. Сами библиотеки можете подключить через файл HTML, а так, в описание вполне галерея должна поставиться. Этот раздел не воспринимает только внутренний код системы, такие как {% IF index_page %} . . . {% INDIF %}

Здравствуйте! Тоже интересует этот вопрос - пытался сделать через таблицу с уменьшенными изображениями и ссылку на цель - всплывающее окно. Но картинка просто скачивается при всех перепробованных вариантов.

support 2.0 (08 Февраль 2013 - 13:38) писал:

Не очень понял это сообщение - какие библиотеки и как подключать, по какой инструкции выполнять. Решился ли этот вопрос?

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>

"ссылка на изображение" заменяете на ссылку.

Благодарю за хорошую инструкцию! С вашего разрешения посмею вас поправить для последователей: во втором случае галереи код будет чуть другой:
<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>
И даже при этом есть некоторая проблема в слоях, в которой сам не разберусь: развернутое изображение выводится между слоев, и поверх него оказываются некоторые меню.

vasilevichiv (14 Апрель 2016 - 15:31) писал:

Да, спасибо, поправила инструкцию.

Прошу прощения, а с проблемами в слоях что делать?

vasilevichiv (14 Апрель 2016 - 16:39) писал:

А Вы можете скриншот проблемы прислать?

Скидывал чуть выше:

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;}

Меню "вы смотрели" ушло, что хорошо (скриншот оставил старый). Но верхнее меню продолжает наплывать на развернутую картинку.

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;}

Прошу прощения, долго не мог проверить. Проверил - ничего не изменилось - меню также наплывает на развернутую картинку.

Само исправилось