Flawless Mind

Mohamed Jama

  • 12:18:35 pm on March 4, 2009 | # | 1
    Tags:

    Hey everyone.

    I’ve done a little small image gallery using jQuery, I don’t think i’ll use it in any of my projects so I though to myself what the hell just put it out there it might help someone…

    I been meaning to write down some tutorials and how-to’s but I realized how crap I am at this so I’ll just go through some parts of the code and then offer everything ready to be downloaded!!

    The script in action >–> Demo

    It’s pretty simple this is the jQuery code, I tried to comment bits and pieces

    Doc ready part

    Slide = {};

    jQuery(document).ready(function()
    {
    if ( jQuery( '#stage' )) Slide.App.setup();
    Slide.App.Thumbs.find("img").hide();

    });

    Main setting and setup

    Thumbs: null,
    Stage: null,
    BigImage: null,
    ele : null,

    setup: function()
    {
    Slide.App.Stage = jQuery('ul#stage');
    Slide.App.Thumbs = jQuery('.preloader');

    //setup events
    Slide.App.Thumbs.bind( 'mouseenter', Slide.App.mouseenter );
    Slide.App.Thumbs.bind( 'mouseleave', Slide.App.mouseleave );
    Slide.App.Thumbs.bind( 'click', Slide.App.hit );
    },

    Mouseenter event

    mouseenter: function()
    {
    ele = jQuery(this);
    ele.animate({ width :"70px" }, function(){ ele.find("img").fadeIn("fast"); });
    if( Slide.App.BigImage ) { Slide.App.BigImage.remove();}

    },

    Mouseleave event

    mouseleave: function()
    {
    ele.find("img").hide();
    ele.animate({ width :"20px" });

    },

    I am gonna leave the html and the css for you guys to style up however you want but its all included in SlideySlide

     

Comments

  • Sanjoy Ganguly 8:46 am on December 29, 2009 | #

    Demo link broken

Leave a Comment