Смена Фотографии Товара В Зависимости От Цвета
#1
Отправлено 22 Декабрь 2013 - 21:51
Спасибо!
#2
Отправлено 23 Декабрь 2013 - 08:13
#3
Отправлено 26 Декабрь 2013 - 07:59
http://italpalto.com.../testovoe-palto - смотреть на СИНЕМ пальто (пока на нем эксперементировал)
То есть в описании вставил код такого вида:
<a href="ссылка на большое изображение" onclick="$(this).nyroModalManual(); return(false);">
<img src="ссылка на Маленькое изображение" />
</a>
Если вставлять такой код без return(false);:
<a href="ссылка на большое изображение" onclick="$(this).nyroModalManual();">
<img src="ссылка на Маленькое изображение" />
</a>
То изображение увеличивается, однако открывается на весь экран без отображения на заднем фоне страницы сайта.
#4
Отправлено 26 Декабрь 2013 - 08:28
#5
Отправлено 26 Декабрь 2013 - 09:04
jiimMorrison (26 Декабрь 2013 - 08:28) писал:
Возможно данная ошибка отображается только администраторам сайта. Попробуйте воспользоваться другим браузером и посмотреть появляется ли данная ошибка.
#6
Отправлено 26 Декабрь 2013 - 09:14
#7
Отправлено 26 Декабрь 2013 - 09:29
jiimMorrison (26 Декабрь 2013 - 09:14) писал:
Проверил, фотография открывается в всплывающем окне. Попробуйте почистить кэш браузера
#8
Отправлено 26 Декабрь 2013 - 09:33
#9
Отправлено 26 Декабрь 2013 - 09:49
Большое изображение есть, если выбрать синий цвет. Так вот, оно не открывается, выдается ошибка JS:
Script error. на строке: 0.
Адрес файла: http://design.italpa...version2.min.js
#10
Отправлено 26 Декабрь 2013 - 12:26
#11
Отправлено 27 Декабрь 2013 - 02:57
#12
Отправлено 27 Декабрь 2013 - 08:35
В описание модификации изображение можно ставить через тег <img> и при изменении модификации изображение будет отображаться. Так же можно сделать увеличение изображения например так
<a href="ссылка на большое изображение" onclick="$(this).nyroModalManual();">
<img src="ссылка на Маленькое изображение" />
</a>
далее по сути останется переместить описание модификации
<!-- Блок описания модификации -->
<tr>
<td class="goodsDataMainModificationsDescriptionBlock" {% IFNOT GOODS_MOD_DESCRIPTION %}style="display:none;"{% ENDIF %} colspan="2">
{GOODS_MOD_DESCRIPTION}
</td>
</tr>
на место изображения товара
<div class="goodsDataMainImage">
{% IF GOODS_IMAGE_EMPTY %}
<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" />
{% ELSE %}
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}"><img class="cornerAll withBorder goods-image-medium" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" /></a>
{% ENDIF %}
<!-- Идентификатор изображения товара, используется для галереи изображений -->
<input type="hidden" rel="{GOODS_IMAGE_ID}" />
</div>
в итоге из следующего кода
<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 itemprop="image" href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}"><img class="cornerAll withBorder goods-image-medium" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" /></a>
{% ENDIF %}
<!-- Идентификатор изображения товара, используется для галереи изображений -->
<input type="hidden" rel="{GOODS_IMAGE_ID}" />
</div>
<!-- Ссылка на увеличение среднего изображения товара до большого. Появляется если у товара указано изображение -->
{% IFNOT GOODS_IMAGE_EMPTY %}
<div class="goodsDataMainImageZoom">
<a href="{GOODS_IMAGE_LARGE}" target="_blank">Увеличить изображение</a>
</div>
{% ENDIF %}
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
{% 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 left">
<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 class="goodsDataMainImageBlock">
<!-- Большое изображение -->
<div class="goodsDataMainImage goodsDataMainModificationsDescriptionBlock">
{% IF GOODS_MOD_DESCRIPTION %}
{GOODS_MOD_DESCRIPTION | htmlspecialchars_decode}
{%ELSE%}
{% IF GOODS_IMAGE_EMPTY %}
<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" />
{% ELSE %}
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}"><img class="cornerAll withBorder goods-image-medium" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" /></a>
{% ENDIF %}
<!-- Идентификатор изображения товара, используется для галереи изображений -->
<input type="hidden" rel="{GOODS_IMAGE_ID}" />
{% ENDIF %}
</div>
<!-- Ссылка на увеличение среднего изображения товара до большого. Появляется если у товара указано изображение -->
{% IFNOT GOODS_MOD_DESCRIPTION %}{% IFNOT GOODS_IMAGE_EMPTY %}
<div class="goodsDataMainImageZoom">
<a href="{GOODS_IMAGE_LARGE}" target="_blank">Увеличить изображение</a>
</div>
{% ENDIF %}{% ENDIF %}
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
{% IFNOT GOODS_MOD_DESCRIPTION %}{% 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 left">
<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 %}{% ENDIF %}
</td>
#13
Отправлено 28 Декабрь 2013 - 04:15
$('.goodsDataMainImage a, .goodsDataMainImageZoom a').click
и заменить её на
$('.goodsDataMainImage:not(.goodsDataMainModificationsDescriptionBlock) a, .goodsDataMainImageZoom a').click
После повторно проделать изменения. Если замена строки не поможет, то пожалуйста, не удаляйте изменения чтобы мы смогли посмотреть и определить проблему на примере.
#14
Отправлено 29 Декабрь 2013 - 09:43
#15
Отправлено 30 Декабрь 2013 - 23:52
<a href="ссылка на большое изображение" onclick="$(this).nyroModalManual(); return(false);" rel="gallery"> <img src="ссылка на Маленькое изображение" /> </a>
В данном варианте может быть ошибка при попытке переключения изображений в случае если изображение в галереи всего одно. Второй вариант кода
<a href="ссылка на большое изображение" onclick="$(this).nyroModalManual({gallery: null}); return(false);"> <img src="ссылка на Маленькое изображение" /> </a>
В данном случае ошибки не будет если изображение в галереи всего одно. В общем вам следует использовать один из вариантов в зависимости от числа изображений в галереи. Если изображение всего одно, то используйте второй вариант кода. Если изображений несколько - используйте первый вариант кода.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных