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

Подскажите пожалуйста, где я не прав в выводе изображений на странице товара:
вот ссылка на страницу товара
там у меня с zoom-ом проблема. Обычный lightbox как то не прикольно ставить.
Может я просто не правильно его установил?
Вот тут просто он красиво работает.. Спасибо.
Саша Иващенко
15 июня 2013, 13:28
modx.pro
2
4 217
0

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

Саша Иващенко
15 июня 2013, 17:53
0
дополняю пост:
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
    0
    Точнее тхумбы не работают, вернее в зумер они не попадают почему не пойму
      Саша Иващенко
      15 июня 2013, 18:38
      0
      А еще точнее
      Пример в верстке
      <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
        0
        ВСЕ подобные вопросы решаются одним способом:
        1. Заставить это работать на html+css+js
        2. Заставить сниппет генерировать точно такой же html
          Саша Иващенко
          15 июня 2013, 20:26
          0
          так я не вкурю в каком сниппете оно генерирует код текущего(дефолтного) показа картинок (галереи)
          добавил событие к ссылке
          onclick="reloadd();"
          и
          $(function reloadd() {
                  //Some code
                  return false;
              });
          а оно картинку не хочет показывать, видимо в сниппете оно добавляет свое действие. но в каком я чет не найду
            Василий Наумкин
            15 июня 2013, 20:47
            0
            Там 3 чанка, с говорящими именами: row, empty и outer.

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

            В чанке «ряд», «строка», или «обертка»? Просто, попробуй угадать?
              Саша Иващенко
              16 июня 2013, 03:41
              0
              хаха, сарказм, прикольно ))

              я про то, что я не могу заменить
              <a href="[[+360x450:default=`[[+url]]`]]"
              на
              <a href="javascript:void(0);"
              так как не отображается картинка
              или просто не понимаю как…
              а вы мне про подумай и угадай где оно выводится.

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

                Смотри, как работает javascript галереи и отключай его, если не нужен.
                  Саша Иващенко
                  16 июня 2013, 13:38
                  0
                  а если обновлю минишоп то все пропадет же?
                    Николай
                    12 апреля 2015, 14:52
                    -2
                    легко сказать, да многие не знают javascript
            Володя
            17 июня 2013, 10:58
            0
            вот только сейчас прикручивал, все пашет.
            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>
            slobik
            09 ноября 2013, 20:50
            0
            хочу добавить вот эту лупу
            в чанки 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
              0
              Скорее всего дело в том, что стандартный скрипт галереи не подозревает о том, что ему еще нужно поменять путь в data-large, поэтому там и остается путь к дефолтной картинке.
              Иван Бочкарев
              13 апреля 2015, 05:58
              0
              Есть еще такое решение http://okfoc.us/okzoom/
                Klike
                22 июня 2015, 19:30
                +1
                Вот очень похожее БЕСПЛАТНОЕ и функциональное решение: http://zoomsl.sergeland.ru
                  Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                  22