Нас так же ищут по следующим запросам: jQuery плагин увеличения изображения, картинки, фото, скачать плагин бесплатно, jquery image zoom plugin, скрипт увеличения картинки, увеличительная лупа Cloud Zoom, jquery Лупа, javascript изображение, script free, сайт plugin, jquery zoomer, jquery photo zoom, image jquery plugin, jquery img zoom, jquery image zoom, jquery image zoom plugin free, jquery image resize plugin, image zoom script, image zoom javascript, javascript, free, download wordpress, joomla, drupal, zoomer, зуммер, фото зумер, зум, jQuery

Интеграция плагина SergeLand Image Zoomer v3.0 в различные CMS.
Присылайте свои решения, мы обязательно разместим их в этом разделе!!!


JOOMLA

www.brooksite.ru jQuery zoom плагин для joomshopping
http://brooksite.ru/help/joomla/95-jquery-zoom-plagin-dlya-joomshopping.html

Команда разработчиков Brooksite.ru интегрировала SergeLand Image Zoomer v3.0 в свой модуль joomshopping jqzoom для Joomla 2.5, Joomla 3. Спасибо ребятам за проделанную работу.


JOOMLA

www.joomlaforum.ru Примеры, обсуждение, проблемы
http://joomlaforum.ru/index.php/topic,262485.0.html

Интеграция в шаблон JoomShopping_template_default_div_3.14.0.3

  • 1. Скачиваем файл zoomsl-3.0.min.js и переносим его в папку: http://ваш_сайт/components/com_jshopping/js/

  • 2. Открываем файл: http://ваш_сайт/components/com_jshopping/templates/ваш_шаблон/product/product_default.php

  • 3. Меняем код для главного изображения:


было:

<!-- HTML -->

<?foreach($this->images as $k=>$image):?>

  <a class="lightbox" id="main_image_full_<?=$image->image_id?>" 
      href="<?=$this->image_product_path?>/<?=$image->image_full;?>" <?if($k!=0):?>style="display:none"<?endif?> >
		
  <img id="main_image_<?=$image->image_id?>" 
       src="<?=$this->image_product_path?>/<?=$image->image_name;?>" 
       alt="<?=htmlspecialchars($image->_title)?>" title="<?=htmlspecialchars($image->_title)?>" />
  
  <div class="text_zoom">
    <img src="<?=$this->path_to_image?>search.png" alt="zoom" /> <?=_JSHOP_ZOOM_IMAGE?>
  </div>

  </a>

<?endforeach?>

стало:

<!-- HTML -->

<?foreach($this->images as $k=>$image):?>

  <a class="lightbox" id="main_image_full_<?=$image->image_id?>" 
	href="<?=$this->image_product_path?>/<?=$image->image_full;?>" <?if($k!=0):?>style="display:none"<?endif?>>
		
  <img class="container" src="<?=$this->image_product_path?>/<?=$image->image_name;?>"  
       data-large="<?=$this->image_product_path?>/<?=$image->image_full;?>" 
       data-title="<?=htmlspecialchars($this->product->name)?>" 
       data-help="Используйте колесико мыши для Zoom +/-" 
       title="<?=htmlspecialchars($this->product->name)?>" >
		
  <div class="text_zoom">
    <img src="<?=$this->path_to_image?>search.png" alt="zoom" /><?=_JSHOP_ZOOM_IMAGE?>
  </div>

  </a>

<?endforeach?>
  • 4. В коде для значков меняем


было:

<!-- HTML -->

<?if( (count($this->images)>1) || (count($this->videos) && count($this->images)) ):?>
    <?foreach($this->images as $k=>$image):?>
        <img class="jshop_img_thumb" src="<?=$this->image_product_path?>/<?=$image->image_thumb?>" 
           alt="<?=htmlspecialchars($this->product->name)?>" 
           onclick="showImage(<?=$image->image_id?>)" />
    <?endforeach?>
<br />
<?endif?>

стало:

<!-- HTML -->

<?if( (count($this->images)>1) || (count($this->videos) && count($this->images)) ):?>
    <?foreach($this->images as $k=>$image):?>
        <img class="jshop_img_thumb" src="<?=$this->image_product_path?>/<?=$image->image_thumb?>" 
          alt="<?=htmlspecialchars($this->product->name)?>" 
          data-large="<?=$this->image_product_path?>/<?=$image->image_full;?>" />
    <?endforeach?>
<br />
<?endif?>
  • 5. Подключаем SergeLand Image Zoomer v3.0, для этого внизу файла http://ваш_сайт/components/com_jshopping/templates/ваш_шаблон/product/product_default.php
    с новой строки вставляем:

<!-- JAVASCRIPT -->

<script src="/components/com_jshopping/js/zoomsl-3.0.min.js"></script>
<script>
jQuery(function($){

     //вешаем плагин на контейнер-картинку	
     $(".container").imagezoomsl({	  
	   zoomrange: [1, 10],
	   cursorshadeborder: "10px solid #000",
	   magnifiereffectanimate: "fadeIn",
	   magnifierpos: "right"		
     });

	
      //клик по превью-картинке
        $(".jshop_img_thumb").click(function(){

           var that = this;

         //копируем атрибуты из превью-картинки в контейнер-картинку
           $(".container").fadeOut(600, function(){

             $(this).attr("src",              $(that).attr("src"))              // путь до small картинки
                    .attr("data-large",       $(that).attr("data-large"))       // путь до big картинки					                    
                    .fadeIn(1000);				
           });
       });
});	
</script>

Проверено на JS 3.14.0. C lightbox не конфликтует.
Результат внедрения: http://old.joomcommerce.net/images/forum/zoom_02_01.png



WEBASYST

dlrg @ mail.ru Алексей, разработчик web
dlrg @ mail.ru

Интеграция в WebAsyst

  • 1. Если библиотека jQuery на сайте не подключена, то в админке в редакторе дизайна находим вкладку head (она находится справа) и после первой строчки вставляем:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

  • 2. Скачиваем файл zoomsl-3.0.min.js и переносим его в папку: http://ваш_сайт/published/SC/html/scripts/js/

  • 3. Открываем файл http://ваш_сайт/published/SC/html/scripts/templates/frontend/product_images.html и подключаемzoomsl-3.0.min.js, для этого в начале файла вставляем:

    <script type="text/javascript" src="{$smarty.const.URL_JS}/zoomsl-3.0.min.js"></script>

  • 4. Ищем строку в открытом файле:

    <img id='img-current_picture' border='0' 
    			src="{$smarty.const.URL_PRODUCTS_PICTURES}/{$product_info.picture|escape:'url'}" 
    			title="{$page_title|escape:'html'}" 
    			alt="{$page_title|escape:'html'}" />
    и заменяем на строку:
    <img class="my_foto" id='img-current_picture' border='0' 
    		 src="{$smarty.const.URL_PRODUCTS_PICTURES}/{$product_info.picture|escape:'url'}" 
    		 title="{$page_title|escape:'html'}" 
    		 alt="{$page_title|escape:'html'}" 
    		 data-large="{$smarty.const.URL_PRODUCTS_PICTURES}/{$product_info.big_picture|escape:'url'}"/>

  • 5. Перед строкой:

    {if $PAGE_VIEW eq 'mobile' &&  $m_all_product_pictures}
    вставляем:
    <script type="text/javascript">
       $(function(){ldelim}
    	  $(".my_foto").imagezoomsl({ldelim}
    	  
                // параметр1: значение1,
                // параметр2: значение2,
    		 
                // ...
    		 
                // параметрN: значениеM	  
    	  
    	  {rdelim});
       {rdelim});   
    </script>

  • 6. Если нужно, чтобы по клику на картинку открывалась большая картика, как было до подключения плагина, добавим:

    <script type="text/javascript">
       $(function(){ldelim}
         $(document).click(function(e){ldelim}
             var elem = $(e.target);
             if (elem.attr("class") == "tracker"){ldelim}
                 $('.magnifier').hide();
                 $($('#img-current_picture')).click();
            {rdelim}  
         {rdelim});  
       {rdelim});   
    </script>

  • 7. Если в описании товара присутствует картинок больше, чем одна, то нужно в блоке, который начинается с

    {foreach from=$all_product_pictures item=_picture name=frpict}
    найти строку:
    <img border='0' title="{$product_info.name|escape:'html'}"
                    src="{$smarty.const.URL_PRODUCTS_PICTURES}/{$_picture.thumbnail|escape:'url'}" 
                    alt="{$product_info.name|escape:'html'}" />
    
    и заменить на:
    <img class="myNail" border='0' title="{$product_info.name|escape:'html'}"
                        data-large="{$smarty.const.URL_PRODUCTS_PICTURES}/{$_picture.enlarged|escape:'url'}" 
                        data-sm="{$smarty.const.URL_PRODUCTS_PICTURES}/{$_picture.filename|escape:'url'}" 
                        src="{$smarty.const.URL_PRODUCTS_PICTURES}/{$_picture.thumbnail|escape:'url'}" 
                        alt="{$product_info.name|escape:'html'}" />
    
    Удаляем:
    <a onclick="return hs.expand(this)" 
       href="{$smarty.const.URL_PRODUCTS_PICTURES}/{if $_picture.enlarged}{$_picture.enlarged|escape:'url'}
       {else}{$_picture.filename|escape:'url'}{/if}" 
       img_width="{$_picture.width}" 
       img_height="{$_picture.height}" 
       img_enlarged="{if $_picture.enlarged}{$smarty.const.URL_PRODUCTS_PICTURES}/{$_picture.enlarged|escape:'url'}{/if}" 
       img_picture="{$smarty.const.URL_PRODUCTS_PICTURES}/{$_picture.filename|escape:'url'}" 
       target="_blank">
    
    Удаляем:
    {if $_picture.photoID != $product_info.photoID}
    и добавляем:
    <script type="text/javascript">
       $(function(){ldelim}
    		$(".myNail").click(function(){ldelim}
    			var that = this;
    			$(".my_foto").fadeOut(600, function(){ldelim}
    				$(this).attr("src", $(that).attr("data-sm"))
    				.attr("data-large", $(that).attr("data-large"))
    				.fadeIn(1000);
    				{rdelim});
    				$('#img-current_picture').parent().attr('href',$(that).attr("data-large"));
    		{rdelim});   
    	{rdelim});   
    </script> 

Теперь, при наведении на основную картинку, будет показываться лупа, при клике открываться большая картинка, при клике на дополнительную картинку, она покажется в основной и будет так же показываться лупа при наведении и открываться большая картинка при клике.

WORDPRESS

www.css-javascript-toolbox.com CSS JS Toolbox
http://wordpress.org/extend/plugins/css-javascript-toolbox/

Команда разработчиков CJT интегрировала SergeLand Image Zoomer v3.0 в свой модуль CSS JS Toolbox.