Fancybox iframe location problems

Dev Shed Forums Sponsor:

October 5th, 2012, 03:17 PM

dstudentx

Registered User

Join Date: Oct 2012

Posts: 1

Time spent in forums: 14 m 56 sec
Reputation Power: 0

Fancybox iframe location problems

I'm trying to open a iframe using fancybox and the iframe only opens down low on the window. How can I get it centered? also if I don't allow scrolling the iframe only shows a small part of the html which is being called.

Code:

<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6 ie" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7 ie" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8 ie" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head> 
<link rel="stylesheet" type="text/css" href="includes/header.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.1"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.4"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.4"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript" src="includes/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.1" type="text/css" media="screen" />
<script type="text/javascript">



$(document).ready(function(){ 

	
	// Gallery
	if(jQuery("#gallery").length){
	
		
		jQuery("#gallery li a").fancybox({
			'titleShow'		: false,
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic'
		});
		
		
		
		// Variables aren't use properly due to Webkit
		var totalImages = jQuery("#gallery > li").length, 
			imageWidth = jQuery("#gallery > li:first").outerWidth(true),
			totalWidth = imageWidth * totalImages,
			visibleImages = Math.round(jQuery("#gallery-wrap").width() / imageWidth),
			visibleWidth = visibleImages * imageWidth,
			stopPosition = (visibleWidth - totalWidth);
			
		jQuery("#gallery").width(totalWidth);
		
		jQuery("#gallery-prev").click(function(){
			if(jQuery("#gallery").position().left < 0 && !jQuery("#gallery").is(":animated")){
				jQuery("#gallery").animate({left : "+=" + imageWidth + "px"});
			}
			return false;
		});
		
		
		
		jQuery("#gallery-next").click(function(){
			if(jQuery("#gallery").position().left > stopPosition && !jQuery("#gallery").is(":animated"))
			{
				jQuery("#gallery").animate({left : "-=" + imageWidth + "px"});
			}
			return false;
		});
	}
		
});

</script>

</head>

<body>

            <img src="header2.png" width="401" height="55">       
  <div id="gallery-controls">
            	<a href="#" id="gallery-prev"><img src="http://css-plus.com/examples/2010/09/jquery-image-slider/images/prev.png" alt="" /></a><a href="#" id="gallery-next"><img src="http://css-plus.com/examples/2010/09/jquery-image-slider/images/next.png" alt="" /></a>
            </div>


 
            <div id="gallery-wrap">
                <ul id="gallery">                                 
               		<li>
                    
                    
                    <a class="iframe" href="index1.html">
                    <img src="MAIN_IMAGES/ZOOM_FORCE_1.jpg" BORDER= 0 (iframe)/>
                    </a>
                    </li>
                    <li><a href="images/image2-big.jpg"><img src="MAIN_IMAGES/MERCURIAL_SUPERFLY.jpg" alt="" /></a></li>
                    <li><a href="images/image2-big.jpg"><img src="MAIN_IMAGES/AIRMX.jpg" alt="" /></a></li>
                    <li><a href="images/image2-big.jpg"><img src="MAIN_IMAGES/JOAKIM NOAH.jpg" alt="" /></a></li>  
                    <li><a href="images/image2-big.jpg"><img src="MAIN_IMAGES/GYZIRO.jpg" alt="" /></a></li>
                    <li><a href="images/image2-big.jpg" ><img src="MAIN_IMAGES/AIRMAX 90.jpg" BORDER= 0 alt="" /></a></li>
                    <li><a href="images/image2-big.jpg"><img src="MAIN_IMAGES/ORIGINALS.jpg" alt="" /></a></li>
                    <li><a href="images/image2-big.jpg"><img src="MAIN_IMAGES/CORTEZ FLYMOTION.jpg" alt="" /></a></li>               
                    <li><a href="images/image2-big.jpg"><img src="MAIN_IMAGES/ARTHUR ASHE.jpg" alt="" /></a></li>   
                    <li><a href="images/image2-big.jpg"><img src="MAIN_IMAGES/STUSSY DUNK TRAINER.jpg" alt="" /></a></li>
                    <li><a href="images/image2-big.jpg"><img src="MAIN_IMAGES/AIR MAX 1.jpg" alt="" /></a></li>                    
                   
                </ul>
            </div>
           
</div>

</body>
</html>

Fancybox iframe location problems

Developer Shed Advertisers and Affiliates