0

我们正在开发 Prestashop 主题，但 serialScroll 插件不适用于产品页面中的图像缩略图。

我们没有修改这个插件，既没有修改 HTML smarty 模板，也没有修改相关的 javascript 代码。

这是 serialScroll (product.tpl) 的 .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}

产品.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;
}

如果您想了解更多信息，请随时问我。

提前致谢。

4

1 回答 1

0

好的，主题解决了，它是#thumbs_list_frame 元素的宽度。

<div id="thumbs_list">
                <ul id="thumbs_list_frame"> <!-- THIS CONTAINER -->
                {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}[spam-filter]/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[spam-filter]{/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 -->

为这个元素设置一个固定的宽度解决了这个问题。

于 2017-08-03T08:34:15.023 回答