Jump to content

Vertical product/item thumbnails instead of horizontal?


Recommended Posts

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. :)

36886_C9iJHvajMGdPUuUCJYGo_t

36887_Dgf9uKTVoSYjHsHXFc0D_t

Share this post


Link to post
Share on other sites

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! :)

Share this post


Link to post
Share on other sites
  • 1 month later...

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!



  • Like 5

Share this post


Link to post
Share on other sites
  • 1 month later...

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

  • Like 1

Share this post


Link to post
Share on other sites
  • 3 months later...

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
  • 1 month later...
  • 7 months later...

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

Share this post


Link to post
Share on other sites
  • 2 months later...

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.

Share this post


Link to post
Share on other sites
  • 3 months later...
  • 6 months later...
  • 2 months later...

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.

Share this post


Link to post
Share on other sites
  • 4 weeks later...

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 barpost-380355-0-23621600-1375271866_thumb.jpg

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
  • 3 months later...

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

Share this post


Link to post
Share on other sites
  • 1 month later...

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!! : )

Share this post


Link to post
Share on other sites
  • 3 weeks later...
  • 9 months later...

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'); 

Share this post


Link to post
Share on other sites
  • 1 year later...

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 by blerimkamir (see edit history)

Share this post


Link to post
Share on other sites
  • 2 months later...
  • 1 year later...
  • 4 months later...
  • 2 months later...
  • 1 year later...
  • 5 months later...
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 ?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More