Jump to content

Vertical product/item thumbnails instead of horizontal?


Recommended Posts

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 by RasdyCute (see edit history)
Link to comment
Share on other sites

  • 2 weeks later...

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);
}
Link to comment
Share on other sites

  • 6 months later...

 

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

Link to comment
Share on other sites

×
×
  • Create New...