Vertical product/item thumbnails instead of horizontal?

[Andershj]

Hello, Prestashop forum. This is my first post in here...

I wanted to ask if anyone knows if it is possible to change the thumbnails when viewing a product from horizontal to vertical? (See attached images).

Thanks in advance.

[Andershj]

I really can't seem to figure this out and I haven't been able to find any other site doing what I want to do, so is it even possible?

Im making this site as part of a project, so help would be greatly appreciated!

[eGzyl.pl]

i made it in my shop: www.prestahelp.com

[Andershj]

Nice!

Could you tell me how you did it?

[eGzyl.pl]

remember me later i send u tpl with it - now must leave

[babyewok]

Did you figure this out?

[Renatinha]

Could you tell me how you did it?

[babyewok]

Hi there, I actually figured this out myself. The main changes are to the product.js file in the js folder for your theme. The basic changes are as follows:

CHange this line (around line 314):

$('#thumbs_list_frame').scrollTo('li:eq(0)', 700, {axis:'x'});

to:

$('#thumbs_list_frame').scrollTo('li:eq(0)', 700, {axis:'y'});

This (around line 324)

$('#thumbs_list_frame').width((parseInt(($('#thumbs_list_frame >li').width())* i) + 3) + 'px'); //  Bug IE6, needs 3 pixels more ?

to this:

$('#thumbs_list_frame').height((parseInt(($('#thumbs_list_frame >li').height())* i) + 3) + 'px'); //  Bug IE6, needs 3 pixels more ?

From Line 332:

$('#thumbs_list').serialScroll({
       items:'li:visible',
       prev:'a#view_scroll_left',
       next:'a#view_scroll_right',
       axis:'x',
       offset:0,
       start:0,
       stop:true,
       onBefore:serialScrollFixLock,
       duration:700,
       step: 2,
       lazy: true,
       lock: false,
       force:false,
       cycle:false
   });

to this:

$('#thumbs_list').serialScroll({
       items:'li:visible',
       prev:'a#view_scroll_left',
       next:'a#view_scroll_right',
       axis:'y',
       offset:0,
       start:0,
       stop:true,
       onBefore:serialScrollFixLock,
       duration:700,
       step: 2,
       lazy: true,
       lock: false,
       force:false,
       cycle:false
   });

Then on the product template file, change this:

to this:

The rest is just changes ot the css to get it looking how you want it. Think I've remembered everything!

[htech]

hey man

thanks for the tips!!! managed to get the codes changed but struggling to get the css sorted...any clues or ideas ?
not sure where or how to find the code to move the thumblist on the right

[Sharak]

I've managed to make it vertical, but still few problems left. Left and right arrows are on the left and right of whole thumbs-scroll-bar instead of top and bottom of it. Also it is placed under the big image. How to place this scrollbar between big image and info/color_picker/price column?

 

Edit: Never mind, got this myself http://www.bluzka.com.pl/pl/krotki-rekaw/14-bluzka-damska-wiktoria.html

[fjfe]

i made it in my shop: www.prestahelp.com

 

checked your site out, pretty cool. Can you help me with my new site, etc.

 

Thanks in advance.

[vivek tripathi]

Many thanks to babywok

 

it works fine

[dtnguyen]

@babyewok: thank u very much,

 

it works impeccably for my site: PS 1.4.7.2. I didn't even have to modify "<ul style="width: {math equation=" width="" *="" nbimages"="" nbimages="$images|@count}px"" id="thumbs_list_frame">"

[Dan1]

I followed babyewoks instructions precisely and this is not working on PS 1.4.8.2. I couldn't find the code

<ul style="width: {math equation=" width="" *="" nbimages"="" nbimages="$images|@count}px"" id="thumbs_list_frame">

in the product.tpl file nor anywhere else. I'd really like to implement this in my shop and would appreciate the help.

[Dan1]

I'm still looking for help with this.

Edited October 16, 2012 by Dan1 (see edit history)

[raffs]

Did anyone figure this out for modifying Prestashop version 1.5.x

Have tried using the above but no joy.

[sannie]

i followed -most of- babywok's instructions for a 1.5.4.1 installation and it works in Chrome, Safari and IE 9.0 and IE7.0 but not on IE 8.0.

 

I couldn't find this line in 1.5.4.1. product.js:

$('#thumbs_list_frame').width((parseInt(($('#thumbs_list_frame >li').width())* i) + 3) + 'px'); // Bug IE6, needs 3 pixels more

 

Instead I changed all "width" to "height" in the product.js file regarding the thumbs_list_frame:

 

(product.js, around line 492)

var thumb_height = $('#thumbs_list_frame >li').height() + parseInt($('#thumbs_list_frame >li').css('marginRight'));

$('#thumbs_list_frame').height((parseInt((thumb_height) * $('#thumbs_list_frame >li').length)) + 'px');

$('#thumbs_list').trigger('goto', 0);

serialScrollFixLock('', '', '', '', 0);// SerialScroll Bug on goto 0 ?

}

 

I haven't modified "<ul style="width: {math equation=" width="" *="" nbimages"="" nbimages="$images|@count}px"" id="thumbs_list_frame">"

either and it works (actually, I couldn't find this code).

For the rest follow the instructions.

[thanga]

I am also using the same version - 1.5.4.1 and i have done the same what they have instructed but i could not successful . Could you please share what you have done for the vertical scroll bar

[vekia]

it's probably because different template, im not sure at all but it will be really helpful if you will share url to the store with this problem

[x13_pl]

I add it in PrestaShop 1.5.X

 

edit product.js

 

$('#thumbs_list_frame').scrollTo('li:eq(0)', 700, {axis:'x'});

 

to

 

$('#thumbs_list_frame').scrollTo('li:eq(0)', 700, {axis:'y'});

 

and

 

axis:'x',

 

to

 

axis:'y',

 

then in product.css edit:

 

#pb-right-column #views_block {
    float:left;
    margin-top:20px;
    margin-left:20px;
    position: relative;
    text-align: left;
    width:100px;
}

#thumbs_list {
    overflow:hidden;
    height:400px;
    width:100px;
}

#thumbs_list ul#thumbs_list_frame {
    list-style-type:none;
    padding-left:0;
}

#thumbs_list li {
    cursor:pointer;
    margin:15px 0px;
}
#thumbs_list li a {
    min-width: 91px;
    
}
#thumbs_list li img {
    border:1px solid #cdcdcd;
    margin-right: 4px;
}
#thumbs_list li img:hover {
    border:1px solid #34ABEB;
}
 

[paulakfleck]

I add it in PrestaShop 1.5.X

 

edit product.js

 

$('#thumbs_list_frame').scrollTo('li:eq(0)', 700, {axis:'x'});

 

to

 

$('#thumbs_list_frame').scrollTo('li:eq(0)', 700, {axis:'y'});

 

and

 

axis:'x',

 

to

 

axis:'y',

 

then in product.css edit:

 

#pb-right-column #views_block {

    float:left;

    margin-top:20px;

    margin-left:20px;

    position: relative;

    text-align: left;

    width:100px;

}

 

#thumbs_list {

    overflow:hidden;

    height:400px;

    width:100px;

}

 

#thumbs_list ul#thumbs_list_frame {

    list-style-type:none;

    padding-left:0;

}

 

#thumbs_list li {

    cursor:pointer;

    margin:15px 0px;

}

#thumbs_list li a {

    min-width: 91px;

    

}

#thumbs_list li img {

    border:1px solid #cdcdcd;

    margin-right: 4px;

}

#thumbs_list li img:hover {

    border:1px solid #34ABEB;

}

 

Oh, thank you! Worked on my Prestashop 1.5.6.0!! : )

[petete2008]

excellent!
I propose to do so now in two columns. What do you think?

[viji]

Hi,

 

   Anybody knows how to change the thumbnail slider from horizontally to vertically in prestashop 1.6?

[viji]

Hi, 

  

   I find it.

  

   In line 115, change axis:'x' to axis:'y'.

 

   In line 814, change axis 'x' to axis 'y'.

 

  In 836, 

  var thumb_width = $('#thumbs_list_frame >li').outerWidth() + parseInt($('#thumbs_list_frame >li').css('marginRight'));

$('#thumbs_list_frame').width((parseInt((thumb_width) * $('#thumbs_list_frame >li').length)) + 'px');

 

Replace the below code with the existing code:

 

var thumb_height = $('#thumbs_list_frame >li').outerHeight() + parseInt($('#thumbs_list_frame >li').css('marginBottom'));

$('#thumbs_list_frame').height((parseInt((thumb_height) * $('#thumbs_list_frame >li').length)) + 'px'); 

[blerimkamir]

I try to do the same on prestashop 1.6 but the code is not the same.. or the theme is the problem i dont know!!! Anyone can help please!! 

This the code I found with ´x´

 

//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:false,

cycle:false

});

 

 

And didn´t found any similar code on product.css

Edited July 14, 2016 by blerimkamir (see edit history)

[Cyrielle]

Hi !

 

I've you found a solution for Prestashop 1.6 ?

[Cyrielle]

I've found a solution here :

 

https://www.prestashop.com/forums/topic/436295-vertical-productitem-thumbnails-instead-of-horizontal/?do=findComment&comment=2039010

 

If it cans help someone.

[maciekmaster]

Hello!

I need it for PS 1.7

Anybody got the solution?

 

Pls help.

[maciekmaster]

Ok i solved this problem by myself.

Thanks for help.

 

Regards

[fskhan]

On 7/21/2018 at 1:56 AM, maciekmaster said:

Ok i solved this problem by myself.

Thanks for help.

 

Regards

Would you please share the changes to 1.7?

[giulym]

I'm interested in the solution for the 1.7.5.1 version, please...

[Manu-41]

une solution pour la 1.7?

I'm interested in the solution for the 1.7 please?

not axis x ou y

Edited July 13, 2020 by Manu-shop (see edit history)

[pranab13]

On 7/21/2018 at 8:56 AM, maciekmaster said:

Ok i solved this problem by myself.

Thanks for help.

 

Regards

Can you share your solution please ?

[anuj.anuj555]

On 1/7/2021 at 2:53 PM, pranab13 said:

Can you share your solution please ?

in theme.js change direction h to v and also set distance : 1. and make some css 


 

Edited May 19, 2021 by anuj.anuj555 (see edit history)