CODEWITHSUNDEEP
jqueryfancybox
user1366886
user1366886

Reputation: 1

jquery fancybox 1.3.0 iframe

I am have some difficulty getting an iframe to load in an overlay. My user level is competent html 5 css3 xhtml and can read php and JavaScript. I was able to get youtube video to play in lightbox_frame and iframe. but had no joy with getting an html page into an iframe in an overlay. I was reading on fancyapps and what the example was is: Iframe

so adapted below.

<div class="portfolio3_shadow">
 <a class="various" data-fancybox-type="iframe" href="page_slideshow">
<img src="../images/slideshow.png" alt=""  width="210" height="131"/></a>

<img src="../images/icon_zoom.png" style="margin-top:-30px;margin-left:86px;z-index:9999" alt=""/></div>
<div style="display:none;">
  <div id="page_slideshow" style="width:840px;height:600px">   
<iframe width="840" height="600" src="slideshow.html" frameborder="0" allowfullscreen></iframe> </div>  
    </div>

Upvotes: 0

Views: 899

Answers (1)

thegauraw
thegauraw

Reputation: 5708

Rather than defining an iframe, you can mention type: iframe to get the contents as iframe in fancybox.

<a href="slideshow.html" id="popup">Open page</a>

and in script you can mention:

<script>
  $(document).ready(function(){
    $('#popup').fancybox({
        'zoomSpeedIn': 300,
        'zoomSpeedOut': 300,
        'overlayShow': false,
        'autoScale': false,
        'type': 'iframe',
        'centerOnScroll':true
      });
  });
</script>

This will show the contents of the page as iframe in overlay.

Upvotes: 2

Related Questions