Увеличение картинки по клику, на лупу в карточке товара

Добрый день использую вот эту настройку в карточке.

Цитата: denben777 от 17.05.2013, 03:00:37

sergkh специально для вас:
скачиваем, указанный выше, плагин zoomsl-3.0.min.js с сайта автора и переносим его в папку: http://ваш_сайт/components/com_jshopping/js/

Открываем файл: http://ваш_сайт/components/com_jshopping/templates/ваш_шаблон/product/product_default.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)?>" />
    <div class="text_zoom">
        <img src="<?php print $this->path_to_image?>search.png" alt="zoom" /> <?php print _JSHOP_ZOOM_IMAGE?>
    </div>
</a>
<?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 class="denben777" src="<?php print $this->image_product_path?>/<?php print $image->image_name;?>"  data-large="<?php print $this->image_product_path?>/<?php print $image->image_full;?>" 
    data-title="<?php print htmlspecialchars($this->product->name)?>" data-help="Используйте колесико мыши для Zoom +/-" title="<?php print htmlspecialchars($this->product->name)?>">
    <div class="text_zoom">
    	<img src="<?php print $this->path_to_image?>search.png" alt="zoom" /><?php print _JSHOP_ZOOM_IMAGE?>
    </div>
</a>
<?php }?>

В коде для значков ничего не трогаем!

Теперь подключаем сам плагин.
Для этого внизу product_default.php с новой строки вставляем:

Код

<script src="/components/com_jshopping/js/zoomsl-3.0.min.js" type = "text/javascript" ></script>
<script type="text/javascript">
	jQuery(document).ready(function ($) {	
	   $(".denben777").imagezoomsl({	  
		   zoomrange: [1, 10],
		   cursorshadeborder: "10px solid #000",
		   magnifiereffectanimate: "fadeIn",
		   magnifierpos: "right"		
	   });
	});
</script>

Проверено на JS 3.14.0. C lightbox не конфликтует.

Результат внедрения (страница товара):

Подскажите что прописать чтобы при клике на эту лупу, выводилось полное изображение?

WT On fly image handler изображения товара JoomShopping в webp на лету Автор sergeytolkachyov	Ответов: 14 Просмотров: 9878	30.03.2026, 08:43:36 от sergeytolkachyov
WT JoomShopping Favorite - кнопки избранного в категории товаров и карточке тов Автор sergeytolkachyov	Ответов: 26 Просмотров: 41297	14.10.2025, 12:54:56 от sergeytolkachyov
Видео с Youtube вместо картинки на карточке товара Автор ksena	Ответов: 35 Просмотров: 14527	08.10.2024, 04:26:36 от kit2m2
Условие для кол-ва товара больше нуля Автор kik84	Ответов: 3 Просмотров: 3179	16.02.2024, 13:33:24 от kit2m2
Убрать модуль в карточке товара JoomShopping Автор alexkraym	Ответов: 35 Просмотров: 8896	21.08.2023, 07:17:53 от delchev

Увеличение картинки по клику, на лупу в карточке товара - JoomShopping

Новости Joomla

Вышла новая версия joomLab Article Slider 1.1.0

Компонент Joomla 6: Генератор LLMs.txt.

👩‍💻 WT LLMs для Joomla: llms.txt, llms.json для AI-агентов.

Dolphin4ik_1

Увеличение картинки по клику, на лупу в карточке товара

Похожие темы