Сообщений в теме: 36

[Александр67]

Юля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>

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

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

[Danil]

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

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

Данный вопрос решили, через обратную связи.

[vasilevichiv]

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

[Danil]

vasilevichiv (18 Октябрь 2016 - 16:52) писал:

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

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

[vasilevichiv]

sl-330505

[Danil]

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

[agkostin]

Добрый день!

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

[Mr.Nito]

agkostin (23 Декабрь 2016 - 16:32) писал:

Добрый день!

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

Здравствуйте.
Утоните пожалуйста, на какой странице Вы добавили галерею.
Не получится добавить ещё несколько изображений ?

<img src="ссылка на изображение" alt="" tabindex="0" /

[agkostin]

Добрый день!

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

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

[Vaccina]

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

Зайдите в раздел Сайт - Редактор шаблонов - 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%;}

[agkostin]

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

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

[Vaccina]

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

[agkostin]

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

[57P]

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

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

[57P]

57P (19 Март 2017 - 23:40) писал:

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

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

up

[57P]

шаблон 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;
}

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

[Stasya]

57P (19 Март 2017 - 23:40) писал:

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

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

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