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

Dolphin4ik_1

  • Захожу иногда
  • 433
  • 3 / 2
Аналогия, как раз такая же - код немного другой. И есть нюансы.
Чтобы быстро:...............................................
В папку http://ваш_сайт/components/com_jshopping/js/ положите все демо-файлы из архива кроме index.htm
Подключение внизу product_default.php:
Код
<link rel="stylesheet" href="/components/com_jshopping/js/cloudzoom.css" type="text/css" media="all" /> 
<script src="/components/com_jshopping/js/cloudzoom.js" type = "text/javascript" ></script>
<script type="text/javascript">
     jQuery(document).ready(function() {
     CloudZoom.quickStart();
     });
</script>

Большое изображение:
Код
<?php foreach($this->images as $k=>$image){?>
     <?php if ($k == "0") : ?>       
        <div style="border:1px solid #ccc; display:inline-block;line-height:0;">
            <img class="cloudzoom" alt ="<?php print htmlspecialchars($image->_title)?>" id ="zoom1" src="<?php print $this->image_product_path?>/<?php print $image->image_name;?>"
                 title="<?php print htmlspecialchars($image->_title)?>"
                 data-cloudzoom='
                 zoomImage:"<?php print $this->image_product_path?>/<?php print $image->image_full;?>",
                 zoomMatchSize:true,
                 tintColor:"#000",
                 tintOpacity:0.25,
                 captionPosition:"bottom",
                 maxMagnification:4
                 '>           
        </div>       
        <div class="text_zoom">
            <style type="text/css">#jquery-lightbox {z-index:99999;}</style>
            <a class="lightbox" href="<?php print $this->image_product_path?>/<?php print $image->image_full;?>">
                <img src="<?php print $this->path_to_image?>search.png" alt="zoom" /> <?php print _JSHOP_ZOOM_IMAGE?>
            </a>
        </div>
    <?php endif; ?>
<?php }?>

Значки:
Код
<?php if (count($this->images)>1) {?>
<?php foreach($this->images as $k=>$image){?>
<div style="margin-top:10px">
<a href="<?php print $this->image_product_path?>/<?php print $image->image_full;?>" class="thumb-link">   
<img class="cloudzoom-gallery" width="64" src="<?php print $this->image_product_path?>/<?php print $image->image_thumb?>"
title="<?php print htmlspecialchars($image->_title)?>"
alt ="<?php print htmlspecialchars($this->product->name)?>"
data-cloudzoom='{
"useZoom":"#zoom1",
"image":"<?php print $this->image_product_path?>/<?php print $image->image_name;?>",
"zoomImage":"<?php print $this->image_product_path?>/<?php print $image->image_full;?>"}'>
</a>
</div>
<?php }?>
<?php }?>

Результат (J_2.5 + JS_3):


Супер. Спасибо за инструкцию, подключил все работает. такой вопрос можно как то сделать чтобы увелечение картинки было не по нажатию кнопки "увеличить изображение", по клику на лупу?  как здесь https://www.wildberries.ru/catalog/8726072/detail.aspx?targetUrl=NW . При клике всплывает картинка.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Полное фото (Full_) товара в списке пожеданий (wishlist)

Автор dvcool

Ответов: 4
Просмотров: 539
Последний ответ 12.02.2019, 15:23:11
от dvcool
[Решено] mod_jshopping_categories Как показать все подкатегории?

Автор Виталик

Ответов: 35
Просмотров: 20296
Последний ответ 25.01.2018, 06:08:23
от trushin2005
Эффект увеличения изображения zoom (плагин)

Автор Brooksus

Ответов: 135
Просмотров: 25737
Последний ответ 09.08.2017, 10:51:44
от pavel2950
Показать/скрыть характеристики в фильтре

Автор stparts

Ответов: 7
Просмотров: 1077
Последний ответ 23.11.2016, 19:53:00
от stparts
Плагин - Полное описание, взамен краткого описания категории JoomShopping [Скачать]

Автор kit2m2

Ответов: 17
Просмотров: 3211
Последний ответ 10.07.2016, 16:04:59
от kit2m2