• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4521
  • Last Modified:

Setting width & height to iframe content Jquery FancyBox

Hi

I'm attempting to display PHP file inside a fancybox iframe
the PHP file takes the href of an image & displays it.

Well that's the theory how do set the width & height of the iframe to match the image?

At the moment no matter what size image I send the iframe is the same size so i either get a small image inside it with loads of white space  or part of a large image with scroll bars

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
      <!-- Add jQuery library -->
&#9;<script type="text/javascript" src="/fancyBox-2.0.6/lib/jquery-1.7.2.min.js"></script>
    <!-- Add mousewheel plugin (this is optional) -->
    <script type="text/javascript" src="/fancyBox-2.0.6/lib/jquery.mousewheel-3.0.6.pack.js"></script>

    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="/fancyBox-2.0.6/source/jquery.fancybox.js?v=2.0.6"></script>
    <link rel="stylesheet" type="text/css" href="fancyBox-2.0.6/source/jquery.fancybox.css?v=2.0.6" media="screen" />

    <!-- Add Button helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="fancyBox-2.0.6/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" />
    <script type="text/javascript" src="/fancyBox-2.0.6/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>

    <!-- Add Thumbnail helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="fancyBox-2.0.6/source/helpers/jquery.fancybox-thumbs.css?v=1.0.2" />
    <script type="text/javascript" src="/fancyBox-2.0.6/source/helpers/jquery.fancybox-thumbs.js?v=1.0.2"></script>

    <!-- Add Media helper (this is optional) -->
    <script type="text/javascript" src="/fancyBox-2.0.6/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>      
    
    
    <script type="text/javascript">
     $(document).on('click', '.Images', function(e) {
    e.preventDefault();
    var Href = 'GetImg.php?img=' + $(this).attr("href");
    //alert(Href);
    $.fancybox.open({
         type: 'iframe', 
        width: 'auto',
        height: 'auto',
        type: 'iframe',
        padding: 5
    });
}); // ready 
    
    </script>     
 
  </head>
  <body>
              
              <p>
             <a class="Images" href="/Images/MyBigPic.jpg" title="A witty Title">Send to PHP</a>
              </p>
  </body>
</html>

Open in new window



GetImg.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Holly Gibbons</title>
<script type="text/javascript" src="fancyBox-2.0.6/lib/jquery-1.7.2.min.js"></script>
    
      <script type="text/javascript" src="/js/ddpowerzoomer.js"></script>    
    <script type="text/javascript">
    jQuery(function($){
    &#9;$('#image3').addpowerzoom({
    &#9;&#9;defaultpower: 2,
    &#9;&#9;powerrange: [2,5],
    &#9;&#9;largeimage: null,
    &#9;&#9;magnifiersize: [100,100] //<--no comma following last option!  
    &#9;}); 
    });
    </script>
  </head>
  <body>
  <?php 
  $my_img = $_GET['img'];
  ?>
<p> <img id="image3" src = <?php echo $my_img ?> /></p>
</html>

Open in new window

0
trevor1940
Asked:
trevor1940
  • 2
  • 2
1 Solution
 
Julian HansenCommented:
Here is some code I found on the net somewhere. I am using it in one of my projects. I have commented out the Opera / Safari kickstart bit but you can play around with that.
Replace IFRAMEID with the id of your IFrame. This code goes in the file that is opening the Iframe.
$(function() {
  $('iframe').load(function() {
    document.getElementById('IFRAMEID').style.height = document.getElementById('IFRAMEID').contentWindow.document.body.offsetHeight + 'px';
    setTimeout(iResize, 50);
    // Safari and Opera need a kick-start.
    var iSource = document.getElementById('IFRAMEID').src;
    document.getElementById('IFRAMEID').src = '';
    document.getElementById('IFRAMEID').src = iSource;
  });
});

function iResize() {
    document.getElementById('IFRAMEID').style.height = document.getElementById('IFRAMEID').contentWindow.document.body.offsetHeight + 'px';
}

Open in new window

0
 
trevor1940Author Commented:
Hi

My question is spasifically about setting  the height & width of a fancybox ifrrame the iD of which is generated by fancybox

Document.getElementById will not work because the ID dosn't exist untill the fancyboox is called
0
 
Julian HansenCommented:
0
 
trevor1940Author Commented:
not actuly resolved
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now