serialScroll does not work in Prestashop product page

[empresa2daw-1]

We are developing a Prestashop theme, but the serialScroll plugin does not work for image thumbnails in the product page.

We didn't modify this plugin neither the HTML smarty template nor the associated javascript code.

Here is the .tpl template for serialScroll (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}[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 -->
                {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);

used styles for this part:

#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;
}

If you want more information do not hesitate to ask me.

Thanks in advance.

[empresa2daw-1]

Ok, topic solved, it was the width of the #thumbs_list_frame element.

<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 -->

Setting a fixed width to this element solved the issue.

Edited August 3, 2017 by empresa2daw-1 (see edit history)