图像库的淡入淡出问题 [英] Fade In Fade Out Problem with a Image Gallery

问题描述

我正在WordPress中使用图片库，图片正在从数据库中获取并显示在前端.

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.

我的HTML标记

<!--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/">
                  </li>                
                  <li class="poster-thumb">
                      <img alt="Thumbnail" src="/wp-content/uploads/2010/09/3047006581_1eec7f647d.jpg" rel="http://yahoo.com">
                  </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">
                  </li>                
              </ul>
        </div>

使用的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');
         });

   });

请帮助我解决此问题.

推荐答案

尝试以下代码:

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.

您在href的a#wl-poster-link上忘记了开头.也请解决此问题.

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

这篇关于图像库的淡入淡出问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！