0
我正在使用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;
});
任何帮助表示赞赏。
谢谢!
嗨,尼克。这是朝着正确方向迈出的一步。请看看这个页面,并试试看。它现在的功能是清除值,以便只显示缩略图时加载第二个屏幕。现在我们需要做的就是弄清楚如何获取第一张大图片。我非常感谢你的帮助。 – fmz 2011-03-24 17:36:39
对不起,反应慢。它看起来像你让它工作,但!不错的工作。很高兴我能帮上一点忙。 – 2011-03-25 20:20:55