Jump to content

Lastes Products - Homepage - MOD jQuery thumbnail scroller


chuliano

Recommended Posts

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!
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...