fancybox 2 iframe loading issue

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>