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


Как Добавить Картинки С Описанием


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

#1 Candyover

Candyover

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

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

Отправлено 13 Апрель 2014 - 22:03

Каким образом можно добавить справа от фотографии в разделе товара небольшие картинки ( тригеры) и правее от этого тригера написать текст (отображаться должно на каждой странице товара )
часть №1.png
примерно вот такую картинку нужно вставить возле фотографии часть №1.png

#2 MikDark

MikDark

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

  • Модераторы
  • 6 394 сообщений

Отправлено 14 Апрель 2014 - 07:56

Просмотр сообщенияCandyover (13 Апрель 2014 - 22:03) писал:

Каким образом можно добавить справа от фотографии в разделе товара небольшие картинки ( тригеры) и правее от этого тригера написать текст (отображаться должно на каждой странице товара )
Прикрепленный файл часть №1.png
примерно вот такую картинку нужно вставить возле фотографии Прикрепленный файл часть №1.png

В шаблоне Товар Вам нужно найти код:
			 <td class="goodsDataMainImageBlock">
																																												 <!-- Большое изображение -->
																																												 <div class="goodsDataMainImage">
																																																 {% IF GOODS_IMAGE_EMPTY %}
																																																												 <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" />
																																																 {% ELSE %}
																																																												 <a href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id='zoom1' target="_blank" title="Увеличить {GOODS_NAME}" rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250">
<a itemprop="image" class="cloud-zoom" id='zoom1' rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:500" href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}"><img class="cornerAll withBorder goods-image-medium" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" /></a>
</a>
																																																 {% ENDIF %}
																																																 <!-- Идентификатор изображения товара, используется для галереи изображений -->
																																																 <input type="hidden" rel="{GOODS_IMAGE_ID}" />
																																												 </div>
																																											
																																												 <!-- Другие изображения товара. Отображаются если есть изображения товара -->
																																												 {% IFNOT goods_images_empty %}
																																																 {% FOR goods_images %}
																																																												 <!-- Заголовок и обёртка для изображений, которая позволяет не показывать уменьшенное изображение товара если оно у него лишь одно -->
																																																												 {% IF goods_images.first %}
																																																																 <div {% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>
																																																																												 <h5>Другие фото {GOODS_NAME}</h5>
																																																												 {% ENDIF %}
																																																											 <!-- Уменьшенное изображение товара -->
	 <div class="goodsDataMainImagesIcon floatLeft">
			 <a href="{goods_images.LARGE}" rel="gallery" target="_blank" title="{goods_images.NAME}"><img class="cornerAll withBorder goods-image-icon" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
			 <!-- Идентификатор изображения товара, используется для галереи изображений -->
			 <input type="hidden" rel="{goods_images.ID}" />
	 </div>
<!-- В самом конце закрываем обёртку для списка маленьких изображений товара -->
																																																												 {% IF goods_images.last %}
																																																																 </div>
																																																												 {% ENDIF %}
																																																 {% ENDFOR %}
																																												 {% ENDIF %}
																																 </td>

и после него добавить:
<td>
<div class="option"><img src="{ASSETS_IMAGES_PATH}image1.jpg">Текст1</div>
<div class="option"><img src="{ASSETS_IMAGES_PATH}image2.jpg">Текст2</div>
<div class="option"><img src="{ASSETS_IMAGES_PATH}image3.jpg">Текст3</div>
<div class="option"><img src="{ASSETS_IMAGES_PATH}image4.jpg">Текст4</div>
<div class="option"><img src="{ASSETS_IMAGES_PATH}image5.jpg">Текст5</div>
</td>

далее в main.css добавьте:
.option img {
float:left;
}

где image1...5.jpg это имена нужных изображений, которые загружены через раздел Сайт - Редактор шаблонов.
Возможно нудно будет подправить по размерам и по стилям. После установки отпишите если нужны будут корректировки.




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

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