如何防止當前顯示的最後一個圖像出現圖像？

Question

我正在使用jQuery在Fancybox彈出窗口中循環瀏覽一系列圖像：http://ee.rouviere.com/web/portfolio

要查看正在發生的事情，請單擊其中一個縮略圖圖像。在彈出窗口內點擊左側的縮略圖，它會在右側顯示相同圖像的更大視圖。這一切工作正常。但是，當您關閉該窗口並打開另一個窗口時，最後一個大圖像仍將顯示在新窗口中，直到您單擊另一個縮略圖。

我需要找到一種方法來從最後一個窗口「清除緩存」，當一個新窗口加載。

下面是本節中的HTML：

<div class="portfolio_popup_thumb"> 
     <a class="image-preview" href="#portfolio-frame-544"><img src="http://ee.rouviere.com/images/uploads/webPortFEC_thumb.jpg" alt="photo" /></a> 

     <p>Family Eye Care of Apex</p> 
</div> 

<div style="display:none;"> 
    <div id="portfolio-frame-544"> 
    <div class="frame"> 
     <div class="preview"> 
      <img class="photo_large" src="http://ee.rouviere.com/_photos/Family-Eye-Care-of-Apex-home-large.jpg" alt="Family Eye Care of Apex" /> 
     </div> 

     <div class="viewer"> 
      <div class="thumbs"> 
       <div class="thumb1"> 
        <a href="http://ee.rouviere.com/_photos/Family-Eye-Care-of-Apex-home-large.jpg" title="For Family Eye Care of Apex in Apex, North Carolina, we built a content management site that can be updated as new services are added and the company has expanded. The doctors in this practice wanted patients to have an easy on-line way to get information about specific eye conditions such as cataracts and low vision. The site also includes the capability to download patient forms, order contacts and glasses on-line, make on-line payments and schedule appointments. The site has google maps to the office location, google search within the site and search engine optimization. "><img src="http://ee.rouviere.com/_photos/Family-Eye-Care-of-Apex-home-portthumb.jpg" alt="Family Eye Care of Apex" class="web-port" /></a> 
       </div> 
                <div class="thumb2"> 
        <a href="http://ee.rouviere.com/_photos/Family-Eye-Care-of-Apex-exams-large.jpg" title="Family Eye Care of Apex also wanted patients to know what to expect before they have an eye exam. We created this slide show to walk them through the procedure. "><img src="http://ee.rouviere.com/_photos/Family-Eye-Care-of-Apex_portthumb.jpg" alt="Family Eye Care of Apex" class="web-port" /></a> 
       </div> 
                         <div class="thumb3"> 

        <a href="http://ee.rouviere.com/_photos/Family-Eye-Care-items-montage.jpg" title="We also have designed a large number of other items for Family Eye Care of Apex, including business and appointment scheduling cards, brochures, magazine and web banner ads, coupons and flyers. "><img src="http://ee.rouviere.com/_photos/Family-Eye-Care-brochure-portthumb.jpg" alt="Family Eye Care of Apex" class="web-port" /></a> 
       </div> 
                <div class="thumb4"> 
                 <p>Visit the website:</p> 
        <p class="site-url"><a href="http://www.familyeyecareofapex.com">http://www.familyeyecareofapex.com</a></p> 

       </div> 

      </div><!-- end thumbs --> 
      <div class="info-box"> 

       <p class="caption1">For Family Eye Care of Apex in Apex, North Carolina, we built a content management site that can be updated as new services are added and the company has expanded. The doctors in this practice wanted patients to have an easy on-line way to get information about specific eye conditions such as cataracts and low vision. The site also includes the capability to download patient forms, order contacts and glasses on-line, make on-line payments and schedule appointments. The site has google maps to the office location, google search within the site and search engine optimization. </p> 
      </div> 
      </div><!-- end frame --> 
     </div><!-- end portfolio frame --> 
    </div><!-- end viewer --> 
</div> 

這裏是驅動圖像換出了jQuery：

$("a:has(img.web-port)").click(function() { 
    var largePath = $(this).attr("href"); 
    var caption = $(this).attr("title"); 
    $(".photo_large").attr({ src: largePath}); 
    $(".caption1").text(caption); 
    return false; 
    }); 

任何幫助表示讚賞。

謝謝！

Answer 1

不知道究竟是如何看上箱的工作原理，這是我的猜測：

當您單擊看中箱內的圖像，你自定義的功能改變主圖像的src到點擊圖像的src。但是，當用戶單擊「關閉」按鈕時，我看不到任何代碼來清除大圖像的src。嘗試在有人點擊關閉按鈕時清除這些值。例如：

$("#fancybox-close").click(function(){ 
    $(".photo_large").attr({ src: ''}); 
    $(".caption1").text(''); 
}); 

這可以解決您的問題或導致圖像被破壞，具體取決於Fancybox的工作方式。

如果是更高版本，發佈一個鏈接到fancybox的未縮小版本，我會看看。