jQuery gallery above iframe - HELP!

**spookymix** · 08-24-2010, 01:03 AM

Someone please help. I'm having trouble placing my jQuery gallery to pop up on top of iframe. If you go to my site I'm developing:

http://www.calico9.com/C2/4.html

Click on the Lookbook on the lower menu tab
and
Spring/Summer Lookbook

You'll notice that the gallery (I'm using Fancybox http://fancybox.net/) is hiding in it's own iframe. I would like it to pop up above the frame. Is this possible or is there any alternative methods I can use to achieve this effect.

If you would like me to explain further please let me know.

Any help would be much appreciated. Thanks in advance

Mike

**jscheuer1** · 08-24-2010, 04:19 PM

Here's one way (runs from the jquery.fancybox-1.3.1 folder of the distribution archive):

iframe.htm:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script>
</head>
<body>
<iframe src="test.htm" width="300" height="300"></iframe>
<div id="fancyzone" style="display: none;">

</div></body>
</html>

test.htm:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript">
jQuery(function($) {
	if(top !== window){
		var $$ = parent.jQuery;
		$$('#fancyzone').html($('#fancycontent').html()).find('a').fancybox();
		$("#fancycontent a").click(function(e){e.preventDefault(); $$('#' + this.id).click();});
	} else {
		$("#fancycontent a").fancybox();
	}
	
});
</script>
</head>
<body>
<div id="fancycontent">
<a id="first" rel="group-1" href="./example/4_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="group-1" src="./example/4_s.jpg" /></a>
<a id="second" rel="group-1" href="./example/5_b.jpg" title="Cras neque mi, semper at interdum id, dapibus in leo."><img alt="group-1" src="./example/5_s.jpg" /></a>
</div>
</body>
</html>

**spookymix** · 08-24-2010, 06:46 PM

Thanks John...you're a genius!

How would I go about resizing the pop out window size. If you view my site under lookbook the pop out window is very small.

You're the best.

Mike

**jscheuer1** · 08-24-2010, 08:39 PM

I'm surprised it works at all, you haven't copied my code correctly.

But of what I had, this:

Code:

		var $$ = parent.jQuery;
		$$('#fancyzone').html($('#fancycontent').html()).find('a').fancybox();
		$("#fancycontent a").click(function(e){e.preventDefault(); $$('#' + this.id).click();});

Is what makes it work on the top page. I use the generic init highlighted above. But you have a more complex one. To mimic it, you would have to use it. The above can be opened up like so:

Code:

		var $$ = parent.jQuery;
		$$('#fancyzone').html($('#fancycontent').html());
		$$('#fancyzone a').fancybox();
		$("#fancycontent a").click(function(e){e.preventDefault(); $$('#' + this.id).click();});

This would make it easier to use your own init:

Code:

<script type="text/javascript">
jQuery(function($) {
	if(top !== window){
		var $$ = parent.jQuery;
		$$('#fancyzone').html($('#fancycontent').html());
		$$('#fancyzone #various3').fancybox({
			'autoScale'		: false,
			'transitionIn'		: 'fade',
			'transitionOut'		: 'fade',
			'type'			: 'iframe'
		});
		$$('#fancyzone #various4').fancybox({
			'padding'		: 10,
			'autoScale'		: false,
			'transitionIn'		: 'fade',
			'transitionOut'		: 'fade'
		});
		$('#fancycontent a').click(function(e){e.preventDefault(); $$('#' + this.id).click();});
	} else {
		$('#various3').fancybox({
			'autoScale'		: false,
			'transitionIn'		: 'fade',
			'transitionOut'		: 'fade',
			'type'			: 'iframe'
		});
		$('#various4').fancybox({
			'padding'		: 10,
			'autoScale'		: false,
			'transitionIn'		: 'fade',
			'transitionOut'		: 'fade'
		});
	}
});
</script>

**spookymix** · 08-24-2010, 10:13 PM

Almost there...but does not resize properly. Here's my code. Is it correct?

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script>

<script type="text/javascript">
jQuery(function($) {
	if(top !== window){
		var $$ = parent.jQuery;
		$$('#fancyzone').html($('#fancycontent').html());
		$$('#fancyzone #various3').fancybox({
										
		        'width'		 : '75%',
			'height'	  	 : '75%',
			'autoScale'		 : false,
			'transitionIn'	 : 'fade',
			'transitionOut'	 : 'fade',
			'type'			 : 'iframe'
		});
		$$('#fancyzone #various4').fancybox({
			'width'		 : '75%',
			'height'		 : '75%',
			'padding'		 : 10,
			'autoScale'		 : false,
			'transitionIn'	 : 'fade',
			'transitionOut'	 : 'fade'
		});
		$('#fancycontent a').click(function(e){e.preventDefault(); $$('#' + this.id).click();});
	} else {
		$('#various3').fancybox({
			'width'		 : '75%',
			'height'		 : '75%',
			'autoScale'		 : false,
			'transitionIn'	 : 'fade',
			'transitionOut'	 : 'fade',
			'type'			 : 'iframe'
		});
		$('#various4').fancybox({
			'width'		 : '75%',
			'height'		 : '75%',
			'padding'		 : 10,
			'autoScale'		 : false,
			'transitionIn'	 : 'elastic',
			'transitionOut'	 : 'elastic'
		});
	}
});
</script>


<style type="text/css">

</style>

</head>
<body>
<div id="fancycontent">
  <p><a id="various3" href="http://www.calico9.com/C2/lookbook2/index.html">SPRING/SUMMER LOOKBOOK</a>    </p>

  <p><a id="various4" href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf">SPRING/SUMMER VIDEO</a></p>
  </div>
</body>
</html>

Thanks for all the help

**jscheuer1** · 08-24-2010, 11:31 PM

I'll have a closer look at this later. But you have a script error on the top page. This may or may not be a factor:

Error: document.getElementById("hidepage") is null
Source File: http://www.calico9.com/C2/4.html
Line: 264

You are using a different version of Fancybox on the top page than in the iframe. You should be using version 1.3.1 on both pages.

If you take care of that, and it still works on the page in the iframe when viewed by itself, it should also work when loaded into the iframe.

Once we get that, I have an idea of how to condense the code to only require the options for each Fancybox trigger to be written out once.

**jscheuer1** · 08-25-2010, 04:23 AM

As promised, I've had a close look (in case you missed it, see my previous post). There is also an error on:

calico9.com/C2/lookbook2/index.html

Error: loadImages is not defined
Source File: http://www.calico9.com/C2/lookbook2/index.html
Line: 1

Not actually Line: 1, rather the body tag.

That should be fixed (either by removing it or supplying the missing function), but I don't think that's the problem.

I believe the main issues are the actual options used for the features, and the (as mentioned in my previous post) two versions of fancybox.

Anyways, this worked out well:

iframe_2.htm:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script>
</head>
<body>
<iframe src="test_2.htm" width="300" height="300"></iframe>
<div id="fancyzone" style="display: none;">

</div></body>
</html>

test_2.htm:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript">
jQuery(function($){
	var var3 = {
		'width'			: 1190,
		'height'		: 520,
		'scrolling'		: 'no',
		'autoScale'		: false,
		'transitionIn'		: 'fade',
		'transitionOut'		: 'fade',
		'type'			: 'iframe'
	}, var4 = {
		'padding'		: 10,
		'autoScale'		: false,
		'transitionIn'		: 'fade',
		'transitionOut'		: 'fade'	
	}, $$;
	if(top !== window){
		$$ = parent.jQuery;
		$$('#fancyzone').html($('#fancycontent').html());
		$$('#fancyzone #various3').fancybox(var3);
		$$('#fancyzone #various4').fancybox(var4);
		$("#fancycontent a").click(function(e){e.preventDefault(); $$('#' + this.id).click();});
	} else {
		$('#various3').fancybox(var3);
		$('#various4').fancybox(var4);
	}
});
</script>
</head>
<body>
<div id="fancycontent">
  <p><a id="various3" href="http://www.calico9.com/C2/lookbook2/index.html">SPRING/SUMMER LOOKBOOK</a>    </p>

  <p><a id="various4" href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf">SPRING/SUMMER VIDEO</a></p>
</div>
</body>
</html>

It would be nice if the various3 feature could itself scale (to its window or iframe), then we could use percentage for it instead of raw numbers (which work out to be pixels).

**spookymix** · 08-25-2010, 05:50 PM

Thanks John. It worked perfect. I can't thank u enough. I owe u one.

Mike

**spookymix** · 08-31-2010, 07:38 PM

Hi John it's me again. I was wondering if you could help me out with a couple more things.

First the lookbook section of my site (spring/summer lookbook):

http://calico9.com/C2/4.html

does not show the close button on the right corner as shown in the examples on the following link:

http://fancybox.net/

Also...the loading on the lookbook does not show the loading gif. Do you know what's wrong?

Another problem I'm having with my site is sometimes the pages on my site don't transition as smoothly as I would like...especially when on first visit.

I'm using a div with an animated gif that fades out when the page is done loading using jquery. Is there a better way to accomplish this? If you could please point me in the right direction that would be great.

Do you take any donations? You helped me allot and just want to buy you a beer or something. Thanks

Mike

**jscheuer1** · 09-01-2010, 12:26 AM

Last question first. I always accept donations. See below my signature on this and all of my posts. The last two links donate to me directly, the first four link to either of my two favorite charities.

Back to question one - the close link is looking for this image:

calico9.com/C2/fancybox.png

but it's a 404 not found.

This image should be in your fancybox distribution archive. But, if it is not (right click and 'save as'):

http://fancybox.net/js/fancybox/fancybox.png

then upload it to the C2 folder.

Something similar is undoubtedly happening with the loading image. It also wants the same image, it's a sprite (an image that displays differently depending upon how it's positioned as a background image - don't get scared, as long as you are using the current version script and css, this is all done for you as long as the image is on your server in the correct path) containing all of the helper images:

The bottom line on missing resource images is to use the css file 'as is' and make sure all images referenced in it are in the locations specified in the css file. Remember, relative paths to images in a css file are relative to the css file, not to the page using the css file, except for IE filtered images, ex:

Code:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_loading.png')

These are relative to the page using the image, and points up an apparent special case with IE. It looks like the images for IE are not in a sprite, rather are separate images. All of these must be present in the locations as noted.

In all cases, if there is any doubt, the absolute path may be used in the css file instead.

One may change the paths in the css file. If you do though, the image still must be on the server in the (now new) location specified in the css file for it to be seen.

About:

Another problem I'm having with my site is sometimes the pages on my site don't transition as smoothly as I would like...especially when on first visit.

Other than optimizing/compressing code and resources (like images), there's no real good way to deal with this. On a fast connection it's generally unnoticeable, preloading/loading schemes (if any any) generally execute smoothly and in a timely manner. On slower connections, since browsers are multi-threaded as regards downloading images, and animated .gif images take up CPU clicks (also needed in downloading images and other content) for their animation, things can often get even more sluggish.

Users are used to this if they have a slow connection and most would prefer that things were not drawn out even more by some extra animated loading graphic. Generally no loading/preloading scheme is required for a fast connection.

Thread: jQuery gallery above iframe - HELP!

Thread Tools

Search Thread

jQuery gallery above iframe - HELP!

Almost there

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions