0 Пользователей и 1 Гость просматривают эту тему.
  • 18 Ответов
  • 8196 Просмотров
*

kopo6o4er

  • Захожу иногда
  • 105
  • 0 / 0
Всем здрасте! Озадачился темой как реализовать такую вещь: чтобы при наведении на фото в отдельном окошке увеличивалось именно та часть куда навести мышкой. Пример как реализовано на этом сайте http://www.wildberries.ru/catalog/20/women.aspx . На сколько я знаю есть разные плагины, модули, компоненты zoom, которые это умеют делать. Если кто-то сталкивался с этим, да еще и все это работает с joomshoppingom отзовитесь )
*

victorantoniak

  • Moderator
  • 1534
  • 182 / 2
  • JoomShopping Team
*

kopo6o4er

  • Захожу иногда
  • 105
  • 0 / 0
Re: Интеграция zoom плагина в joopshopping
« Ответ #2 : 15.04.2011, 23:35:54 »
Шаблон Zoom

http://www.webdesigner-profi.de/joomla-webdesign/shop/extension/template-product-zoom.html
Я так понимаю это шаблон магазина, да? Если я его преобретаю, то могу ли я его установить например на 2 сайта?
*

victorantoniak

  • Moderator
  • 1534
  • 182 / 2
  • JoomShopping Team
Re: Интеграция zoom плагина в joopshopping
« Ответ #3 : 16.04.2011, 00:10:44 »
На свои сайты можно.
Другим передавать нельзя.
*

kopo6o4er

  • Захожу иногда
  • 105
  • 0 / 0
Re: Интеграция zoom плагина в joopshopping
« Ответ #4 : 16.04.2011, 00:17:44 »
victorantoniak А есть пример готового сайта с этим шаблоном?
*

kopo6o4er

  • Захожу иногда
  • 105
  • 0 / 0
Re: Интеграция zoom плагина в joopshopping
« Ответ #5 : 16.04.2011, 00:30:10 »
victorantoniak кстати, покупку можно произвести только через сайт, или можно на определенный кошелек Вам кинуть. Просто в немецком я полный профан.
*

victorantoniak

  • Moderator
  • 1534
  • 182 / 2
  • JoomShopping Team
Re: Интеграция zoom плагина в joopshopping
« Ответ #6 : 16.04.2011, 10:06:05 »
victorantoniak А есть пример готового сайта с этим шаблоном?

Нет
*

victorantoniak

  • Moderator
  • 1534
  • 182 / 2
  • JoomShopping Team
Re: Интеграция zoom плагина в joopshopping
« Ответ #7 : 16.04.2011, 10:08:19 »
victorantoniak кстати, покупку можно произвести только через сайт, или можно на определенный кошелек Вам кинуть. Просто в немецком я полный профан.
Через сайт.
*

sibay70

  • Осваиваюсь на форуме
  • 21
  • 6 / 0
Re: Интеграция zoom плагина в joopshopping
« Ответ #8 : 13.12.2011, 10:35:05 »
Есть адаптированный плагин с эффектом Zoom для JoomShopping, стоит15$. Кому интересно, вот ссылка на сайт производителя http://www.artetics.com/ARTools/art-zoomin
*

aorr

  • Осваиваюсь на форуме
  • 15
  • 0 / 0
Re: Интеграция zoom плагина в joopshopping
« Ответ #9 : 13.12.2011, 15:08:53 »
На свои сайты можно.
Другим передавать нельзя.
Дополнения к джумшопингу привязываются к домену?
*

victorantoniak

  • Moderator
  • 1534
  • 182 / 2
  • JoomShopping Team
Re: Интеграция zoom плагина в joopshopping
« Ответ #10 : 13.12.2011, 19:29:37 »
Только некоторые.
*

mrl

  • Новичок
  • 5
  • 0 / 0
Re: Интеграция zoom плагина в joopshopping
« Ответ #11 : 21.03.2012, 01:10:26 »
Всем здрасте! Озадачился темой как реализовать такую вещь: чтобы при наведении на фото в отдельном окошке увеличивалось именно та часть куда навести мышкой. Пример как реализовано на этом сайте http://www.wildberries.ru/catalog/20/women.aspx . На сколько я знаю есть разные плагины, модули, компоненты zoom, которые это умеют делать. Если кто-то сталкивался с этим, да еще и все это работает с joomshoppingom отзовитесь )

Реализовать лупу (zoom) очень просто можно с помощью вот этого http://www.professorcloud.com/mainsite/cloud-zoom.htm
И кстати совершенно бесплатно


Придется приложить правда слегка руки.

http://парф.рф/tmp/c-z.zip

Из архива мне понадобились два файла
cloud-zoom.1.0.2.js
cloud-zoom.css

>>скрипт стал коммерческим и ссылки-обращения к сайту разработчика (www.professorcloud.com) устарели
Описание интеграции скрипта от автора собственно здесь
http://www.professorcloud.com/mainsite/cloud-zoom-integration.htm

22/11/2012 Неужели до сих пор нет аналогичного бесплатного модуля-плагина? Может хорошо поискать?

В папке шаблона сайта организуем папку cloud-zoom и туда складываем два вышеуказанных файла.

В файл index.php шаблона сайта дописываем перед </head> три строчки. Только свой адрес пропишите.
<link href="http://адрес сайта до шаблона включительно/cloud-zoom/cloud-zoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/JavaScript" src="http://адрес сайта до шаблона включительно/cloud-zoom/cloud-zoom.1.0.2.min.js"></script>

Теперь правим непосредственно файлы, которые выводят изображения с zoom. Это файлы шаблона JoomShopping.
Например такие:
components/com_jshopping/templates/default/list_products/product.php - лист товаров,
components/com_jshopping/templates/default/product/product_default.php - карточка товара.
Ну и любые другие по мере надобности.

В этих файлах ссылки на изображения меняем по образу и подобию следующего:
<a href='http://адрес до большого изображения/bigimage00.jpg' class = 'cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4">
<img src="http://адрес до маленького изображения/smallimage.jpg" alt='' title="Optional title display" />
</a>
Параметр rel можно изменить в целях дизайна.
И далее, если у вас zoom типа галерея, сюда http://www.professorcloud.com/mainsite/cloud-zoom-integration.htm в раздел Example HTML. Поправьте ссылки изображений галереи. Ну или создайте.

Если необходимо отрегулируйте дизайн лупы в файле cloud-zoom.css.

Параметры, которые задают общий стиль лупы (Gallery, Tints, Inner, Soft) и ее работу исправляйте в конце файла cloud-zoom.1.0.2.js. Возможные значения параметров с пояснениями здесь http://www.professorcloud.com/mainsite/cloud-zoom-integration.htm в разделе JavaScript Setup Parameters
    $.fn.CloudZoom.defaults = {
        zoomWidth: 'auto',
        zoomHeight: 'auto',
        position: 'right',
        tint: false,
        tintOpacity: 0.5,
        lensOpacity: 0.5,
        softFocus: false,
        smoothMove: 3,
        showTitle: true,
        titleOpacity: 0.5,
        adjustX: 0,
        adjustY: 0
    };
Тут же, в cloud-zoom.1.0.2.js, для красоты пришлось поправить строчку:
            $mouseTrap = jWin.parent().append(format("<div class='mousetrap' style='background-image:url(\".\");z-index:999;position:absolute;width:%0px;height:%1px;left:%2px;top:%3px;border:1px solid #cccccc\'></div>", sImg.outerWidth(), sImg.outerHeight(), -1, -5)).find(':last');

В файлах стилей шаблонов сайта и JoomShopping тоже пришлось изменить/дописать пару срок.

Вообщем, все как обычно при правке шаблона, - прилагаете максимум, пускаясь во все тяжкие, чтобы сайт выглядел прилично.

По пути обнаружился еще один замечательный zoom http://muse.pixelpointcreative.com/features/extras/zoom-in.html. Жаль только не для JoomShopping. Хотя... :=))
« Последнее редактирование: 22.11.2012, 22:36:40 от mrl »
*

Pasaran

  • Новичок
  • 3
  • 0 / 0
Re: Интеграция zoom плагина в joopshopping
« Ответ #12 : 25.08.2012, 01:39:07 »
Добрый день, mrl, спасибо за то, что делитесь.
пытаюсь реализовать зум, но опыта у меня немного, не могли бы вы помочь вот с этим:
<a href='http://адрес до большого изображения/bigimage00.jpg' class = 'cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4">
<img src="http://адрес до маленького изображения/smallimage.jpg" alt='' title="Optional title display" />
</a>


я имею файл product_default.php с отображением картинки:
<span id='list_product_image_middle'>
            <?php if(!count($this->images)){?>
                <img id = "main_image" src = "<?php print $this->image_product_path?>/<?php print $this->noimage?>" alt = "<?php print htmlspecialchars($this->product->name)?>" />
            <?php }?>
            <?php foreach($this->images as $k=>$image){?>
   <a class="lightbox" id="main_image_full_<?php print $image->image_id?>" href="<?php print $this->image_product_path?>/<?php print $image->image_full;?>" <?php if ($k!=0){?>style="display:none"<?php }?>>
               <img id = "main_image_<?php print $image->image_id?>" src = "<?php print $this->image_product_path?>/<?php print $image->image_name;?>" alt="<?php print htmlspecialchars($image->_title)?>" title="<?php print htmlspecialchars($image->_title)?>" />
            </a>
            <?php }?>
            </span>

не могу понять, как привести результат к указанному вами виду?
 !
*

mrl

  • Новичок
  • 5
  • 0 / 0
Re: Интеграция zoom плагина в joopshopping
« Ответ #13 : 26.08.2012, 03:19:18 »
Это было реализовано и работало для списка продуктов (components/com_jshopping/templates/default/list_products/product.php), для чего и делалось. То есть тогда, когда картинка одна. Если это product_default.php, где несколько картинок, то нужно опираться на "И далее, если у вас zoom типа галерея, сюда http://www.professorcloud.com/mainsite/cloud-zoom-integration.htm в раздел Example HTML. Поправьте ссылки изображений галереи. Ну или создайте." Должно получиться, я думаю.
*

itriy1

  • Осваиваюсь на форуме
  • 24
  • 1 / 0
Re: Интеграция zoom плагина в joopshopping
« Ответ #14 : 22.11.2012, 20:15:39 »
Добрый день.
Помогите на ДШ в описание товара прикрепить этот скрипт. 
(И далее, если у вас zoom типа галерея, сюда http://www.professorcloud.com/mainsite/cloud-zoom-integration.htm в раздел Example HTML) Ссылка не работает.
*

mrl

  • Новичок
  • 5
  • 0 / 0
Re: Интеграция zoom плагина в joopshopping
« Ответ #15 : 22.11.2012, 21:54:18 »
ДЛЯ ZOOM'А ТИПА ГАЛЕРЕЯ

------------------------
Cloud Zoom Intergration Instructions
-------------------------

Example HTML

Below is a simple example HTML page which creates a single Cloud Zoom instance and gallery facility. Please study the page as it contains useful comments and tips.

<html>
<head>

<!-- Load the Cloud Zoom CSS file -->
<link href="/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />

<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- Load the Cloud Zoom JavaScript file -->
<script type="text/JavaScript" src="/js/cloud-zoom.1.0.2.min.js"></script>

</head>
    <body>
        
        <!--   
        An anchor with class of 'cloud-zoom' should surround the small image.
        The anchor's href should point to the big zoom image.
        Any options can be specified in the rel attribute of the anchor.
        Options should be specified in regular JavaScript object format,
        but without the braces.
        -->
       
        <a href='/images/zoomengine/bigimage00.jpg' class = 'cloud-zoom' id='zoom1'
            rel="adjustX: 10, adjustY:-4">
            <img src="/images/zoomengine/smallimage.jpg" alt='' title="Optional title display" />
        </a>
        
        
        <!--   
        You can optionally create a gallery by creating anchors with a class of 'cloud-zoom-gallery'.
        The anchor's href should point to the big zoom image.
        In the rel attribute you must specify the id of the zoom to use (useZoom: 'zoom1'),
        and also the small image to use (smallImage: /images/....)
        -->
        
        <a href='/images/zoomengine/bigimage00.jpg' class='cloud-zoom-gallery' title='Thumbnail 1'
           rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage.jpg' ">
        <img src="/images/zoomengine/tinyimage.jpg" alt = "Thumbnail 1"/></a>
        
        <a href='/images/zoomengine/bigimage01.jpg' class='cloud-zoom-gallery' title='Thumbnail 2'
           rel="useZoom: 'zoom1', smallImage: ' /images/zoomengine/smallimage-1.jpg'">
        <img src="/images/zoomengine/tinyimage-1.jpg" alt = "Thumbnail 2"/></a>                  
        
        <a href='/images/zoomengine/bigimage02.jpg' class='cloud-zoom-gallery' title='Thumbnail 3'
           rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage-2.jpg' ">
        <img src="/images/zoomengine/tinyimage-2.jpg" alt = "Thumbnail 3"/></a>
    
    </body>
</html>

------------------------
JavaScript Setup Parameters
---------------------------
Setup parameters should appear in the rel attribute of the anchor surrounding the small image.

Any parameters not specified will have default values applied.

Parameter   Description (from V1.0.0)   Default Value
zoomWidth   The width of the zoom window in pixels. If 'auto' is specified, the width will be the same as the small image.   'auto'
zoomHeight   The height of the zoom window in pixels. If 'auto' is specified, the height will be the same as the small image.   'auto'
position   Specifies the position of the zoom window relative to the small image. Allowable values are 'left', 'right', 'top', 'bottom', 'inside' or you can specifiy the id of an HTML element to place the zoom window in e.g. position: 'element1'   'right'
adjustX   Allows you to fine tune the x-position of the zoom window in pixels.   0
adjustY   Allows you to fine tune the y-position of the zoom window in pixels.   0
tint   Specifies a tint colour which will cover the small image. Colours should be specified in hex format, e.g. '#aa00aa'. Does not work with softFocus.   false
tintOpacity   Opacity of the tint, where 0 is fully transparent, and 1 is fully opaque.   0.5
lensOpacity   Opacity of the lens mouse pointer, where 0 is fully transparent, and 1 is fully opaque. In tint and soft-focus modes, it will always be transparent.   0.5
softFocus   Applies a subtle blur effect to the small image. Set to true or false. Does not work with tint.   false
smoothMove   Amount of smoothness/drift of the zoom image as it moves. The higher the number, the smoother/more drifty the movement will be. 1 = no smoothing.   3
showTitle   Shows the title tag of the image. True or false.   true
titleOpacity   Specifies the opacity of the title if displayed, where 0 is fully transparent, and 1 is fully opaque.   0.5

--------------------
CSS Setup
------------------
Cloud Zoom uses a small amount of CSS as specified in the cloud-zoom.css file. The contents of this file are self-explanatory, and you can play about with the values for different effects.

Please note, in tint and soft-focus modes, the lens will always have a fully transparent centre, regardless of any background colours applied.
« Последнее редактирование: 22.11.2012, 22:39:47 от mrl »
*

itriy1

  • Осваиваюсь на форуме
  • 24
  • 1 / 0
Re: Интеграция zoom плагина в joopshopping
« Ответ #16 : 26.11.2012, 20:02:02 »
А будет работать при клике lightbox как на сайте производителя http://www.starplugins.com/cloudzoom
*

Kadet

  • Захожу иногда
  • 52
  • 0 / 0
Re: Интеграция zoom плагина в joopshopping
« Ответ #17 : 24.05.2013, 15:54:22 »
Возникла вот такая проблема.
Адаптировал на JS MagicZoom. Нормально работает, но... когда выбираешь атрибуты товара (размер, цвет и т.п.), MagicZoom слетает и снова начинает работать LightBox...
ДО обновления JS я вышел из положения просто отключив в скрипте изменения после активации атрибутов.
JS обновил и всё вернулось назад. Не хочется снова лезть в код.

Может кто подскажет как можно, после выбора атрибутов, снова заставить работать MagicZoom, а не переводить на LightBox?



_____________________________________________________________________________________________________________________________
Одежду обувь купить можно, совесть не купишь.
« Последнее редактирование: 21.06.2013, 09:07:46 от Kadet »
*

nevigen

  • Moderator
  • 10324
  • 855 / 25
  • http://n*****n.com
Re: Интеграция zoom плагина в joopshopping
« Ответ #18 : 24.05.2013, 16:20:49 »
только лезть в код.
:(
Профессиональные / Бесплатные решения для JoomShopping
Не лечи бесплатно, ибо тот, кто лечится бесплатно, рано или поздно перестает ценить свое здоровье,
а тот, кто лечит бесплатно, рано или поздно перестает ценить результаты своего труда/ (с) Гиппократ?
Не ищите ответов, ищите решение !
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Убрать zoom в карточке товара

Автор gertruda

Ответов: 0
Просмотров: 727
Последний ответ 03.04.2018, 11:41:12
от gertruda
Копия Template Product Zoom

Автор evpadallas

Ответов: 123
Просмотров: 49729
Последний ответ 18.03.2017, 22:22:38
от xUFOx
Как прикрутить Jquery Image Zoom к ЖШ?

Автор codjer

Ответов: 2
Просмотров: 1467
Последний ответ 05.10.2013, 13:41:36
от codjer
Внедрение плагина

Автор MAXI_K

Ответов: 2
Просмотров: 1121
Последний ответ 18.03.2012, 01:11:21
от MAXI_K