Fade In Fade Out Problem with a Image Gallery

Question

I am using a image gallery in WordPress, images are fetching from database and displaying it into front end.

In my case a big image container, and three image thumbnail,

I want, when when i click on the thumbnail of the image the previous image which in container goes fade out and clicked image set in to image container.

My Html Markup

<!--A container Div which have 1st image from the thumbnail-->
        <div class="wl-poster">
            <a href=#" id="wl-poster-link">
                <img id="poster-main-image" src="/wp-content/uploads/2010/09/Ruderatus_farm.jpg">
            </a>
        </div>

        <!--For Thumbnails-->
        <div id="wl-poster-thumb">
              <ul id="posterlist">
                  <li class="poster-thumb">
                      <img alt="Thumbnail" src="/wp-content/uploads/2010/09/Ruderatus_farm.jpg" rel="http://www.cnn.com/"&gt;
                  </li>                
                  <li class="poster-thumb">
                      <img alt="Thumbnail" src="/wp-content/uploads/2010/09/3047006581_1eec7f647d.jpg" rel="http://yahoo.com"&gt;
                  </li>
                  <li class="poster-thumb" style="margin-right: 0pt;">
                      <img alt="Thumbnail" src="/wp-content/uploads/2010/09/lush-summer-louisville-kentucky-wallpapers-1024x768.jpg" rel="http://apple.com"&gt;
                  </li>                
              </ul>
        </div>

Used jQuery

 if(jQuery('.homepage-poster').length > 0){ // since this will return a empty
           var img_src = jQuery("#wl-poster-thumb ul li:first img").attr('src');
           var href_path = jQuery("#wl-poster-thumb ul li:first img").attr('rel');
           var final_src = img_src.replace(/&h=.+/gi, '&h=380&w=450&zc=1');
           jQuery('.wl-poster img').attr('src',final_src);
           jQuery('.wl-poster a').attr('href',href_path );
    }

jQuery('#posterlist .poster-thumb img').click(function(){
       var href_path =  jQuery(this).attr('rel');
       var img_src = jQuery(this).attr('src');
       var final_src = img_src.replace(/&h=.+/gi, '&h=380&w=450&zc=1');
        jQuery('#poster-main-image').remove(function() {
           jQuery('a#wl-poster-link').attr('href',href_path);
           jQuery('#poster-main-image').attr('src',final_src)..fadeOut('slow').fadeIn('slow');
          // $('#img1').fadeOut('slow').remove();
//            $('#img1').fadeOut('slow').fadeIn('slow');
         });

   });

Please help me to solve this issue.

Answer 1

Hi saorabh,

try it with this code:

jQuery('#wl-poster-link').attr('href', href_path);
jQuery('#poster-main-image').fadeOut('slow').attr('src',final_src);
//wait till image has loaded, you could think about a loading-gif laying above your image-container..
jQuery('#loading').show(); //or fadeIn

jQuery('#poster-main-image').load(function() { jQuery('#loading').hide(); jQuery(this).fadeIn('slow'); });

You added a point too much on your chaining. Also, the remove-function is not needed.

You forgot a beginning " on your a#wl-poster-link for the href. Fix this too.