Как полноценно прикрутить Highslide к изображениям товара

2 ответа

• популярные
• новые

• 1

  replicant 13 июня 2018 17:25 #

  В принципе в документации highslide все очень подробно расписано, но там столько опций, параметров и css обвязки, что немудрено запутаться. И прикручивание особо от версии Шопскрипта не зависит (хоть старый 309, хоть 7-ка). Надо просто знать, где и как вы получаете код основного изображения и дополнительных изображений товара и этого более чем достаточно.
  
  Если честно, то в свое время прикрутил highslide вместо zoombox и какое-то время он работал. Потом заменил его на swipebox на всех своих проектах ибо highslide выбесил. Swipebox и кода с собой много меньше тянет и всякие портянки инициализации не требует и ещё его можно использовать для вывода увеличенных изображений блога, статей на сайте, изображений на статических страницах и в описании категорий и тегов и все это намного проще, чем с highslide. Короче говоря, универсальный код получается. И даже трюки с выплывающими текстовыми блоками он тоже позволяет делать. А ещё highslide на мобильных устройствах - обнять и плакать и это была основная причина отказа от этого кода. Может быть они адаптировали и стало красиво, но проверять не хочу.
  
  Если вы все ещё хотите использовать highslide, то от вас потребуется больше информации о ваших измененных для этого шаблонах и о том, что вы уже прикрутили, как и куда. Подробно и в деталях с кусками из кода ваших шаблонов.
  
  Пример из list-thumbs.html (есс-но перед этим надо в head загрузить highslide.js и необходимый для него css)

  {literal}<script type="text/javascript">
  hs.fadeInOut = false;
  hs.numberPosition = 'heading'; //caption or heading
  //hs.captionEval = 'this.thumb.alt';
  hs.marginBottom = 115; // make room for the thumbstrip and the controls
  hs.expandCursor = 'pointer';
  // Add the controlbar
  hs.addSlideshow({
  	interval: 5000,
  	repeat: true,
  	useControls: true,
  	fixedControls: false,
  	overlayOptions: {
  		className: 'text-controls',
  		opacity: 1,
  		position: 'bottom center',
  		offsetX: 0,
  		offsetY: -80,
  		relativeTo: 'viewport',
  		hideOnMouseOut: false
  	},
  	thumbstrip: {
  		mode: 'horizontal',
  		position: 'bottom center',
  		relativeTo: 'viewport'
  	}
  });
  	
  hs.registerOverlay({
      html: '<div class="closebutton" onclick="return hs.close(this)" title="Закрыть"></div>',
      position: 'top right',
      hideOnMouseOut: false
  });
  </script>{/literal}

          <div class="highslide-gallery">
              <div class="image2">
              {$img_url = $wa->shop->productImgUrl($p, '1280')}
              {if $img_url}
                 {$badge_html = $wa->shop->badgeHtml($p.badge)}
                  {if $badge_html}
                      <div class="corner top right">{$badge_html}</div>
                  {/if}
  <a id="thumb{$p.id}" href="{$img_url}" title="Увеличить изображение" class="highslide" onclick="return hs.expand(this, {ldelim}slideshowGroup: '{$p.id}', thumbnailId: 'thumb{$p.id}'{rdelim})">
                  <div class="ugol top left"><div class="zzzoom"><span>увеличить</span></div></div>
                      {$wa->shop->productImgHtml($p, '200x0', ['itemprop' => 'image', 'alt' => $p.name])}
                  </a>
              <div class="highslide-caption"><span>{$p.name}</span></div>
  <!-- Images -->
  <div class="hidden-container">                
  {$product = $wa->shop->product($p.id)}
          {foreach $product.images as $image}
              {if !$image@first}
  <a href="{$wa->shop->imgUrl($image, '1280')}" style="text-decoration:none;" class="highslide" onclick="return hs.expand(this, {ldelim}slideshowGroup: '{$product.id}', thumbnailId: 'thumb{$product.id}'{rdelim})">
              {$wa->shop->imgHtml($image, '200x0', ['alt' => '', 'title'=>''])}
              </a>
              <div class="highslide-caption"><span>{$p.name}</span></div>
              {/if}
          {/foreach}                
  </div>
  <!-- Images -->
              {else}    
                  <a href="{$p.frontend_url}" title="{$p.name}">
                  <img src="{$wa_theme_url}img/dummy200x0.png" alt="фотография временно отсутствует">
                  </a>
              {/if}
              </div>
          </div>

  И то же самое через swipebox
  

  {literal}<script type="text/javascript">$(document).ready(function() { $( ".swipebox" ).swipebox(); }); </script>{/literal}
  
  <div class="swipebox-gallery">
              <div class="image2">
              {$img_url = $wa->shop->productImgUrl($p, '1280')}
              {if $img_url}
                 {$badge_html = $wa->shop->badgeHtml($p.badge)}
                  {if $badge_html}
                      <div class="corner top right">{$badge_html}</div>
                  {/if}
  <a href="{$img_url}" class="swipebox" rel="swipe-{$p.id}">
                  <div class="ugol top left"><div class="zzzoom"><span>увеличить</span></div></div>
                      {$wa->shop->productImgHtml($p, '200x0', ['itemprop' => 'image', 'alt' => $p.name])}
                  </a>
  <!-- Images -->
  <div style="display:none;">                
  {$product = $wa->shop->product($p.id)}
          {foreach $product.images as $image}
              {if !$image@first}
  <a href="{$wa->shop->imgUrl($image, '1280')}" class="swipebox" rel="swipe-{$product.id}">{$product.id}</a>
              {/if}
          {/foreach}                
  </div>
  <!-- Images -->
              {else}    
                  <a href="{$p.frontend_url}" title="{$p.name}">
                  <img src="{$wa_theme_url}img/dummy200x0.png" alt="фотография временно отсутствует">
                  </a>
              {/if}
              </div>
  </div>

  ответить
• 1

  replicant 14 июня 2018 08:37 #

  В карточке продукта для прикручивания hghslide без небольшой JS вставки не обойтись, т.к. там есть основное изображение и все изображения, включая основное, под ним, хотя это и зависит от темы дизайна, но обычно это так.
  
  Запуск просмотра через highslide может начаться с любого из них, т.е. ссылки на изображения в #product-gallery и #product-core-images надо собрать в кучу и выводить через highslide без повторов первого, начиная с любого произвольного. В этом и должна состоять суть вспомогательного скрипта. Сам highslide собирает ссылки из элементов с определенными классами и требует указания в onclick целой кучи всякого. Это мне и не понравилось.
  
  Swipebox в этом отношении проще, да и классы можно делать свои достаточно легко. Например создал в swipebox.css себе такой .blogpics {border:none;cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in} , потом его подцепляешь для изображений блога где-нибудь в stream.html вот так <script type="text/javascript">$(document).ready(function() { $(".blogpics").swipebox(); });</script>
  
  С другой стороны и для swipebox без маленького скрипта в product.html или в product.js не обходится. Я пробовал обойтись без помощи этого JS, но пока решения не нашел. Либо огород городить очень большой, либо бредятина и костыли. В шаблонах типа list-thumbs.html все намного проще (см. решение выше).
  

  ответить