Vertical product/item thumbnails instead of horizontal?

[RasdyCute]

Hello guys I want to ask if you have ever done, vertical product/item thumbnails instead of horizontal in product page? in prestashop 1.6.0.14, also thanks in advance

 

[kishoreunni]

I think u should change it through codes in product.tpl ,product.css and may be in global.css.

 

I hope it may help you.

[RasdyCute]

I have already do that.. but still nothing happens on my side... hope there is a way to make it

[NemoPS]

Did you clear cache after modifying the template? How did you modify the code?

[RasdyCute]

I found a answer but still not working

https://www.prestashop.com/forums/topic/87236-vertical-productitem-thumbnails-instead-of-horizontal/page-2

 

but still not working on prestashop 1.6.0.14

[NemoPS]

But what did you modify, exactly?

[RasdyCute]

product.js

 

change axis:'x' to axis:'y'.

 

I change all outWidth to outerHeight

 

and some css in product.css

[NemoPS]

You need to modify product.tpl as well as mentioned above

[RasdyCute]

Guys please help me regarding on this problem... because it really matters... because this problem might help th other developers in this problem..

thanks in advance

[NemoPS]

?
We are trying to help, did you apply those changes to product.tpl too? They are also mentioned in the thread you linked

[RasdyCute]

I get it now:

Just change the product.css:

 

 

#thumbs_list li img {
        -ms-transform: rotate(270deg);
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
      border: 1px solid #f5f5f5; }

 

.pb-left-column #views_block {
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-top: 10px;
}

 

 

then change the margin what place do you want to place the thumbnails

Edited April 18, 2015 by RasdyCute (see edit history)

[Start Online Design]

Here is what you should do for 1.6 versions:

 

1. edit product.js and change axis "x" to "y" by replacing

 

this code:

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,

step: 2,

lazy: true,

lock: false,

force:false,

cycle:false

});

 

with this code:

if (!!$.prototype.serialScroll)

$('#thumbs_list').serialScroll({

items:'li:visible',

prev:'#view_scroll_left',

next:'#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

});

 

 

 

 

 

2. edit product.css and put the code bellow:

 

#image-block {

width:75% !important;

float:right;

}

 

#views_block {

  float: left !important;

  width: 20% !important;

  margin-top: 0px !important;

}

 

 

 

#thumbs_list {

max-width:100% !important; 

height:285px !important;

margin-top:10px;

}

 

#thumbs_list ul#thumbs_list_frame {

max-width:100% !important; 

height:285px !important;

overflow:visible !important;

}

 

.view_scroll_spacer, .carousel-controls {

top: 0px !important;

}

 

span.view_scroll_spacer .carousel-control.left {

  left: 55px !important;

   top: -25px !important;

   -ms-transform: rotate(90deg);

        -webkit-transform: rotate(90deg);

        transform: rotate(90deg);

}

 

span.view_scroll_spacer .carousel-control.right {

  left: 55px !important;

  top: 295px !important;

  -ms-transform: rotate(90deg);

        -webkit-transform: rotate(90deg);

        transform: rotate(90deg);

}

[babyewok]

 

Here is what you should do for 1.6 versions:

 

1. edit product.js and change axis "x" to "y" by replacing

 

this code:

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,

step: 2,

lazy: true,

lock: false,

force:false,

cycle:false

});

 

with this code:

if (!!$.prototype.serialScroll)

$('#thumbs_list').serialScroll({

items:'li:visible',

prev:'#view_scroll_left',

next:'#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

});

 

 

 

 

 

2. edit product.css and put the code bellow:

 

#image-block {

width:75% !important;

float:right;

}

 

#views_block {

  float: left !important;

  width: 20% !important;

  margin-top: 0px !important;

}

 

 

 

#thumbs_list {

max-width:100% !important; 

height:285px !important;

margin-top:10px;

}

 

#thumbs_list ul#thumbs_list_frame {

max-width:100% !important; 

height:285px !important;

overflow:visible !important;

}

 

.view_scroll_spacer, .carousel-controls {

top: 0px !important;

}

 

span.view_scroll_spacer .carousel-control.left {

  left: 55px !important;

   top: -25px !important;

   -ms-transform: rotate(90deg);

        -webkit-transform: rotate(90deg);

        transform: rotate(90deg);

}

 

span.view_scroll_spacer .carousel-control.right {

  left: 55px !important;

  top: 295px !important;

  -ms-transform: rotate(90deg);

        -webkit-transform: rotate(90deg);

        transform: rotate(90deg);

}

 

 

How would I set the thumbs back to horizontal for screens under 768px? I can handle the css part, but the js doesn't work as it is set to y axis rather than x

[babyewok]

Hmm, just answered my own question!  A quick google pointed out I can set BOTH axes, so I set axis:'yx' (with y being the default).  All works fine now...yay!