Jump to content

LightSlider вместо FancyBox


Go to solution Solved by Kosjak76,

Recommended Posts

Приветствую,

Подскажите пожалуйста как обернуть код этим слайдером с миниатюрами?

Хотел сделать в product.tpl вместо стандартного FancyBox - не получается.

 

 

HTML

<ul id="vertical">
  <li data-thumb="img/thumb/cS-1.jpg">
    <img src="img/cS-1.jpg" /></li>
  <li data-thumb="img/thumb/cS-2.jpg">
    <img src="img/cS-2.jpg" /></li>
</ul>

Вот скрипт для него в варианте "Vertical":

 $(document).ready(function() {
    $('#vertical').lightSlider({
      gallery:true,
      item:1,
      vertical:true,
      verticalHeight:295,
      vThumbWidth:50,
      thumbItem:8,
      thumbMargin:4,
      slideMargin:0
    });  
  });

Исходники:

http://sachinchoolur.github.io/lightslider/examples.html

Link to post
Share on other sites

Не получается обернуть его этим кодом:

 

{if $product->image}
 <div class="image">
  <a href="{$product->image->filename|resize:800:600:w}" class="zoom" rel="group"><img src="{$product->image->filename|resize:300:300}" alt="{$product->product->name|escape}" /></a>
 </div>
{/if}

и для миниатюр:

 

{if $product->images|count>1}
 <div class="images">
  {* cut удаляет первую фотографию, если нужно начать 2-й - пишем cut:2 и тд *}
   {foreach $product->images|cut as $i=>$image}
    <a href="{$image->filename|resize:800:600:w}" class="zoom" rel="group"><img src="{$image->filename|resize:95:95}" alt="{$product->name|escape}" /></a>
   {/foreach}
 </div>
{/if}

 

Link to post
Share on other sites
  • Solution
<ul id="imageGallery">
{foreach $product->images as $i=>$image}
  <li data-thumb="{$image->filename|resize:95:95}" data-src="{$image->filename|resize:800:600:w}">
    <img src="{$image->filename|resize:95:95}" />
  </li>
   {/foreach}
</ul>

Типа такого код должен быть.

Link to post
Share on other sites

 

<ul id="imageGallery">
{foreach $product->images as $i=>$image}
  <li data-thumb="{$image->filename|resize:95:95}" data-src="{$image->filename|resize:800:600:w}">
    <img src="{$image->filename|resize:95:95}" />
  </li>
   {/foreach}
</ul>

Типа такого код должен быть.

 

Спасибо Косяк, оно самое!!! Большой +!!!

 

ps: не знал что ты модератор, а когда назначили?

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...