Перейти к содержимому


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


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 36

#1 moskvin

moskvin

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 53 сообщений
  • ГородМосква

Отправлено 03 Март 2011 - 21:22

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

#2 support

support

    Активный участник

  • Модераторы
  • 3 683 сообщений
  • ГородМосква

Отправлено 04 Март 2011 - 21:18

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

#3 moskvin

moskvin

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 53 сообщений
  • ГородМосква

Отправлено 05 Март 2011 - 17:10

Просмотр сообщенияsupport (04 Март 2011 - 21:18) писал:

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

#4 support

support

    Активный участник

  • Модераторы
  • 3 683 сообщений
  • ГородМосква

Отправлено 10 Март 2011 - 14:37

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

#5 moskvin

moskvin

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 53 сообщений
  • ГородМосква

Отправлено 02 Декабрь 2011 - 18:40

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

#6 chebsalyt

chebsalyt

    Пользователь

  • Пользователи
  • PipPip
  • 41 сообщений

Отправлено 02 Январь 2012 - 11:23

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

#7 Eugie89

Eugie89

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 184 сообщений

Отправлено 08 Февраль 2013 - 13:34

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

#8 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 924 сообщений

Отправлено 08 Февраль 2013 - 13:38

Просмотр сообщенияEugie89 (08 Февраль 2013 - 13:34) писал:

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


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

#9 vasilevichiv

vasilevichiv

    Пользователь

  • Пользователи
  • PipPip
  • 42 сообщений
  • ГородКиров

Отправлено 14 Апрель 2016 - 09:31

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

Просмотр сообщенияsupport 2.0 (08 Февраль 2013 - 13:38) писал:

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

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

#10 Юля123

Юля123

    Активный участник

  • Модератоpы
  • 2 567 сообщений

Отправлено 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>

"ссылка на изображение" заменяете на ссылку. Важно! ссылку нужно добавлять не через переменную (в редакторе страниц они не работают) а третий вариант ссылки, который выдается в редакторе шаблонов при клике на кнопку-цепочку, для получения ссылки на изображение.

QIP Shot - Screen 267.png

Второй вариант галереи по той же ссылке. В 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 vasilevichiv

vasilevichiv

    Пользователь

  • Пользователи
  • PipPip
  • 42 сообщений
  • ГородКиров

Отправлено 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>

И даже при этом есть некоторая проблема в слоях, в которой сам не разберусь: развернутое изображение выводится между слоев, и поверх него оказываются некоторые меню.

Прикрепленные изображения

  • 321.jpg


#12 Юля123

Юля123

    Активный участник

  • Модератоpы
  • 2 567 сообщений

Отправлено 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 vasilevichiv

vasilevichiv

    Пользователь

  • Пользователи
  • PipPip
  • 42 сообщений
  • ГородКиров

Отправлено 14 Апрель 2016 - 16:39

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

#14 Юля123

Юля123

    Активный участник

  • Модератоpы
  • 2 567 сообщений

Отправлено 14 Апрель 2016 - 16:53

Просмотр сообщенияvasilevichiv (14 Апрель 2016 - 16:39) писал:

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

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

#15 vasilevichiv

vasilevichiv

    Пользователь

  • Пользователи
  • PipPip
  • 42 сообщений
  • ГородКиров

Отправлено 15 Апрель 2016 - 09:16

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

Изображение

Прикрепленные изображения

  • 321.jpg


#16 Юля123

Юля123

    Активный участник

  • Модератоpы
  • 2 567 сообщений

Отправлено 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 vasilevichiv

vasilevichiv

    Пользователь

  • Пользователи
  • PipPip
  • 42 сообщений
  • ГородКиров

Отправлено 15 Апрель 2016 - 11:01

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

#18 Юля123

Юля123

    Активный участник

  • Модератоpы
  • 2 567 сообщений

Отправлено 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 vasilevichiv

vasilevichiv

    Пользователь

  • Пользователи
  • PipPip
  • 42 сообщений
  • ГородКиров

Отправлено 06 Май 2016 - 14:48

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

#20 vasilevichiv

vasilevichiv

    Пользователь

  • Пользователи
  • PipPip
  • 42 сообщений
  • ГородКиров

Отправлено 06 Май 2016 - 15:04

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




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных