Simple Jquery Gallery Question

I am new to Jquery and and trying to build a simple gallery. I know there is lots of plugins, but I don't want to use any of them. my question is very simple. how can I fade in image when click on thumb. also how can I achieve auto fadeIn and Out. I will really appreciate any response. thanks

here is my code.

//HTML

<div class="LargeImage">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div class="thumbsImages">
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
</div>

// JavaScript

$(document).ready(function() {
开发者_JS百科
    var LargeImages = $(".LargeImages").children();
    var SmallImages = $(".thumbsImages").children();


    SmallImages.each(function() {

        SmallImages.click(function() {

            LargeImages.each(function() {

                // I have problem here with logic           
            });

            $(this).addClass("active");
            $(this).siblings().removeClass("active");

        });
    });
});

You don't want to call SmallImages.click(...) within the SmallImages.each(...), you'll end up hooking the click event on each image multiple times. (click hooks the handler up to all matching elements inside the jQuery instance you call it on.)

Here's a basic way to do what you're doing without the extra divs:

HTML:

<div class="LargeImage">
</div>
<div class="thumbsImages">
<img class="thumb"
     src='http://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG'
     data-fullsize='http://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=123&d=identicon&r=PG'>
<img class="thumb"
     src='http://www.gravatar.com/avatar/92e9e88f33ab596fa1caaf237a4d5fad?s=32&d=identicon&r=PG'
     data-fullsize='http://www.gravatar.com/avatar/92e9e88f33ab596fa1caaf237a4d5fad?s=123&d=identicon&r=PG'>
<img class="thumb"
     src='http://www.gravatar.com/avatar/c3203aa647aeb214c463c59f1af2c38f?s=32&d=identicon&r=PG'
     data-fullsize='http://www.gravatar.com/avatar/c3203aa647aeb214c463c59f1af2c38f?s=128&d=identicon&r=PG'>
</div>
</div>

JavaScript:

jQuery(function($) {

  // Look up the large image once and remember it
  var largeImage = $(".LargeImage");

  // Hook the click event on the thumbnails
  $(".thumbsImages img").click(function() {
    var fullsize, hasImage;

    // Get the full size version from the attribute
    fullsize = $(this).attr("data-fullsize");

    // Flag up whether there's current an image in the large area
    hasImage = largeImage.find('img').length == 0;

    // Fade out whatever's there, then fade in the new image;
    // the `hasImage` check just makes the fadeOut really fast if
    // there's nothing showing.
    largeImage.fadeOut(hasImage ? 0 : 250, function() {
      largeImage.html("<img src='" + fullsize + "'>").fadeIn(250);
    });

  });

});​

Live example

Basically, what I'm doing there is storing the URL of the full size version in the img element for the thumbnail as data-fullsize (the data- prefix means that the attribute will validate under HTML5; prior to HTML5 there's no official way to have your own attributes, but browsers allow it even though it's technically invalid). Then, when the user clicks an image, we fade out whatever's showing in the big div, then replace it with the full-size image and fade in.

An idea of what you should do:

$(document).ready(function()
{
    $('.thumbsImages').click(function()
    {
    var index = $('.active').prevAll('div').length; //number of previous siblings
    $('.LargeImage').find('div:eq('+index+')').fadeOut(500); //hide the actual showed element

    $('.active').removeClass("active"); //remove the active class
            $(this).addClass("active"); //add class to the actual clicked item

            index = $(this).prevAll('div').length; //number of previous siblings
    $('.LargeImage').find('div:eq('+index+')').fadeIn(500); //show the actual selected image
    });
});

It's not a really optimized code. But it's simple to understand. ;)

I don't know if it's what you´re needing, but I hope it helps!