Kurouto Skin FIX, gallery to many image

[chuliano]

Kurouto Skin FIX, gallery to many image 

UPDATE 11-12-2014 jQuery custom content scroller

i try to put over 15 images to X product, and the images of gallery go over the div.

 

this is my solution. (sorry for my bad english)

 

in the Kurouto Skin "styles" folder,

 

and Edit file "common.css"

 

find id "#gallery_select" and replace with this code:

 

#gallery_select {
   float: left;
   text-align: center;
   width: 80px;
   overflow: auto;
   height: 300px; // height you wish...
}

i hope this is useful for someone. 

 

Including the Custom content scroller:

 

Example in skin Kurouto MOD  

 

1 - Downloading plugins from: LINK http://manos.malihu.gr/jquery-custom-content-scroller/

(there have many themes you can use!! LINKS Themes!)

 

2 - Create a folder in your store, i prefer this location. (for best organization)

 

{$STORE_URL}/js/customscroller/

 

and put in there the plugin custom scroller.

 

3 - Edit file "skinsyourthemetemplatescontent.product.php"

 

find this code and add before 

<script type="text/javascript">
var gallery_json = {$GALLERY_JSON}
</script>

This Code

    <!-- Custom scroller -->    <link rel="stylesheet" href="{$STORE_URL}/js/customscroller/jquery.mCustomScrollbar.css" /> <!-- Create a folder for the plugin custm scroller jquery -->
    <style>
#gallery_select{ height: 300px; width: 80px; }
/*#gallery_select{ height: 80px; width: 580px; }
#gallery{ height: 400px; }*/ /*if you like horizontal gallery */
</style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><!-- Only if you dont load before -->
    <script src="{$STORE_URL}/js/customscroller/jquery.mCustomScrollbar.js"></script> <!-- Create a folder for the plugin custm scroller jquery -->
<script>
$("#gallery_select").mCustomScrollbar(
{
snapAmount:60,
scrollInertia:100,
     autoHideScrollbar: true,
axis:"y", // axis:"x", if you like horizontal gallery
theme:"inset-2-dark",
advanced:{
autoExpandHorizontalScroll:true
},
scrollButtons:{
enable:true
},
}
);
</script>
    <!-- Custom scroller -->
 <script type="text/javascript">
var gallery_json = {$GALLERY_JSON}
 </script>

wala!