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

[klimatika24]

Здравствуйте!
Помогите пож-та сделать дополнительные фотки в карточке товара в линию как здесь:


А вот как сейчас они расположены - http://klimatik-city...beta-2-mechanic

[MikDark]

klimatika24 (21 Март 2014 - 12:11) писал:

Здравствуйте!
Помогите пож-та сделать дополнительные фотки в карточке товара в линию как здесь:
1.png

А вот как сейчас они расположены - http://klimatik-city...beta-2-mechanic

1) Найдите в шаблоне Товар этот код:

<!-- Другие изображения товара. Отображаются если есть изображения товара -->
	 {% IFNOT goods_images_empty %}
		 {% FOR goods_images %}
		 <!-- Заголовок и обёртка для изображений, которая позволяет не показывать уменьшенное изображение товара если оно у него лишь одно -->
		 {% IF goods_images.first %}
			 <div class="allphoto clear">
			 <div class="title fnt11i" {% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>Другие фото {GOODS_NAME}</div>
		 {% ENDIF %}
		 <!-- Уменьшенное изображение товара -->
		 <ul class="txtalgncnt zoomicon">
			 <li>
				 <a href="{goods_images.LARGE}" rel="group" class="pict_gallery" target="_blank" title="{goods_images.NAME}">
				 <img class="cornerAll withBorder" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" />
				 </a>
			 </li>
			 <!-- Идентификатор изображения товара, используется для галереи изображений -->
			 <input type="hidden" rel="{goods_images.ID}" />
		 </ul>
		 <!-- В самом конце закрываем обёртку для списка маленьких изображений товара -->
		 {% IF goods_images.last %}
			 <div class="clear"></div>
			 </div>
		 {% ENDIF %}
		 {% ENDFOR %}
	 {% ENDIF %}

и переместите его чуть ниже, перед:

<div class="clear"></div>
	
</div>
</form>

Далее в шаблоне main.css добавьте вниз код:

.allphoto .title {
font-weight: bold;
color: #8BAF03;
margin: 0 0 5px 0;
}




.allphoto ul li {
float: left;
min-width: 85px;
min-height: 60px;
margin: 0 15px 0px 0;
display: inline-block;
}

.allphoto ul li a {
display: block;
padding: 3px;
min-width: 85px;
}

.allphoto ul li a img {
max-width: 75px;
max-height: 55px;
}
.allphoto ul {
display:inline-block;
max-width:75px;
}

[klimatika24]

MikDark (21 Март 2014 - 12:35) писал:

1) Найдите в шаблоне Товар этот код:

<!-- Другие изображения товара. Отображаются если есть изображения товара -->
	 {% IFNOT goods_images_empty %}
		 {% FOR goods_images %}
		 <!-- Заголовок и обёртка для изображений, которая позволяет не показывать уменьшенное изображение товара если оно у него лишь одно -->
		 {% IF goods_images.first %}
			 <div class="allphoto clear">
			 <div class="title fnt11i" {% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>Другие фото {GOODS_NAME}</div>
		 {% ENDIF %}
		 <!-- Уменьшенное изображение товара -->
		 <ul class="txtalgncnt zoomicon">
			 <li>
				 <a href="{goods_images.LARGE}" rel="group" class="pict_gallery" target="_blank" title="{goods_images.NAME}">
				 <img class="cornerAll withBorder" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" />
				 </a>
			 </li>
			 <!-- Идентификатор изображения товара, используется для галереи изображений -->
			 <input type="hidden" rel="{goods_images.ID}" />
		 </ul>
		 <!-- В самом конце закрываем обёртку для списка маленьких изображений товара -->
		 {% IF goods_images.last %}
			 <div class="clear"></div>
			 </div>
		 {% ENDIF %}
		 {% ENDFOR %}
	 {% ENDIF %}

и переместите его чуть ниже, перед:

<div class="clear"></div>
	
</div>
</form>

Далее в шаблоне main.css добавьте вниз код:

.allphoto .title {
font-weight: bold;
color: #8BAF03;
margin: 0 0 5px 0;
}




.allphoto ul li {
float: left;
min-width: 85px;
min-height: 60px;
margin: 0 15px 0px 0;
display: inline-block;
}

.allphoto ul li a {
display: block;
padding: 3px;
min-width: 85px;
}

.allphoto ul li a img {
max-width: 75px;
max-height: 55px;
}
.allphoto ul {
display:inline-block;
max-width:75px;
}

Спасибо за ответ, но опишите пожалуйста действия более детально, а не то я не смогу это сделать.

[empty9228]

Здравствуйте код

<div class="clear"></div>
		
</div>
</form>

вы можете найти у себя в шаблоне "товар" на строчке 280 - 282

блок

<!-- Другие изображения товара. Отображаются если есть изображения товара -->
		 {% IFNOT goods_images_empty %}
				 {% FOR goods_images %}
				 <!-- Заголовок и обёртка для изображений, которая позволяет не показывать уменьшенное изображение товара если оно у него лишь одно -->
				 {% IF goods_images.first %}
						 <div class="allphoto clear">
						 <div class="title fnt11i" {% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>Другие фото {GOODS_NAME}</div>
				 {% ENDIF %}
				 <!-- Уменьшенное изображение товара -->
				 <ul class="txtalgncnt zoomicon">
						 <li>
								 <a href="{goods_images.LARGE}" rel="group" class="pict_gallery" target="_blank" title="{goods_images.NAME}">
								 <img class="cornerAll withBorder" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" />
								 </a>
						 </li>
						 <!-- Идентификатор изображения товара, используется для галереи изображений -->
						 <input type="hidden" rel="{goods_images.ID}" />
				 </ul>
				 <!-- В самом конце закрываем обёртку для списка маленьких изображений товара -->
				 {% IF goods_images.last %}
						 <div class="clear"></div>
						 </div>
				 {% ENDIF %}
				 {% ENDFOR %}
		 {% ENDIF %}

находится на строках 62 - 86