

Увеличение Фото Товара, Шаблон Весна
#1
Отправлено 24 April 2014 - 14:16
#2
Отправлено 24 April 2014 - 15:32
Константин1111 (24 April 2014 - 14:16) писал:
http://forum.storela...-при-наведении/
http://forum.storela...ара-в-каталоге/
http://forum.storela...ажатии-на-него/
#3
Отправлено 25 April 2014 - 14:00
#4
Отправлено 25 April 2014 - 17:47
Константин1111 (25 April 2014 - 14:00) писал:
строку
<!-- Другие изображения товара. Отображаются если есть изображения товара --> {% IFNOT goods_images_empty %}
и передней вставить
<!-- Ссылка на увеличение среднего изображения товара до большого. Появляется если у товара указано изображение --> {% IFNOT GOODS_IMAGE_EMPTY %} <div class="goodsDataMainImageZoom"> <a href="{GOODS_IMAGE_LARGE}" target="_blank">Увеличить изображение</a> </div> {% ENDIF %}а main.css добавить код
.goodsDataMainImageZoom {text-align:center;padding:0.5em;} .goodsDataMainImageZoom a {padding:5px 0px 5px 25px;background:transparent url('{ASSETS_IMAGES_PATH}zoom-magnifying.png') no-repeat scroll center left;}
#5
Отправлено 25 April 2014 - 19:17
Константин1111 (25 April 2014 - 14:00) писал:
{% ENDIF %} <a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{goods_images.MEDIUM}' "><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a> {% IF goods_images.last %}
и замените его на
{% ENDIF %} <a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{goods_images.MEDIUM}' "><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a> {% IF goods_images.last %}
далее найдите код
<!-- Большое изображение --> <div class="image"> <div id="wrap" style="top:0px;z-index:9999;position:relative;"> {% IF GOODS_IMAGE_EMPTY %} <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail .goods-image-medium "/> {% ELSE %} <a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom" id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position: relative; display: block;"> <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" /> </a> {% ENDIF %} </div> </div>
и замените его на
<!-- Большое изображение --> <div class="image"> <div id="wrap" style="top:0px;z-index:9999;position:relative;"> {% IF GOODS_IMAGE_EMPTY %} <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail .goods-image-medium "/> {% ELSE %} <a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom" id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position: relative; display: block;"> <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" /> </a> {% ENDIF %} </div> <center class="goodsImageZoom" data="{GOODS_IMAGE_ID}"><a href="#">Увеличить изображение</a></center> </div> {% IFNOT goods_images_empty %} <div class="goodsImageList" style="display: none;"> {% FOR goods_images %} <a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" rel="gallery"><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a> {% ENDFOR %} </div> {% ENDIF %}
далее в файл main.js добавьте код
$(function() { $('a[rel="gallery"]').fancybox(); // Увеличение изображение при клике на него и открытие галереи изображений $('.goodsImageZoom a, .image-additional a').click(function(){ if($(this).closest('.image-additional').length) { $('.goodsImageZoom').attr('data', $(this).attr('data')); return(true); } $('.goodsImageList a[data="' + $('.goodsImageZoom').attr("data") + '"]').trigger('click'); return(false); }); });
#6
Отправлено 26 April 2014 - 14:29
#7
Отправлено 07 July 2014 - 07:24
Вышеописанный способ мне не подходит т.к. появляются не нужные слова под изображением "Увеличить изображение"
"Уменьшить изображение". Хотелось бы просто при клике на изображение изображение увеличивалось как при нажатии "увеличить изображение"
Более подробно на картинке в низу.
#8
Отправлено 07 July 2014 - 10:08
Cybernetic (07 July 2014 - 07:24) писал:
Вышеописанный способ мне не подходит т.к. появляются не нужные слова под изображением "Увеличить изображение"
"Уменьшить изображение". Хотелось бы просто при клике на изображение изображение увеличивалось как при нажатии "увеличить изображение"
Более подробно на картинке в низу.
Здравствуйте внесли изменения на сайт, проверте
#9
Отправлено 08 July 2014 - 01:48
#10
Отправлено 09 July 2014 - 22:48
На аккаунте SL-300827 внес изменения по 2-му варианту. появилась надпись: увеличить изображение. Всё работает. Изображение открывается.
Вношу те же изменения в аккаунте SL-300332 - при клике на "увеличить изображение" просто перезагружается страница. При просмотре кода элемента, видно:
<a href="#">Увеличить изображение</a>Подскажите пожалуйста, как это можно исправить?
И второй вопрос:
Как корректно отключить увеличение в окне товара (при наведении курсора)?
Сообщение отредактировал waldmoos: 09 July 2014 - 23:56
#11
Отправлено 10 July 2014 - 03:39
Цитата
Найдите в вашем шаблоне "Товар" код
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom" id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position: relative; display: block;"> <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" /> </a>
и замените его на
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" style="position: relative; display: block;"> <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class="goods-image-medium" /> </a>
#12
Отправлено 10 July 2014 - 07:52
Про кеш -то я и забыл... всё заработало.
Увеличение при наведении исчезло, но вместо этого картинка стала кликабельной и открывается в том же окне, уводя посетителя со страницы товара.
Кликабельность картинки можно убрать? То, как картинка отображается на щелчке по "увеличить изображение" - вполне достаточно.
#13
Отправлено 10 July 2014 - 23:06
Сake (10 July 2014 - 03:39) писал:
Найдите в вашем шаблоне "Товар" код
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom" id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position: relative; display: block;"> <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" /> </a>
и замените его на
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" style="position: relative; display: block;"> <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class="goods-image-medium" /> </a>
#14
Отправлено 11 July 2014 - 01:31
$(function() { $('.image a[itemprop="image"]').click(function() { $('.goodsImageZoom a').trigger('click'); return(false); }); });
в файл main.js
#15
Отправлено 11 July 2014 - 08:54
Сake (11 July 2014 - 01:31) писал:
$(function() { $('.image a[itemprop="image"]').click(function() { $('.goodsImageZoom a').trigger('click'); return(false); }); });
в файл main.js
Я наверное не правильно сформулировал вопрос...
Как сделать, чтобы по щелчку на картинке она открывалась в fancybox-image?
Сообщение отредактировал waldmoos: 11 July 2014 - 23:57
#16
Отправлено 12 July 2014 - 00:09
Цитата
Вы пробовали использовать приведенный ранее мною код? Он именно это и реализует.
#18
Отправлено 12 July 2014 - 21:35
support 2.0 (25 April 2014 - 19:17) писал:
{% ENDIF %} <a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{goods_images.MEDIUM}' "><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a> {% IF goods_images.last %}
и замените его на
{% ENDIF %} <a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{goods_images.MEDIUM}' "><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a> {% IF goods_images.last %}
далее найдите код
<!-- Большое изображение --> <div class="image"> <div id="wrap" style="top:0px;z-index:9999;position:relative;"> {% IF GOODS_IMAGE_EMPTY %} <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail .goods-image-medium "/> {% ELSE %} <a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom" id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position: relative; display: block;"> <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" /> </a> {% ENDIF %} </div> </div>[/font][/color] [color=#282828][font=helvetica, arial, sans-serif]
и замените его на
<!-- Большое изображение --> <div class="image"> <div id="wrap" style="top:0px;z-index:9999;position:relative;"> {% IF GOODS_IMAGE_EMPTY %} <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail .goods-image-medium "/> {% ELSE %} <a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom" id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position: relative; display: block;"> <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" /> </a> {% ENDIF %} </div> <center class="goodsImageZoom" data="{GOODS_IMAGE_ID}"><a href="#">Увеличить изображение</a></center> </div> {% IFNOT goods_images_empty %} <div class="goodsImageList" style="display: none;"> {% FOR goods_images %} <a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" rel="gallery"><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a> {% ENDFOR %} </div> {% ENDIF %}
далее в файл main.js добавьте код
$(function() { $('a[rel="gallery"]').fancybox(); // Увеличение изображение при клике на него и открытие галереи изображений $('.goodsImageZoom a, .image-additional a').click(function(){ if($(this).closest('.image-additional').length) { $('.goodsImageZoom').attr('data', $(this).attr('data')); return(true); } $('.goodsImageList a[data="' + $('.goodsImageZoom').attr("data") + '"]').trigger('click'); return(false); }); });
теперь у меня одновременно и зум в этом же окне, и ссылка на увеличение изображения. Как убрать зум вообще, и оставить только увеличение по щелчку на картинке (слова "увеличить изображение" тоже убрать). И второй вопрос - там где несколько картинок, можно ли сделать на увеличенном изображении фразу с общим количеством фото и какое показано (например "Изображение 1 из 5") где-нибудь снизу под фото.
#19
Отправлено 15 July 2014 - 05:03
возможно вам так же пригодится тема форума http://forum.storela...ци/#entry124020
#20
Отправлено 15 July 2014 - 14:00
Темы с аналогичным тегами увеличениефото, товара, весна
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных