Эффект Лупы
#1
Отправлено 27 Июнь 2013 - 15:10
#2
Отправлено 27 Июнь 2013 - 15:14
#3
Отправлено 27 Июнь 2013 - 15:29
Agaron (27 Июнь 2013 - 15:10) писал:
Вам поможет эта тема форума
#4
Отправлено 27 Июнь 2013 - 17:30
Открываем файл "Товар".
Найти код:
<a href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}"><img class="cornerAll withBorder goods-image-medium" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" /></a>
Вот этого куска нет. можете расписать этот момент?если несложно конечно!
#5
Отправлено 27 Июнь 2013 - 18:13
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}" class="thumbnail"> <div class="goods-image-medium product-image" style="background: url({GOODS_IMAGE_MEDIUM}) no-repeat center center; background-size: contain;"></div> </a>На код:
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}" class="thumbnail" class="cloud-zoom" id='zoom1' rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250px"> <div class="goods-image-medium product-image" style="background: url({GOODS_IMAGE_MEDIUM}) no-repeat center center; background-size: contain;"></div> </a>
#6
Отправлено 27 Июнь 2013 - 19:22
#7
Отправлено 28 Июнь 2013 - 03:13
#8
Отправлено 28 Июнь 2013 - 19:25
единственное что сделал это установил эти два скрипта и прописал html код. и все) а вот что дальше не знаю делать(
#9
Отправлено 29 Июнь 2013 - 02:36
Пожалуйста, вставьте данные изменений.
#10
Отправлено 01 Июль 2013 - 08:22
#11
Отправлено 01 Июль 2013 - 08:40
Agaron (01 Июль 2013 - 08:22) писал:
Вы добавляли к товару основное изображение? Например у товара "Женская брендовая сумка OPPO" изображения не нашла.
#12
Отправлено 03 Август 2013 - 19:33
<a href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}"><img class="cornerAll withBorder goods-image-medium" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" /></a>
Что делать, то что написано в теме выполнить не могу т.к. не могу найти эти блоки
#13
Отправлено 04 Август 2013 - 08:36
nadezda (03 Август 2013 - 19:33) писал:
<a href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}"><img class="cornerAll withBorder goods-image-medium" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" /></a>
Что делать, то что написано в теме выполнить не могу т.к. не могу найти эти блоки
Код нужно искать в шаблоне Товар -
<table class="goodsDataMain"> <tr> <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 %}Замените строку -
<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>на -
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}" class="cloud-zoom" id='zoom1' rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250px"> <img class="cornerAll withBorder goods-image-medium" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" /> </a>
#14
Отправлено 07 Апрель 2014 - 13:13
#16
Отправлено 08 Апрель 2014 - 07:49
#17
Отправлено 09 Апрель 2014 - 02:37
#18
Отправлено 09 Апрель 2014 - 05:53
Не нужно. Нечего у меня рассматривать, баловство одно.
#19
Отправлено 17 Июнь 2016 - 00:45
Помогите продолжить. Шаблон Вечность.
#20
Отправлено 17 Июнь 2016 - 17:35
yvn (17 Июнь 2016 - 00:45) писал:
Помогите продолжить. Шаблон Вечность.
Найдите в шаблоне HTML
<!-- Подключение Js плагина --> <script type="text/javascript" src="{ASSETS_JS_PATH}cloud-zoom.1.0.2.js"></script> <!-- Подключение css файла плагина --> <link rel="stylesheet" href="{ASSETS_STYLES_PATH}cloud-zoom.css" type="text/css" />и удалите
найдите в шаблоне Товар код
<figure class="main-image" style="width:100%;float:none;margin-bottom: 20px;z-index:50"> <div> <table><tr> <td> {% IFNOT goods_images_empty %} {% FOR goods_images %} {% IF goods_images.first %} <ul class="preview_images" data-role="preview-images"> {% ENDIF %} <li> <a rel="group" href="{goods_images.LARGE}" class="mini"><img src="{goods_images.LARGE}" alt="{goods_images.NAME}" class="mini"/></a> </li> {% IF goods_images.last %} </ul> {% ENDIF %} {% ENDFOR %} {% ENDIF %} </td> <td cosplan="2"> {% IF GOODS_IMAGE_EMPTY %} <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" /> {% ELSE %} <a itemprop="image" rel="group" href="{GOODS_IMAGE_LARGE}" class="main"><img src="{GOODS_IMAGE_LARGE}" alt="{GOODS_NAME}" class="main"/></a> {% ENDIF %} </td><td></td> </tr></table> </div></figure>замените на
<figure class="main-image" style="width:100%;float:none;margin-bottom: 20px;z-index:50"> <div> <table><tr> <td> {% IFNOT goods_images_empty %} {% FOR goods_images %} {% IF goods_images.first %} <ul class="preview_images" data-role="preview-images"> {% ENDIF %} <li> <a href="{goods_images.LARGE}" data="{goods_images.MEDIUM}" class="cloud-zoom-gallery mini" rel="useZoom: 'zoom1', smallImage: '{goods_images.MEDIUM}' "><img src="{goods_images.MEDIUM}" alt="{goods_images.NAME}" class="mini"/></a> </li> {% IF goods_images.last %} </ul> {% ENDIF %} {% ENDFOR %} {% ENDIF %} </td> <td cosplan="2"> {% IF GOODS_IMAGE_EMPTY %} <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" /> {% ELSE %} <a itemprop="image" href="{GOODS_IMAGE_LARGE}" class="cloud-zoom main" id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position: relative; display: block;" > <img src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" class="goods-image-medium main"/></a> {% ENDIF %} </td><td></td> </tr></table> </div></figure>
далее найдите в файле main.js
//Увеличение изображения товара $(document).ready(function() { $("a[rel=group]").fancybox({ 'transitionIn' : 'none', 'transitionOut' : 'none', 'titlePosition' : 'over', 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>'; } }); });замените на
//Увеличение изображения товара $(document).ready(function() { $("a[rel=group]").fancybox({ 'transitionIn' : 'none', 'transitionOut' : 'none', 'titlePosition' : 'over', 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>'; } }); $('a[rel="gallery"]').fancybox(); $('.cloud-zoom.main').fancybox({ 'transitionIn' : 'none', 'transitionOut' : 'none', 'titlePosition' : 'over', 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>'; } }); });
далее найдите
// На странице товара при наведении на маленькое изображение - изменяем большое изображение $("ul.preview_images li a").hover(function() { var $src = $(this).attr('href'); $("figure img.main").attr('src', $src.replace('mini', 'main')); }); $("ul.preview_images li a").hover(function() { var $src = $(this).attr('src'); var $href = $(this).attr('href'); $("figure a.main").attr('href', $href.replace('mini', 'main')); });замените на
// На странице товара при наведении на маленькое изображение - изменяем большое изображение $("ul.preview_images li a").click(function() { var $src = $(this).attr('data'); $("figure img.main").attr('src', $src.replace('mini', 'main')); }); $("ul.preview_images li a").click(function() { var $src = $(this).attr('src'); var $href = $(this).attr('data'); $("figure a.main").attr('href', $href.replace('mini', 'main')); });
Количество пользователей, читающих эту тему: 1
0 пользователей, 1 гостей, 0 анонимных