Fade In Fade Out Проблема с галереей изображений

Question

Я использую галерею изображений в WordPress, изображения извлекаются из базы данных и отображаются во внешнем интерфейсе.

В моем случае это большой контейнер изображений и миниатюра трех изображений,

Iхочу, когда при нажатии на миниатюру изображения предыдущее изображение, которое в контейнере исчезает, и щелкает изображение, установленное в контейнер изображения.

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

Вы слишком много добавили в цепочку. Кроме того, функция удаления не нужна.

Вы забыли начало "в # wl-poster-link для href. Исправьте это тоже.