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

[vasilevichiv]

Здравствуйте!
Прошу помочь, как сделать на странице товара миниатюры фотографий под главной фотографией в виде сетки, а не слайдером со стрелками?

[Ирина345]

vasilevichiv (15 Апрель 2015 - 08:43) писал:

Здравствуйте!
Прошу помочь, как сделать на странице товара миниатюры фотографий под главной фотографией в виде сетки, а не слайдером со стрелками?

Здравствуйте, найдите в шаблоне Товар код

 </div><!-- END основное изображение товара -->
					<div class="thumblist-box">
					  <a href="#" class="prev">
						<span class="icon-arrow-left3"></span>
					  </a>
					  <a href="#" class="next">
						<span class="icon-uniE640"></span>
					  </a>
					  <!-- Другие изображения товара. Отображаются если есть изображения товара -->
					  {% IFNOT goods_images_empty %}
						<div id="thumblist" class="thumblist popup-gallery">
						  {% FOR goods_images %}
							{% IF goods_images.length > 1 %}
							  <a itemprop="image" href="{goods_images.LARGE}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-other" /></a>	  
							{% ENDIF %}
						  {% ENDFOR %}
						</div>
					  {% ENDIF %}<!-- #thumblist -->
					</div><!-- END другие изображение товара -->

замените на

</div><!-- END основное изображение товара -->
					<div class="thumblist-box">
										 <!-- Другие изображения товара. Отображаются если есть изображения товара -->
					  {% IFNOT goods_images_empty %}
						<div class="thumblist popup-gallery">
						  {% FOR goods_images %}
							{% IF goods_images.length > 1 %}
							  <a itemprop="image" href="{goods_images.LARGE}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-other" /></a>	  
							{% ENDIF %}
						  {% ENDFOR %}
						</div>
					  {% ENDIF %}<!-- #thumblist -->
					</div><!-- END другие изображение товара -->

[vasilevichiv]

- Так и должно быть?

Можно сделать фотки раздельно в виде сетки?

[Ирина345]

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

- Так и должно быть?

Можно сделать фотки раздельно в виде сетки?

Добавьте в конец main.css

.thumblist.popup-gallery img {
  padding: 4px;
}

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

.product-page .image-box .thumblist-box {
  margin: 30px 0 0;
  max-height: 100px;
  overflow: hidden;
  padding: 0 54px;
  position: relative;
}

замените на

.product-page .image-box .thumblist-box {
  margin: 30px 0 0;
   overflow: hidden;
  padding: 0 54px;
  position: relative;
}

[vasilevichiv]

Благодарю! То что нужно!

[vasilevichiv]

В мобильной версии сайта сетка продолжает оставаться корявой :/

[Ирина345]

vasilevichiv (17 Апрель 2015 - 08:29) писал:

В мобильной версии сайта сетка продолжает оставаться корявой :/

Здравствуйте, найдите в main.css

.product-page .image-box .thumblist-box {
  max-height: 80px;
  padding: 0 45px;
}

замените на

.product-page .image-box .thumblist-box {
  padding: 0 45px;
}

[vasilevichiv]

Всё классно! Благодарю!

[vencedor]

Здравствуйте. А можно ли сделать так, чтобы сетка с фотографиями начиналась бы от левого края и до правого края сайта (на весь экран), а не так, как сейчас (от начала фотографии до конца фотографии)?

[vencedor]

А какой максимальный срок для получения ответа на мой вопрос?

[Vaccina]

В main.css найдите:

.product-page .image-box .thumblist-box {
  margin: 30px 0 0;
  overflow: hidden;
  padding: 0 54px;
  position: relative;
}

замените на:

.product-page .image-box .thumblist-box {
  left: 0;
  margin: 30px 0 0;
  overflow: hidden;
  padding: 0 54px;
  position: absolute;
  right: 0;
}

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

.product-page .image-box {
  border-radius: 3px;
  overflow: visible;
  position: relative;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
}

в них удалите:

position: relative;

также в main.css добавьте:

.product-shop.row {
  padding-bottom: 200px;
}

[vencedor]

Сделал как написали, ничего не изменилось.

[Vaccina]

На данный момент не наблюдаю у вас изменений, сохраните изменения, чтобы мы могли просмотреть результат.

[vencedor]

Изменения сохранены.

[Vaccina]

Вы произвели не все изменения, на 657 строке код у вас остался неизменным:

.product-page .image-box .thumblist-box { margin: 30px 0 0; overflow: hidden; padding: 0 54px;}

также нет изменений на строке 654.

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

[vencedor]

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
}
Такой строки у себя не нашёл.(хотя может я её уже изменил до этого).
Все изменения произвёл ещё раз после бэкапа, всё получилось. Спасибо, видимо где-то я изначально "накосячил".

[vencedor]

Увидел вдруг проблему, как исправить это наложение фото на кнопку "В Корзину"?

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

• 

[Danil]

vencedor (30 Май 2015 - 17:34) писал:

Увидел вдруг проблему, как исправить это наложение фото на кнопку "В Корзину"?

Здравствуйте.
В main.css найдите код

.product-page .image-box .thumblist-box {
  left: 0;
  margin: 30px 0 0;
  overflow: hidden;
  padding: 0 54px;
  position: absolute;
  right: 0;
}

и замените на

.product-page .image-box .thumblist-box {
  left: 0;
  margin: 30px 0 0;
  overflow: hidden;
  padding: 0 54px;
  right: 0;
}

[vencedor]

Теперь все фото опять расположены под основным фото, а у меня было чтобы они на всю страницу располагались.

[Danil]

vencedor (30 Май 2015 - 18:15) писал:

Теперь все фото опять расположены под основным фото, а у меня было чтобы они на всю страницу располагались.

Сначала, сделайте инструкцию из сообщения 18.
Далее в шаблоне Товар найдите код

	   <div class="thumblist-box">
																				 <!-- Другие изображения товара. Отображаются если есть изображения товара -->
										  {% IFNOT goods_images_empty %}
												<div class="thumblist popup-gallery">
												  {% FOR goods_images %}
														{% IF goods_images.length > 1 %}
														  <a itemprop="image" href="{goods_images.LARGE}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-other" /></a>	
														{% ENDIF %}
												  {% ENDFOR %}
												</div>
										  {% ENDIF %}<!-- #thumblist -->
										</div><!-- END другие изображение товара -->

и перенесите его, вставив строго перед

<div class="clearfix"></div>
			 </div>
		 </form>
		
		 <div class="row">
		 <div class="col-sm-12 col-md-12">
			 <div id="contents" class="product-tab panel-group">