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未缩小版本的链接，我会看看。

如何防止当前显示的最后一个视图中的图像？

1 个答案: