Форум русской поддержки Joomla!® CMS
09.12.2016, 19:30:17 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1] 2 3 4  Все   Вниз
  Добавить закладку  |  Печать  
Автор

Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

 (Прочитано 22545 раз)
0 Пользователей и 1 Гость смотрят эту тему.
denben777
Осваиваюсь на форуме
***

Репутация: +74/-1
Offline Offline

Пол: Мужской
Сообщений: 157


« : 04.05.2013, 20:29:24 »

Решил описать простое внедрение скрипта cloud-zoom версии 1.0.2 (MIT Licence) для эффекта увеличения "лупа".



Качаем и распаковываем архив cloud-zoom.1.0.2.zip

Файл cloud-zoom.1.0.2.min.js переносим в папку: http://ваш_сайт/components/com_jshopping/js/
Файл cloud-zoom.css переносим в папку: http://ваш_сайт/components/com_jshopping/css/

Открываем файл: 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){?>
        <?php if ($k == "0") : ?>
                <a href="<?php print $this->image_product_path?>/<?php print $image->image_full;?>" class = "cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY:-4, showTitle:false" <?php if ($image->image_full!=$this->product->product_full_image){?>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>
                <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) || (count($this->videos) && count($this->images)) ) {?>
<?php foreach($this->images as $k=>$image){?>
        <img class = "jshop_img_thumb" src = "<?php print $this->image_product_path?>/<?php print $image->image_thumb?>" alt = "<?php print htmlspecialchars($this->product->name)?>" onclick = "showImage(<?php print $image->image_id?>)" />
    <?php }?>
<br />
<?php }?>
вставляем:
Код:
<?php if (count($this->images)>1) {?>
<?php foreach($this->images as $k=>$image){?>
        <a href="<?php print $this->image_product_path?>/<?php print $image->image_full;?>" class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: '<?php print $this->image_product_path?>/<?php print $image->image_name;?>' ">
            <img src = "<?php print $this->image_product_path?>/<?php print $image->image_thumb?>" alt = "<?php print htmlspecialchars($this->product->name)?>" id="ngal1" />
        </a>
    <?php }?>
<?php }?>

Теперь подключаем сам cloud-zoom и его стили .
Для этого внизу product_default.php с новой строки вставляем:
Код:
<link rel="stylesheet" href="/components/com_jshopping/css/cloud-zoom.css" type="text/css" media="all" />
<script src="/components/com_jshopping/js/cloud-zoom.1.0.2.min.js" type = "text/javascript" ></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
});
</script>

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

Результат внедрения (страница товара):  http://old.joomcommerce.net/fruits/cherry
Еще пример (кликните по любой картинке товара в модуле): http://joomcommerce.net
И еще, с просмотром внутри (откройте любой товар): http://metro.joomcommerce.net

***Описание интеграции Zoomer смотрите ниже.
« Последнее редактирование: 07.06.2013, 22:11:19 от denben777 » Записан
 
dron
Живу я здесь
******

Репутация: +11/-9
Offline Offline

Сообщений: 1080


« Ответ #1 : 04.05.2013, 21:02:10 »

метод рабочий! спасибо автору.
Записан
sergkh
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 25


« Ответ #2 : 15.05.2013, 19:26:51 »

Попробовал. Получилось реализовать на дефолтном шаблоне.
Нашел здесь http://zoomsl.tw1.ru/example/ шикарный бесплатный плагин. Как реализовать на шаблоне JoomShopping_template_default_div_3.14.0.3 (сайт разработчиков) не знаю т.к. не знаком с PHP.
denben777 может попробуете реализовать Пример 2 с параметром  magnifierpos: "right" и поделитесь кодом.
Заранее благодарен.
Записан
devirus
Осваиваюсь на форуме
***

Репутация: +6/-0
Offline Offline

Пол: Мужской
Сообщений: 144



« Ответ #3 : 15.05.2013, 22:43:02 »

Как раз этот эффект подключаю…
Пробовал последнюю версию cloudzoom — есть возможность lazyload, выбирать в каком блоке отображать изображение и куча настроек…
но проблема в том, что если превью и крупное изображение разных пропорций, то крупное искажается.
В этой версии так же?

Установил, настроил, в старой версии всё ок. Спасибо.
« Последнее редактирование: 16.05.2013, 03:05:42 от devirus » Записан
denben777
Осваиваюсь на форуме
***

Репутация: +74/-1
Offline Offline

Пол: Мужской
Сообщений: 157


« Ответ #4 : 17.05.2013, 03:00:37 »

...denben777 может попробуете реализовать Пример 2 с параметром  magnifierpos: "right" и поделитесь кодом...
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 не конфликтует.

Результат внедрения (страница товара):
                                    ,
Записан
sergkh
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 25


« Ответ #5 : 17.05.2013, 08:52:29 »

Огромное спасибо denben777. Все работает
Записан
THE KILLERS
Живу я здесь
******

Репутация: +28/-0
Offline Offline

Пол: Мужской
Сообщений: 899



« Ответ #6 : 18.05.2013, 15:35:51 »

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 не конфликтует.

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

У меня не работает почему-то. Делал все по вашей инструкции.
Я сравнил программой WinMerge кусок кода из файла 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 }?>

Но версия шаблона на DIV JoomShopping_template_default_div_3.14.0.3, которую я скачал с офиц. сайта (http://www.webdesigner-profi.de/joomla-webdesign/joomla-shop/downloads/templates/JoomShopping_template_default_div_3.14.0.3.zip.html?lang=en) немного отличается от вашей, вот кусок кода из нее (отличия я отметил красным):

Цитировать
<?php foreach($this->images as $k=>$image){?>
            <a class="lightbox<?php if ($k!=0){?> no_display<?php }?>" id="main_image_full_<?php print $image->image_id?>" href="<?php print $this->image_product_path?>/<?php print $image->image_full;?>" >
                <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 echo _JSHOP_ZOOM_IMAGE?>
                </div>
            </a>
            <?php }?>

Не знаю, может из-за разных версий магазина у меня не работает? У вас JS 3.14.0, у меня JS 3.14.3. А может из-за разных кодов JoomShopping_template_default_div_3.14.0.3? В php не силен. Помогите пожалуйста!
Записан
denben777
Осваиваюсь на форуме
***

Репутация: +74/-1
Offline Offline

Пол: Мужской
Сообщений: 157


« Ответ #7 : 18.05.2013, 17:04:49 »

THE KILLERS
  • Скачал установил указанный вами шаблон
  • Заменил код
  • Результат тот же (скриншот) - проверяйте свой шаблон.
                                   
« Последнее редактирование: 18.05.2013, 17:15:21 от denben777 » Записан
THE KILLERS
Живу я здесь
******

Репутация: +28/-0
Offline Offline

Пол: Мужской
Сообщений: 899



« Ответ #8 : 18.05.2013, 17:21:06 »

denben777, все равно не получается(((
Вот например http://tvoya-t-igra.ru/component/jshopping/cars/coupe?Itemid=0
Записан
denben777
Осваиваюсь на форуме
***

Репутация: +74/-1
Offline Offline

Пол: Мужской
Сообщений: 157


« Ответ #9 : 18.05.2013, 18:12:44 »

denben777, все равно не получается(((
Вот например http://tvoya-t-igra.ru/component/jshopping/cars/coupe?Itemid=0
У вас там проблема была еще до изменений. Верните все назад и вы увидите две ошибки, в числе которых значится и lightbox (то есть картинка не увеличивается). Скорей всего конфликт с одним из установленных компонентов - например галереей.
Записан
THE KILLERS
Живу я здесь
******

Репутация: +28/-0
Offline Offline

Пол: Мужской
Сообщений: 899



« Ответ #10 : 18.05.2013, 18:21:28 »

У вас там проблема была еще до изменений. Верните все назад и вы увидите две ошибки, в числе которых значится и lightbox (то есть картинка не увеличивается). Скорей всего конфликт с одним из установленных компонентов - например галереей.
Точно! Это из-за галереи TCVN Image Gallery. Выключил ее-и Lightbox появился и лупа заработала. Спасибо за помощь!
Но мне нужна эта галерея очень. Можно ли как-то побороть этот конфликт?
Записан
denben777
Осваиваюсь на форуме
***

Репутация: +74/-1
Offline Offline

Пол: Мужской
Сообщений: 157


« Ответ #11 : 18.05.2013, 18:25:15 »

THE KILLERS
Попробуйте включить загрузку скриптов галереи только на странице самой галереи - как я понял у вас галерея работает только на одной странице. Тогда, по идее, конфликта не будет, но опять же - нужно пробовать и проверять.
Записан
devirus
Осваиваюсь на форуме
***

Репутация: +6/-0
Offline Offline

Пол: Мужской
Сообщений: 144



« Ответ #12 : 21.05.2013, 00:23:13 »

Не соображу, как заголовки загружать к картинкам? Сейчас ведь у всех одинаковый заголовок первого изображения(
Записан
sergkh
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 25


« Ответ #13 : 21.05.2013, 00:41:32 »

Во всплывающем окне название товара
Записан
sergkh
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 25


« Ответ #14 : 21.05.2013, 08:40:26 »

Обнаружил следующее: если у товара несколько фото то после просмотра всех при переходе на любое предыдущее фото и курсоре в левом верхнем угле от превью товара увеличенное изображение появляется сверху от превью. denben777 у Вас этот глюк тоже есть или только у меня?
Вот  фото http://rusfolder.com/36486541
« Последнее редактирование: 21.05.2013, 09:30:40 от sergkh » Записан
nevigen
Moderator
*****

Репутация: +734/-16
Offline Offline

Пол: Мужской
Сообщений: 8808


http://n*****n.com


« Ответ #15 : 21.05.2013, 08:49:48 »

2 sergkh
если Ваше сообщение последнее в теме, пользуйтесь пжлст кнопкой редактирования сообщения, а не создавайте новое.
не превращайте форум в твитер.
Записан
THE KILLERS
Живу я здесь
******

Репутация: +28/-0
Offline Offline

Пол: Мужской
Сообщений: 899



« Ответ #16 : 02.06.2013, 00:33:45 »

THE KILLERS
Попробуйте включить загрузку скриптов галереи только на странице самой галереи - как я понял у вас галерея работает только на одной странице. Тогда, по идее, конфликта не будет, но опять же - нужно пробовать и проверять.
Ну вообще-то галерея работает в 4х местах:
1) http://tvoya-t-igra.ru/gallery-store
2) Выставки детских рисунков - http://tvoya-t-igra.ru/exhibitions-of-children-s-drawings - там 3 выставки, каждая сделана на этой галерее.
Но вариант с включением загрузки скриптов галереи только там где она используется-это отличная идея. Только вот как сделать это? Я в программировании 0.

UPD Ура! Я решил проблему-просто установил вот это - http://www.joomlabamboo.com/joomla-extensions/jb-library-plugin-a-free-joomla-jquery-plugin
« Последнее редактирование: 02.06.2013, 02:01:45 от THE KILLERS » Записан
mihey2011
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 40



« Ответ #17 : 07.06.2013, 11:11:33 »

Подскажите, как установить плагин zoomer в материал Joomla 1.5, что-то я никак не соображу
« Последнее редактирование: 07.06.2013, 11:15:58 от mihey2011 » Записан
mihey2011
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 40



« Ответ #18 : 10.06.2013, 08:06:53 »

Что? Никто не знает как?, или в лом отвечать? Если надо, то я заплачу.
Записан
nevigen
Moderator
*****

Репутация: +734/-16
Offline Offline

Пол: Мужской
Сообщений: 8808


http://n*****n.com


« Ответ #19 : 10.06.2013, 08:24:46 »

Joomla 1.5 потеряла поддержку полгода назад.
конечно в лом ковырятся в старом. Вы бы занимались тем что Вам не интересно и не нужно ? Wink

Если Ваш пост последний, и Вам есть что сказать еще, Вы можете воспользоваться кнопкой редактировать а не создавать новых постов (это не твитер Wink )
Записан
denben777
Осваиваюсь на форуме
***

Репутация: +74/-1
Offline Offline

Пол: Мужской
Сообщений: 157


« Ответ #20 : 10.06.2013, 14:35:13 »

Подскажите, как установить плагин zoomer в материал Joomla 1.5, что-то я никак не соображу

При условии, что Jquery подключена и работает без конфликтов:
Скачиваете zoomsl-3.0.min.js  и помещаете его в папку js по адресу: http://ваш_сайт/templates/ваш_шаблон/js/ если папки js нет, то создайте.
Подключаете скрипт к шаблону - перед </head> вставьте :
Код:
<script type="text/javascript" src="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ?>/js/zoomsl-3.0.min.js">
</script>

Затем в материале в режиме "Вставить html" вставляете:
Код:
<!-- JAVASCRIPT -->
<script type="text/javascript">
   jQuery(function(){   
      $(".my-foto").imagezoomsl({       
         zoomrange: [3, 3]
      });
   });   
</script>
<!-- HTML -->
<p>
<img class="my-foto" data-large="большое изображению" src="маленькое изображение" title="имя фото" /></p>

Код из примера на скриншоте:
Код:
<!-- JAVASCRIPT -->
<script type="text/javascript">
   jQuery(function(){   
      $(".my-foto").imagezoomsl({       
         zoomrange: [3, 3]
      });
   });   
</script>
<!-- HTML -->
<p>
<img class="my-foto" data-large="/images/stories/zoomer/fashion-056.jpg" src="/images/stories/zoomer/fashion-056-thumb.jpg" title="Фото" /></p>

Проверил на Joomla 1.5.26 с Jquery v.1.10.1 - Редактор материалов JoomlaCK
Результат (скриншот):
Записан
mihey2011
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 40



« Ответ #21 : 10.06.2013, 15:23:37 »

Дело в том, что у меня стоит лицензионный шаблон от YooTheme, yoo symphony, и в файле index.php у меня практически ничего нет, и тега </head> тоже нет, вот текст файла index.php:
Код:
<?php
/**
* @package   yoo_symphony
* @author    YOOtheme http://www.yootheme.com
* @copyright Copyright (C) YOOtheme GmbH
* @license   http://www.gnu.org/licenses/gpl.html GNU/GPL
*/

// no direct access
defined('_JEXEC') or die('Restricted access');

// include config
include_once(dirname(__FILE__).'/config.php');

// get warp
$warp =& Warp::getInstance();

// load main template file, located in /layouts/template.php
echo $warp->template->render('template');
Я так думаю, что нужно чего то менять в файле /layouts/template.php, но что то все равно не получается, может надо какой то путь прописать?

Jquery на сайте работает, т.к. работает LightBox
Записан
denben777
Осваиваюсь на форуме
***

Репутация: +74/-1
Offline Offline

Пол: Мужской
Сообщений: 157


« Ответ #22 : 10.06.2013, 16:31:48 »

В вашем случае попробуйте добавить (подключить) скрипт в файле component.php (http://ваш_сайт/templates/yoo_symphony/component.php)
« Последнее редактирование: 10.06.2013, 16:45:44 от denben777 » Записан
Sven
Осваиваюсь на форуме
***

Репутация: +6/-5
Offline Offline

Сообщений: 119


« Ответ #23 : 11.06.2013, 05:59:41 »

Уважаемый denben777, не могли бы вы написать как подключить свежую триальную версию Cloud Zoom (3)?
Подключить по аналогии со старой версией не получается.
Записан
mihey2011
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 40



« Ответ #24 : 11.06.2013, 08:07:39 »

Методом проб и ошибок, все таки плагин заработал, менять оказывается нужно было файл /templates/yoo_symphony/layouts/template.php, перед закрывающимся тегом </head>, я вставил:
Код:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="/templates/yoo_symphony/js/zoomsl-3.0.min.js"></script>
И вуаля, скрипт работает.
Только, что-то не пойму, как сделать, чтобы увеличенная картинка открывалась внизу маленькой, а не с правой стороны.
« Последнее редактирование: 11.06.2013, 09:31:30 от mihey2011 » Записан
denben777
Осваиваюсь на форуме
***

Репутация: +74/-1
Offline Offline

Пол: Мужской
Сообщений: 157


« Ответ #25 : 11.06.2013, 13:38:55 »

И я не пойму - зачем я вчера ставил себе на локалку (кстати, пользуюсь этим) Joomla 1.5, искал ваш шаблон (скачал версию 1.5.7 - где все вставляется в index.php ) подключал плагин - если вам даже короткое "спс", как вы чуть выше выразились, в лом написать.

По вашему вопросу.
Как я понял из документации, размещать отображение big-image можно только справа или слева (или же сам плагин править).
В коде, который вставляете в материал, после zoomrange: [3, 3] поставьте запятую, затем с новой строки magnifierpos: "left". Получится так:
Код:
$(".my-foto").imagezoomsl({        
zoomrange: [3, 3],
magnifierpos: "left"
});
Как вы поняли, "left" - это позиция.
« Последнее редактирование: 11.06.2013, 13:58:41 от denben777 » Записан
mihey2011
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 40



« Ответ #26 : 11.06.2013, 14:34:28 »

Нет, мне не в лом сказать спасибо, я все ковырялся с плагином, пытаясь его поставить вниз. И некогда было отписаться.
Так вот: спасибо большое за помощь, без Вас я сидел бы с этим плагином как "старуха у разбитого корыта", и разумеется большой + вам в репутацию.
Что касается отображения увеличеной картинки, то я написал разработчику этого плагина письмецо с таким же вопросом, и вот что он мне ответил:
Цитировать
Для того чтобы картинка отображалась снизу попробуйте Пример 4 на странице http://zoomsl.tw1.ru/example/
Код:
<img class="my-foto"src="/images/image-small.jpg"data-large="/images/image-big.jpg"title="Фото">
<div class="my-container"></div>

jQuery(function(){

$(".my-foto").imagezoomsl({
 
      descarea:".my-container",

      ...

});

});
В итоге у меня вот что получилось:
Код:
<!-- JAVASCRIPT -->

<script>
   jQuery(function(){
  
       $(".my-foto").imagezoomsl({
 
          descarea: ".my-container",
          zoomrange: [1, 12],
          magnifiereffectanimate: "fadeIn",
          magnifierborder: "none"

       });
   });  
</script>

<style>
.my-container{
border: 1px solid #F0F0F0;
width: 350px;
height: 350px;
}
</style>

<!-- HTML -->
<p style="text-align: center;">
<img class="my-foto" data-large="БОЛЬШАЯ КАРТИНКА.jpg" src="МАЛЕНЬКАЯ КАРТИНКА.jpg" data-title="НАЗВАНИЕ КАРТИНКИ" data-help="Используйте колесико мыши для увеличения +/-" title="Фото"></p>
<div class="my-container"></div>
И все получилось как надо (почти как надо, хотелось бы внизу и по центру, а получилось внизу и слева), ну соответственно значения width и height это размер всплывающей картинки.
Всем спасибо за помощь.
« Последнее редактирование: 11.06.2013, 14:41:26 от mihey2011 » Записан
denben777
Осваиваюсь на форуме
***

Репутация: +74/-1
Offline Offline

Пол: Мужской
Сообщений: 157


« Ответ #27 : 11.06.2013, 15:22:33 »

Уважаемый denben777, не могли бы вы написать как подключить свежую триальную версию Cloud Zoom (3)?
Подключить по аналогии со старой версией не получается.
Аналогия, как раз такая же - код немного другой. И есть нюансы.
Чтобы быстро:...............................................
В папку 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):
« Последнее редактирование: 11.06.2013, 17:30:19 от denben777 » Записан
Sven
Осваиваюсь на форуме
***

Репутация: +6/-5
Offline Offline

Сообщений: 119


« Ответ #28 : 11.06.2013, 19:21:16 »

Да все работает!

У меня до этого MagicZoom стоял, но он без jQuery работает и весит многовато. А при том, что jQuery у меня сейчас подключен к сайту - CloudZoom самое то.

Спасибо denben777 !
« Последнее редактирование: 11.06.2013, 19:43:41 от Sven » Записан
mihey2011
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 40



« Ответ #29 : 18.06.2013, 13:43:26 »

Цитировать
И все получилось как надо (почти как надо, хотелось бы внизу и по центру, а получилось внизу и слева), ну соответственно значения width и height это размер всплывающей картинки.
Всем спасибо за помощь.
Не долго я радовался. Пока создавал раздел с этим плагином, про всё забыл. Сегодня обнаружил, что LightBox не работает, как отключаю плагин, LightBox снова работает.
Как устранить данный конфликт?
Записан
Страниц: [1] 2 3 4  Все   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet