图片库的淡入淡出问题

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.

你忘记在你的 a#wl-poster-link 上为 href 加上一个开头.也解决这个问题.

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

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