1

i'm having an issue with fancybox 2 on my recently launched website.

i use links on my pages to open galleria (galleria.io) galleries and PDF files in a fancybox lightbox. for the photo galleries (galleria), i load another webpage in the fancybox iframe and i am defining explicit thumbnail images so all the full size pics don't have to load immediately. for PDF content, i load the PDF file directly in the iframe.

however, more often than not, the first time a link is clicked the iframe does not appear (perpetual loading animation). closing the fancybox and clicking the link again loads the content fine. this happens for both galleria and PDF content.

i developed and tested the site mainly in FF but seems like the issue occurs in IE also.

after scouring the interwebs for an answer, the closest questions i have found are the following at stackoverflow:

/questions/4710023/jquery-fancybox-working-but-only-when-you-click-this-image-twice

(tried swapping terms like with the solution posted here, but results in 404 inside the iframe)

/questions/9779250/fancybox-2-requires-two-click

(not enough info)

/questions/14819642/fancybox-stuck-loading-iframe-in-ie

(refers to IE but disabling preload sounds promising and i'm about to give it a shot)

i'm a home-builder, not a code-builder, so i'm sure i've done something wrong along the way in buiding my site. i'd appreciate any help offered! thanks!

links to examples:

(in dev) gallery page : http://www.sonahomes.com/gallery/

(live) main page : http://www.sonahomes.com [above the footer on the main page there are "featured listings" with links to PDFs and photo galleries...the listing on the far right loads a gallery with 19 photos]

code:

link to open PDF in iframe:

<a href="...pdf file..." class="various">
  <p><img src="...icon..." class="icon" />PDF Flyer</p>
</a>

link to open galleria gallery in iframe:

<a href="...link to page with galleria..." class="various">
  <img src="...small image..." class="thumb1" />
  <div>
    <p><img src="...icon..." class="icon" />19 Photos</p>
  </a>
  </div>

(i know that the additional div in the galleria link above is not exactly correct but i don't think it's related to the issue because the same problem happens on the gallery page linked above which just has text links)

initialize on pages using fancybox:

<body>
<script type="text/javascript">
$(document).ready(function() {
  $(".various").fancybox({
    autodimensions : false,
    autoSize : false,
    fitToView : false,
    type : 'iframe',
    });
});
</script>
JFK
  • 40,963
  • 31
  • 133
  • 306
pesh
  • 11
  • 1
  • 3
  • 2
    I think `iframe: { preload: false }` as in http://stackoverflow.com/questions/14819642/fancybox-stuck-loading-iframe-in-ie is your best bet – JFK Apr 05 '13 at 19:46
  • 1
    Check http://jsfiddle.net/6hSNh/1/ – JFK Apr 05 '13 at 19:54
  • Thanks JFK, I'll check the jfiddle when I get back in front of a pc. Would you happen to have any idea if I should do anything beyond clearing browser cache before testing? ...once an iframe loads (after open-close) it seems to work fine for a little bit – pesh Apr 06 '13 at 01:17
  • 2
    JFK, I see on the jfiddle you have incorporated the fix suggested in questions/14819642. I have just added it to my site code and (after clearing browser cache) have not had the problem yet. I think that did the trick! ...but I'll check back from time to time to make sure. As I had hoped, deactivating preload also allows the user to see download progress when viewing a PDF. I don't see any way to give you a +1 or otherwise show my appreciation for your help so I hope a simple Thank You is enough! – pesh Apr 06 '13 at 21:30
  • 2
    A simple Thank You is enough indeed. – JFK Apr 06 '13 at 22:00

0 Answers0