MS2 + msGallery zoom на товары

Подскажите пожалуйста, где я не прав в выводе изображений на странице товара:
вот ссылка на страницу товара
там у меня с zoom-ом проблема. Обычный lightbox как то не прикольно ставить.
Может я просто не правильно его установил?
Вот тут просто он красиво работает.. Спасибо.

Саша Иващенко

15 июня 2013, 13:28

4 668

Комментарии: 22

Саша Иващенко

15 июня 2013, 17:53

дополняю пост:
tpl.msGallery.row

<li class="span2">
    <a href="[[+360x450:default=`[[+url]]`]]" class="thumbnail" data-image="[[+url]]" rel="{gallery: 'gal1', smallimage: '[[+136x205]]',largeimage: '[[+360x450:default=`[[+url]]`]]'}">
        <img src="[[+136x205]]" alt="" title="[[+name]]" width="136" height="205">
    </a>
</li>

tpl.msGallery.outer

<div id="msGallery">
    <a rel="fancybox gal1" class="jqzoom" href="[[+image]]" target="_blank" >
        <img src="[[+360x450]]" width="360" height="450" alt="" title="" id="mainImage" />
    </a>
    <ul class="thumbnails">
        [[+rows]]
    </ul>
</div>
<script type="text/javascript">
    $(function() {
        $('.jqzoom').jqzoom({
            zoomType: 'standard',
            lens:true,
            preloadImages: false,
            alwaysOn:false
        });
    });
</script>

Саша Иващенко

15 июня 2013, 18:24

Точнее тхумбы не работают, вернее в зумер они не попадают почему не пойму

Саша Иващенко

15 июня 2013, 18:38

А еще точнее
Пример в верстке

<ul id="thumblist" class="clearfix" >
  <li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small1.jpg',largeimage: './imgProd/triumph_big1.jpg'}"><img src='imgProd/thumbs/triumph_thumb1.jpg'></a></li>
  <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small2.jpg',largeimage: './imgProd/triumph_big2.jpg'}"><img src='imgProd/thumbs/triumph_thumb2.jpg'></a></li>
  <li><a  href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small3.jpg',largeimage: './imgProd/triumph_big3.jpg'}"><img src='imgProd/thumbs/triumph_thumb3.jpg'></a></li>
</ul>

и кусок tpl.msGallery.row в котором href

<a href="[[+360x450:default=`[[+url]]`]]" class="thumbnail"..

уже занят и как javascript:void(0) туда запихнуть?

<li class="span2">
	<a href="[[+360x450:default=`[[+url]]`]]" class="thumbnail" data-image="[[+url]]" rel="{gallery: 'gal1', smallimage: '[[+136x205]]',largeimage: '[[+360x450:default=`[[+url]]`]]'}">
		<img src="[[+136x205]]" alt="" title="[[+name]]" width="136" height="205">
	</a>
</li>

Василий Наумкин

15 июня 2013, 19:57

ВСЕ подобные вопросы решаются одним способом:
1. Заставить это работать на html+css+js
2. Заставить сниппет генерировать точно такой же html

Саша Иващенко

15 июня 2013, 20:26

так я не вкурю в каком сниппете оно генерирует код текущего(дефолтного) показа картинок (галереи)
добавил событие к ссылке

onclick="reloadd();"

$(function reloadd() {
        //Some code
        return false;
    });

а оно картинку не хочет показывать, видимо в сниппете оно добавляет свое действие. но в каком я чет не найду

Василий Наумкин

15 июня 2013, 20:47

Там 3 чанка, с говорящими именами: row, empty и outer.

Как думаешь, в котором выводится «код текущего(дефолтного) показа картинок (галереи)»?

В чанке «ряд», «строка», или «обертка»? Просто, попробуй угадать?

Саша Иващенко

16 июня 2013, 03:41

хаха, сарказм, прикольно ))

я про то, что я не могу заменить

<a href="[[+360x450:default=`[[+url]]`]]"

на

<a href="javascript:void(0);"

так как не отображается картинка
или просто не понимаю как…
а вы мне про подумай и угадай где оно выводится.

Ну вернее я мог не так выразить свою мысль.

Василий Наумкин

16 июня 2013, 08:37

Картинка из превьюшки грузится в большую на javascript.
Логично, что если ты убираешь адрес картинки (размером [[+360x450]]) — то она не подставится в большую, при загрузке страницы, или клике.

Смотри, как работает javascript галереи и отключай его, если не нужен.

Саша Иващенко

16 июня 2013, 13:38

а если обновлю минишоп то все пропадет же?

Николай

12 апреля 2015, 14:52

легко сказать, да многие не знают javascript

Володя

17 июня 2013, 10:58

вот только сейчас прикручивал, все пашет.
tpl.msGallery.row1

<li class="span2">
	<a href='[[+url]]' class='cloud-zoom-gallery thumbnail' rel="useZoom: 'zoom1', smallImage: '[[+360x270]]'" data-image="[[+url]]">
    <img src="[[+120x90]]" alt = "" title="[[+name]]" width="120" height="90"/></a>       
</li>

tpl.msGallery.outer1

<link href="assets/components/minifyx/zoom/cloud-zoom.css" rel="stylesheet" type="text/css" />
<script src="assets/components/minifyx/jquery-1.8.2.min.js"></script> 
<script type="text/JavaScript" src="assets/components/minifyx/zoom/cloud-zoom.1.0.2.js"></script>

<div id="msGallery">
	<a href='[[++assets_url]]components/minishop2/img/web/ms2_big.png' class='cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4, softFocus:true">
        <img src="[[++assets_url]]components/minishop2/img/web/ms2_medium.png" width="360" height="270" title="" id="mainImage"/>
    </a>
    
	<ul class="thumbnails">
		[[+rows]]
	</ul>
</div>

Саша Иващенко

17 июня 2013, 15:49

а откуда скачивали cloud-zoom? дайте ссылку пожалуйста

Василий Наумкин

17 июня 2013, 16:19

Давай-как тут обойдемся без ссылок на пиратское ПО?

Купить cloud zoom можно тут

Саша Иващенко

17 июня 2013, 17:51

ок спасибо

Володя

17 июня 2013, 19:10

Боже мой… Оно еще и денег стоит?))) я и не знал...(((
А free аналоги есть?

Саша Иващенко

17 июня 2013, 19:50

Есть. Тот, что ставил я.

Саша Иващенко

18 июня 2013, 16:05

то как решили на этом оставаться что сделали?

Николай

12 апреля 2015, 14:54

Скажи пж, как сделать чтоб дефолтная картинка не показывалась

slobik

09 ноября 2013, 20:50

хочу добавить вот эту лупу
в чанки tpl.msGallery.outer пишу:

<div id="msGallery"> 
<a rel="fancybox" href="[[++assets_url]]components/minishop2/img/web/ms2_big.png" target="_blank"> 
<img class = "my-foto" src = "[[++assets_url]] components/minishop2/img/web/ms2_medium.png" width = "360" height = "270" alt = "" title = "" id = "mainImage" 
data-large = "[[++assets_url]] components/minishop2/img/web/ms2_big.png" /> 
</ a> 
<ul class="thumbnails"> 
[[+rows]] 
</ul> 
</div>

Лупа работает, но на увеличенном фото показывается стандартная картинка minishop. Если посмотреть в код страницы то в атрибуте data-large находится: / assets/components/minishop2/img/web/ms2_big.png

В чем моя ощибка?

Aliaksandr Katlou

09 ноября 2013, 22:12

Скорее всего дело в том, что стандартный скрипт галереи не подозревает о том, что ему еще нужно поменять путь в data-large, поэтому там и остается путь к дефолтной картинке.

Иван Бочкарев

13 апреля 2015, 05:58

Есть еще такое решение http://okfoc.us/okzoom/

Klike

22 июня 2015, 19:30

Вот очень похожее БЕСПЛАТНОЕ и функциональное решение: http://zoomsl.sergeland.ru

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

MS2 + msGallery zoom на товары

Комментарии: 22

Здесь упомянуты