Lastes Products - Homepage - MOD jQuery thumbnail scroller

[chuliano]

Lastes Product - Homepage Scroller - MOD jQuery thumbnail scroller

 

This is a MOD for "LATEST PRODUCTS" in Homepage, will make display a thumbnail list with a slider of the latest products!!!

 

FIRST

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

 

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

{$STORE_URL}/js/thumbnailscroller/

 

and put in there the plugin thumbnail-scroller-master.

 

3 - Edit file "skinsyourthemetemplatescontent.homepage.php"

 

find this code and add after

 

{if isset($LATEST_PRODUCTS)}
<!-- PUT HERE -->

Like this

{if isset($LATEST_PRODUCTS)}
    <!-- Custom scroller -->
    <link rel="stylesheet" href="{$STORE_URL}/js/thumbnailscroller/jquery.mThumbnailScroller.css" /> <!-- Create a folder for the plugin ThumbnailScroller jquery -->
    <style>
#my-thumbs-list{
padding: 5px 50px; /* modified as you like */
background-color: transparent; /* modified as you like */
   overflow: auto;
   width: 735px; /* modified as you like */
   height: 250px; /* modified as you like */
   }

</style>
<script src="{$STORE_URL}/js/thumbnailscroller/jquery.mThumbnailScroller.js"></script> <!-- Create a folder for the plugin ThumbnailScroller jquery -->

Save file.

 

4 - Find this code  

  <h2>{$LANG.catalogue.latest_products}</h2>
<!-- PUT HERE -->
  {foreach from=$LATEST_PRODUCTS item=product}

 and add put between this

<h2>{$LANG.catalogue.latest_products}</h2>
<!-- this code -->
<div id="my-thumbs-list">
  <ul> 
   <li><!-- this code -->
{foreach from=$LATEST_PRODUCTS item=product}

 

 

Find this line in the end of file.

 

</form>
  </div>
<!-- HERE -->
  {/foreach}
​<!-- AND HERE -->
</div>
{/if}

And put between this code or replace for whole code

 

</form>
  </div>
<!-- THIS CODE -->
<script>
    (function($){
        $(window).load(function(){
            $("#my-thumbs-list").mThumbnailScroller({
              axis:"x", //change to "y" for vertical scroller
              type:"click-100",
              theme:"buttons-out"
            });
        });
    })(jQuery);
</script>
  {/foreach}  
<!-- THIS CODE -->
</li>
  </ul>
  </div>
</div> {/if}

and this is all !!!

i hope you like it!!

 

Please comment. and if try this please make a suggestion!!!

 

Saludos desde Argentina!