0
我們正在開發Prestashop主題，但serialScroll插件不適用於產品頁面中的圖像縮略圖。serialScroll在Prestashop產品頁面中不起作用
我們沒有修改這個插件，既不是HTML smarty模板也不是相關的javascript代碼。
這裏是serialScroll的.tpl模板（product.tpl）：
{if isset($images) && count($images) > 0}
<!-- thumbnails -->
<div id="views_block" class="clearfix {if isset($images) && count($images) < 2}hidden{/if}">
{if isset($images) && count($images) > 2}
<span class="view_scroll_spacer">
<a id="view_scroll_left" class="" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">
{l s='Previous'}
</a>
</span>
{/if}
<div id="thumbs_list">
<ul id="thumbs_list_frame">
{if isset($images)}
{foreach from=$images item=image name=thumbnails}
{assign var=imageIds value="`$product->id`-`$image.id_image`"}
{if !empty($image.legend)}
{assign var=imageTitle value=$image.legend|escape:'html':'UTF-8'}
{else}
{assign var=imageTitle value=$product->name|escape:'html':'UTF-8'}
{/if}
<li id="thumbnail_{$image.id_image}"{if $smarty.foreach.thumbnails.last} class="last"{/if}>
<a{if $jqZoomEnabled && $have_image && !$content_only} href="javascript:void(0);" rel="{literal}{{/literal}gallery: 'gal1', smallimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large_default')|escape:'html':'UTF-8'}',largeimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}'{literal}}{/literal}"{else} href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}" data-fancybox-group="other-views" class="fancybox{if $image.id_image == $cover.id_image} shown{/if}"{/if} title="{$imageTitle}">
<img class="img-responsive" id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'cart_default')|escape:'html':'UTF-8'}" alt="{$imageTitle}" title="{$imageTitle}"{if isset($cartSize)} height="{$cartSize.height}" width="{$cartSize.width}"{/if} itemprop="image"/>
</a>
</li>
{/foreach}
{/if}
</ul>
</div> <!-- end thumbs_list -->
{if isset($images) && count($images) > 2}
<a id="view_scroll_right" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">
{l s='Next'}
</a>
{/if}
</div> <!-- end views-block -->
<!-- end thumbnails -->
{/if}
product.js：
//init the serialScroll for thumbs
if (!!$.prototype.serialScroll)
$('#thumbs_list').serialScroll({
items:'li:visible',
prev:'#view_scroll_left',
next:'#view_scroll_right',
axis:'x',
offset:0,
start:0,
stop:true,
onBefore:serialScrollFixLock,
duration:700,
lazy: true,
lock: false,
force:true,
cycle:false
});
$('#thumbs_list').trigger('goto', 0);
對於這部分使用的樣式：
#views_block {
width: 75%;
margin: 30px auto auto;
}
.pb-left-column #views_block {
margin-top: 10px;
}
.show-right-column.hide-left-column span.view_scroll_spacer, .hide-right-column.show-left-column span.view_scroll_spacer {
width: 27px;
padding-left: 2px;
}
span.view_scroll_spacer {
float: left;
width: 39px;
padding-left: 12px;
}
.view_scroll_spacer {
margin-top: 38px;
}
.show-right-column.hide-left-column #thumbs_list, .hide-right-column.show-left-column #thumbs_list {
width: 294px;
}
#thumbs_list {
overflow: hidden;
float: left;
}
#thumbs_list ul#thumbs_list_frame {
list-style-type: none;
padding-left: 0;
overflow: hidden;
height: 90px;
}
#thumbs_list li {
float: left;
height: 90px;
width: 90px;
cursor: pointer;
margin-right: 8px;
line-height: 0;
box-sizing: border-box;
}
li[id^="thumbnail_"] {
border: none !important;
}
#thumbs_list li a:hover, #thumbs_list li a.shown {
border-color: #dbdbdb;
}
#thumbs_list li a {
display: block;
transition: all 0.3s ease;
box-sizing: border-box;
background: #fbfbfb;
}
li[id^="thumbnail_"] a {
border: none !important;
}
#thumbs_list li img {
border: 1px solid #fff;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.primary_block .pb-left-column img {
max-width: 100%;
height: auto;
}
#view_scroll_left {
margin-top: 0;
}
#view_scroll_left, #view_scroll_right {
margin-top: 38px;
height: 20px;
width: 20px;
line-height: 0;
font-size: 0;
overflow: hidden;
}
如果你想要更多的信息不要猶豫，問我。
在此先感謝。