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

[dsk-teremok]

Сейчас в описание товаров вставляю фото от клиентов.
Лежат они там простыней, друг под другом. Увеличить нельзя.

Как загрузить туда галерею?
Чтобы у каждого товара СВОЯ галерея (свой фоторяд)
Были кнопочки вправо влево,чтобы фоторяд можно было прокручитвать.

Мой магазин Аккаунт SL-296076

[Ирина345]

dsk-teremok (11 Июнь 2015 - 13:02) писал:

Сейчас в описание товаров вставляю фото от клиентов.
Лежат они там простыней, друг под другом. Увеличить нельзя.

Как загрузить туда галерею?
Чтобы у каждого товара СВОЯ галерея (свой фоторяд)
Были кнопочки вправо влево,чтобы фоторяд можно было прокручитвать.

Мой магазин Аккаунт SL-296076

Здравствуйте, вы можете для дополнительных изображений товара(галереи) создать слайдер, которой позволит прокручивать фото.
Вы можете использовать стандартный слайдер для галереи.
Выполните инструкцию до 10 пункта и отпишитесь.

[dsk-teremok]

Ирина345 (11 Июнь 2015 - 13:06) писал:

Здравствуйте, вы можете для дополнительных изображений товара(галереи) создать слайдер, которой позволит прокручивать фото.
Вы можете использовать стандартный слайдер для галереи.
Выполните инструкцию до 10 пункта и отпишитесь.

Этот слайдер у меня установлен на главной странице.  Что делать дальше?

[MikDark]

dsk-teremok (11 Июнь 2015 - 13:35) писал:

Этот слайдер у меня установлен на главной странице.  Что делать дальше?

В описание страницы через кнопку Источник попробуйте добавить код:

<!-- Непосредственный код слайдера -->

<div id="slider">

<a href="[url="http://dsk-teremok.ru/catalog/Napolnye-kompleksy/%22><img"]http://dsk-teremok.r...ompleksy/"><img[/url] src="[url="http://zagruzitfoto.com/images/2015/04/07/SVMs1.jpg"]http://zagruzitfoto....4/07/SVMs1.jpg"[/url] alt="SVMs1.jpg" border="0" />
<a href="[url="http://dsk-teremok.ru/catalog/Pristennye-kompleksy/%22><img"]http://dsk-teremok.r...ompleksy/"><img[/url] src="[url="http://zagruzitfoto.com/images/2015/04/07/4LrAB.jpg"]http://zagruzitfoto....4/07/4LrAB.jpg"[/url] alt="4LrAB.jpg" border="0" />
<a href="[url="http://dsk-teremok.ru/catalog/Ulichnye-kompleksy/%22><img"]http://dsk-teremok.r...ompleksy/"><img[/url] src="[url="http://zagruzitfoto.com/images/2015/04/07/CATfV.jpg"]http://zagruzitfoto....4/07/CATfV.jpg"[/url] alt="CATfV.jpg" border="0" />
<a href="[url="http://dsk-teremok.ru/catalog/Novaya-kategoriya-2/%22><img"]http://dsk-teremok.r...goriya-2/"><img[/url] src="[url="http://zagruzitfoto.com/images/2015/04/07/HRoq0.jpg"]http://zagruzitfoto....4/07/HRoq0.jpg"[/url] alt="HRoq0.jpg" border="0" />
</div>
</div>

<!-- Запуск слайдера -->

<script type="text/javascript">

$(window).load(function() {

$('#slider').nivoSlider().parent().show(); });

</script>

Если слайдер появится, то можете заменить ссылки на изображения.

[dsk-teremok]

MikDark (11 Июнь 2015 - 16:28) писал:

В описание страницы через кнопку Источник попробуйте добавить код:

<!-- Непосредственный код слайдера -->

<div id="slider">

<a href="[url="http://dsk-teremok.ru/catalog/Napolnye-kompleksy/%22><img"]http://dsk-teremok.r...ompleksy/"><img[/url] src="[url="http://zagruzitfoto.com/images/2015/04/07/SVMs1.jpg"]http://zagruzitfoto....4/07/SVMs1.jpg"[/url] alt="SVMs1.jpg" border="0" />
<a href="[url="http://dsk-teremok.ru/catalog/Pristennye-kompleksy/%22><img"]http://dsk-teremok.r...ompleksy/"><img[/url] src="[url="http://zagruzitfoto.com/images/2015/04/07/4LrAB.jpg"]http://zagruzitfoto....4/07/4LrAB.jpg"[/url] alt="4LrAB.jpg" border="0" />
<a href="[url="http://dsk-teremok.ru/catalog/Ulichnye-kompleksy/%22><img"]http://dsk-teremok.r...ompleksy/"><img[/url] src="[url="http://zagruzitfoto.com/images/2015/04/07/CATfV.jpg"]http://zagruzitfoto....4/07/CATfV.jpg"[/url] alt="CATfV.jpg" border="0" />
<a href="[url="http://dsk-teremok.ru/catalog/Novaya-kategoriya-2/%22><img"]http://dsk-teremok.r...goriya-2/"><img[/url] src="[url="http://zagruzitfoto.com/images/2015/04/07/HRoq0.jpg"]http://zagruzitfoto....4/07/HRoq0.jpg"[/url] alt="HRoq0.jpg" border="0" />
</div>
</div>

<!-- Запуск слайдера -->

<script type="text/javascript">

$(window).load(function() {

$('#slider').nivoSlider().parent().show(); });

</script>

Если слайдер появится, то можете заменить ссылки на изображения.

нет, не появился

[dsk-teremok]

Здравствуйте! Вопрос!
Нашла на просторах вот такую галерею http://shpargalkablo...2/gallery.html Там код прописан.
Объясните мне куда что вставлять,чтобы заработало.

[velena168]

+

[dsk-teremok]

Ждем ответ!

[Vaccina]

dsk-teremok (11 Июнь 2015 - 20:48) писал:

нет, не появился

<!-- Непосредственный код слайдера -->
<div id="slider">
<a href="[url="http://dsk-teremok.ru/catalog/Napolnye-kompleksy/%22><img"]http://dsk-teremok.r...ompleksy/"><img[/url] src="[url="http://zagruzitfoto.com/images/2015/04/07/SVMs1.jpg"]http://zagruzitfoto....4/07/SVMs1.jpg"[/url] alt="SVMs1.jpg" border="0" />
<a href="[url="http://dsk-teremok.ru/catalog/Pristennye-kompleksy/%22><img"]http://dsk-teremok.r...ompleksy/"><img[/url] src="[url="http://zagruzitfoto.com/images/2015/04/07/4LrAB.jpg"]http://zagruzitfoto....4/07/4LrAB.jpg"[/url] alt="4LrAB.jpg" border="0" />
<a href="[url="http://dsk-teremok.ru/catalog/Ulichnye-kompleksy/%22><img"]http://dsk-teremok.r...ompleksy/"><img[/url] src="[url="http://zagruzitfoto.com/images/2015/04/07/CATfV.jpg"]http://zagruzitfoto....4/07/CATfV.jpg"[/url] alt="CATfV.jpg" border="0" />
<a href="[url="http://dsk-teremok.ru/catalog/Novaya-kategoriya-2/%22><img"]http://dsk-teremok.r...goriya-2/"><img[/url] src="[url="http://zagruzitfoto.com/images/2015/04/07/HRoq0.jpg"]http://zagruzitfoto....4/07/HRoq0.jpg"[/url] alt="HRoq0.jpg" border="0" />
</div>
</div>
<!-- Запуск слайдера -->
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider().parent().show(); });
</script>

замените на:

<!-- Непосредственный код слайдера -->
<div id="slider">
<a href="http://dsk-teremok.ru/catalog/Napolnye-kompleksy/%22"><img src="http://zagruzitfoto.com/images/2015/04/07/SVMs1.jpg" alt="" />
<a href="http://dsk-teremok.ru/catalog/Novaya-kategoriya-2/%22"><img src="http://zagruzitfoto.com/images/2015/04/07/HRoq0.jpg" alt="" />
</div>
</div>
<!-- Запуск слайдера -->
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider().parent().show(); });
</script>

dsk-teremok (29 Август 2015 - 22:34) писал:

Здравствуйте! Вопрос!
Нашла на просторах вот такую галерею http://shpargalkablo...2/gallery.html Там код прописан.
Объясните мне куда что вставлять,чтобы заработало.

В style\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>

[dsk-teremok]

Vaccina (03 Сентябрь 2015 - 04:57) писал:

<!-- Непосредственный код слайдера -->
<div id="slider">
<a href="[url="http://dsk-teremok.ru/catalog/Napolnye-kompleksy/%22><img"]http://dsk-teremok.r...ompleksy/"><img[/url] src="[url="http://zagruzitfoto.com/images/2015/04/07/SVMs1.jpg"]http://zagruzitfoto....4/07/SVMs1.jpg"[/url] alt="SVMs1.jpg" border="0" />
<a href="[url="http://dsk-teremok.ru/catalog/Pristennye-kompleksy/%22><img"]http://dsk-teremok.r...ompleksy/"><img[/url] src="[url="http://zagruzitfoto.com/images/2015/04/07/4LrAB.jpg"]http://zagruzitfoto....4/07/4LrAB.jpg"[/url] alt="4LrAB.jpg" border="0" />
<a href="[url="http://dsk-teremok.ru/catalog/Ulichnye-kompleksy/%22><img"]http://dsk-teremok.r...ompleksy/"><img[/url] src="[url="http://zagruzitfoto.com/images/2015/04/07/CATfV.jpg"]http://zagruzitfoto....4/07/CATfV.jpg"[/url] alt="CATfV.jpg" border="0" />
<a href="[url="http://dsk-teremok.ru/catalog/Novaya-kategoriya-2/%22><img"]http://dsk-teremok.r...goriya-2/"><img[/url] src="[url="http://zagruzitfoto.com/images/2015/04/07/HRoq0.jpg"]http://zagruzitfoto....4/07/HRoq0.jpg"[/url] alt="HRoq0.jpg" border="0" />
</div>
</div>
<!-- Запуск слайдера -->
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider().parent().show(); });
</script>

замените на:

<!-- Непосредственный код слайдера -->
<div id="slider">
<a href="http://dsk-teremok.ru/catalog/Napolnye-kompleksy/%22"><img src="http://zagruzitfoto.com/images/2015/04/07/SVMs1.jpg" alt="" />
<a href="http://dsk-teremok.ru/catalog/Novaya-kategoriya-2/%22"><img src="http://zagruzitfoto.com/images/2015/04/07/HRoq0.jpg" alt="" />
</div>
</div>
<!-- Запуск слайдера -->
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider().parent().show(); });
</script>

В style\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>

Спасибо,  а как вставить больше 8 фото?
3-4 строчку

[dsk-teremok]

Как вставить больше фото - разобралась.
Помогите:
1. Чтобы превьюшки не были растянутыми такими. http://dsk-teremok.r...-derevo-170-DSK
2. После клика на изображение оно увеличивалось почти на всю страницу, т.е. выплывало крупнее,чем сейчас и с правильными пропорциями.

[Vaccina]

Как вариант, проставить автоматическую ширину и высоту фото, в main.css найдите:

#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 {
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;
height: auto !important;
width: auto !important;
}

Чтобы фото были ровными по отношению друг к другу и не вытянутыми лучше заранее сделать все фото одинаковыми по размерам.

[dsk-teremok]

Vaccina (04 Сентябрь 2015 - 04:49) писал:

Как вариант, проставить автоматическую ширину и высоту фото, в main.css найдите:

#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 {
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;
height: auto !important;
width: auto !important;
}

Чтобы фото были ровными по отношению друг к другу и не вытянутыми лучше заранее сделать все фото одинаковыми по размерам.

Спасибо!
Как сделать, что при клике на картинке оно больше увеличивалось. Было крупнее,чем сейчас?

[dsk-teremok]

Давайте я вопросы сформулирую отдельным сообщением.

1. Здесь http://shpargalkablo...2/gallery.html место откуда я взяла галерею. Картинку для примера все разные, и они не расплющиваются не наезжают друг на друга.
Вот я хочу ТАК ЖЕ, чтобе превьюшка не была сжатой и расплющенной.

2. После клика на картинку желательно,что бы она очень сильно увеличивалась. Если Вы прокрутите страницу вниз - там есть вторая галерея. Там увеличивается очень сильно. Вот мне надо также.

[Vaccina]

1.Как вариант, попробуйте следующее, в main.css

#gallery {
  position: relative;
  padding-top: 50%;
  -moz-user-select: none; user-select: none;
}
#gallery img {
position: absolute;
top: 12.5%;
left: 12.5%;
max-width: 24.5%;
max-height: 24.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: 37.5%;}
#gallery img:nth-child(n+9) {top: 62.5%;}
#gallery img:nth-child(n+13) {top: 87.5%;}
#gallery img:focus {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  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;
}

замените на:

#gallery {
  position: relative;
  padding-top: 50%;
  -moz-user-select: none; user-select: none;
}
#gallery img {
position: relative;
max-width: 24.5%;
max-height: 49.5%;
width:14.5% !important;
height: auto !important;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
cursor: zoom-in;
transition: .2s;
display: inline-block;
padding: 10px;
margin: 10px;
}
#gallery img:focus {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  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;
}

2.Чем больше исходная вставляемая картинка, тем сильнее она увеличится, взять в пример первое фото на космическую тему, размер данной картинки 4288х2848

[dsk-teremok]

Спасибо! Расположение картинок на странице встало чудесно!
Но при кликаньи он увеличивает, но не сильно.

И еще... теперь между описанием товара и самой галереей пропасть.
Много пустого места.

[dsk-teremok]

dsk-teremok (05 Сентябрь 2015 - 09:39) писал:

Спасибо! Расположение картинок на странице встало чудесно!
Но при кликаньи он увеличивает, но не сильно.

И еще... теперь между описанием товара и самой галереей пропасть.
Много пустого места.

Пожалуйста, ответьте мне

[Vaccina]

На данный момент изменения из инструкции #15  у вас отсутствуют, примените их, после них найдите:

#gallery {
  position: relative;
  padding-top: 50%;
  -moz-user-select: none; user-select: none;
}

замените на:

#gallery {
  position: relative;
  padding-top: 10%;
  -moz-user-select: none; user-select: none;
}

далее найдите:

#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 {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  max-width: 100%;
  max-height: 100%;
  width: 100% !important;
  height: 100% !important;
  outline: none;
  pointer-events: none;
}