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


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


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

#21 Александр67

Александр67

    Новичок

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

Отправлено 06 Август 2016 - 14:05

Просмотр сообщенияЮля123 (14 Апрель 2016 - 11:01) писал:

Здравствуйте, есть простая и легкая версия галереи: 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>

"ссылка на изображение" заменяете на ссылку.
Скажите пожалуйста. я сделал как вы советовали. Все получилось. Вот вопрос. как добавить под каждое фото описание объекта.

#22 Danil

Danil

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

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

Отправлено 07 Август 2016 - 12:22

Просмотр сообщенияАлександр67 (06 Август 2016 - 14:05) писал:

Скажите пожалуйста. я сделал как вы советовали. Все получилось. Вот вопрос. как добавить под каждое фото описание объекта.
Данный вопрос решили, через обратную связи.

#23 vasilevichiv

vasilevichiv

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

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

Отправлено 18 Октябрь 2016 - 16:52

Как изменять размер маленького изображения в галерее?

#24 Danil

Danil

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

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

Отправлено 18 Октябрь 2016 - 17:06

Просмотр сообщенияvasilevichiv (18 Октябрь 2016 - 16:52) писал:

Как изменять размер маленького изображения в галерее?
Здравствуйте.
Уточните, пожалуйста, на каком аккаунте, у Вас установлена данная галерея.

#25 vasilevichiv

vasilevichiv

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

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

Отправлено 19 Октябрь 2016 - 10:40

sl-330505

#26 Danil

Danil

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

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

Отправлено 19 Октябрь 2016 - 14:13

Просмотр сообщенияvasilevichiv (19 Октябрь 2016 - 10:40) писал:

sl-330505
Здравствуйте.
К сожалению, не нашел на какой странице она у Вас установлена.
Попробуйте изменить параметр max-width в коде:
#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;
}


#27 agkostin

agkostin

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

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

Отправлено 23 Декабрь 2016 - 16:32

Добрый день!

Спасибо за инструкцию. По ней получается сделать только 8 фото. Если фотографий больше чем 8, как быть?

#28 Mr.Nito

Mr.Nito

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

  • Модераторы
  • 1 337 сообщений

Отправлено 24 Декабрь 2016 - 18:48

Просмотр сообщенияagkostin (23 Декабрь 2016 - 16:32) писал:

Добрый день!

Спасибо за инструкцию. По ней получается сделать только 8 фото. Если фотографий больше чем 8, как быть?
Здравствуйте.
Утоните пожалуйста, на какой странице Вы добавили галерею.
Не получится добавить ещё несколько изображений ?
<img src="ссылка на изображение" alt="" tabindex="0" /


#29 agkostin

agkostin

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

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

Отправлено 26 Декабрь 2016 - 17:53

Добрый день!

Ссылка на страницу http://r214423.store...vartira-60-kv-m

Сам код галереи в инструкции рассчитан на 8 фото. Если их больше они начинают наслаиваться друг на друга. Как сделать чтобы показывалось нормально?

#30 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 27 Декабрь 2016 - 06:56

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#gallery1 {
position: relative;
padding-top: 50%;
-moz-user-select: none; user-select: none;
}
#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 {
position: relative;
padding-top: 100%;
-moz-user-select: none; user-select: none;
}
#gallery1 img {
position: absolute;
top: 15%;
left: 12.5%;
max-width: 24.5%;
max-height: 29.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: 45%;}
#gallery1 img:nth-child(n+10) {top: 75%;}


#31 agkostin

agkostin

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

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

Отправлено 27 Декабрь 2016 - 16:15

Здравствуйте.

Код изменил. К сожалению, все осталось как было.

#32 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 28 Декабрь 2016 - 00:18

Почистите пожалуйста кэш браузера, на данный момент у вас корректно отображается 12 фото вместо 8.
321.jpg

#33 agkostin

agkostin

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

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

Отправлено 05 Январь 2017 - 20:02

Спасибо большое!

#34 57P

57P

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

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

Отправлено 19 Март 2017 - 23:40

а если надо около 100 фоток? у меня максимум 12 получатся.
http://1111111.ru/page/test

PS: а можно сделать кнопку  показать еще 12, но только чтобы фотки на этой страницы грузились после клика показать еще 12!?

#35 57P

57P

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

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

Отправлено 21 Март 2017 - 20:36

Просмотр сообщения57P (19 Март 2017 - 23:40) писал:

а если надо около 100 фоток? у меня максимум 12 получатся.
http://1111111.ru/page/test

PS: а можно сделать кнопку  показать еще 12, но только чтобы фотки на этой страницы грузились после клика показать еще 12!?
up

#36 57P

57P

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

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

Отправлено 21 Март 2017 - 22:49

шаблон 5х5, итого 25 фоток.  
если надо больше фоток  то несколько раз используем этот код(максимум 25 изображений в каждом)
<div id="gallery1">
<img alt="" src="ссылка на изображение" tabindex="0" />
<img alt="" src="ссылка на изображение" tabindex="0" />
<img alt="" src="ссылка на изображение" tabindex="0" />
<img alt="" src="ссылка на изображение" tabindex="0" />
<img alt="" src="ссылка на изображение" tabindex="0" />
<img alt="" src="ссылка на изображение" tabindex="0" />
<div>&nbsp;</div>
</div>



#gallery1 {
position: relative;
padding-top: 100%;
-moz-user-select: none; user-select: none;
}
#gallery1 img {
position: absolute;
top: 9%;
left: 10%;
max-width: 20%;
max-height: 20%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-moz-user-select: none; user-select: none;
cursor: zoom-in;
}
#gallery1 img:nth-child(5n-4) {left: 10%;}
#gallery1 img:nth-child(5n-3) {left: 30%;}
#gallery1 img:nth-child(5n-2) {left: 50%;}
#gallery1 img:nth-child(5n-1) {left: 70%;}
#gallery1 img:nth-child(5n) {left: 90%;}
#gallery1 img:nth-child(n+6) {top: 29%;}
#gallery1 img:nth-child(n+11) {top: 49%;}
#gallery1 img:nth-child(n+16) {top: 69%;}
#gallery1 img:nth-child(n+21) {top: 89%;}
#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;
}

Просмотр сообщения57P (21 Март 2017 - 22:48) писал:

шаблон 5х5, итого 25 фоток.  
если надо больше фоток  то несколько раз используем этот код(максимум 25 изображений в каждом)
<div id="gallery1">
<img alt="" src="ссылка на изображение" tabindex="0" />
<img alt="" src="ссылка на изображение" tabindex="0" />
<img alt="" src="ссылка на изображение" tabindex="0" />
<img alt="" src="ссылка на изображение" tabindex="0" />
<img alt="" src="ссылка на изображение" tabindex="0" />
<img alt="" src="ссылка на изображение" tabindex="0" />
<div>&nbsp;</div>
</div>



#gallery1 {
position: relative;
padding-top: 100%;
-moz-user-select: none; user-select: none;
}
#gallery1 img {
position: absolute;
top: 9%;
left: 10%;
max-width: 20%;
max-height: 20%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-moz-user-select: none; user-select: none;
cursor: zoom-in;
}
#gallery1 img:nth-child(5n-4) {left: 10%;}
#gallery1 img:nth-child(5n-3) {left: 30%;}
#gallery1 img:nth-child(5n-2) {left: 50%;}
#gallery1 img:nth-child(5n-1) {left: 70%;}
#gallery1 img:nth-child(5n) {left: 90%;}
#gallery1 img:nth-child(n+6) {top: 29%;}
#gallery1 img:nth-child(n+11) {top: 49%;}
#gallery1 img:nth-child(n+16) {top: 69%;}
#gallery1 img:nth-child(n+21) {top: 89%;}
#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;
}


модеры проверьте плиз

#37 Stasya

Stasya

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

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

Отправлено 23 Март 2017 - 13:16

Просмотр сообщения57P (19 Март 2017 - 23:40) писал:

а если надо около 100 фоток? у меня максимум 12 получатся.
http://1111111.ru/page/test

PS: а можно сделать кнопку  показать еще 12, но только чтобы фотки на этой страницы грузились после клика показать еще 12!?
Здравствуйте. Данной страницы не существует на Вашем сайте. Уточните, пожалуйста, где можно проверить такое отображение?




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

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