Question

我在WordPress中使用图片库，图片从数据库中提取并显示在前端。

在我的情况下是一个大图像容器和三个图像缩略图，

我想，当我点击图像的缩略图时，容器中的前一个图像逐渐消失，然后点击图像设置到图像容器中。

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

   });

请帮我解决这个问题。

Answer 1

尝试使用此代码：

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

你在链接上添加了太多点。此外，不需要删除功能。

你在href的＃wl-poster-link上忘记了一个开头。修复此问题。

使用图像库淡出淡出问题

1 个答案: