PDA

View Full Version : 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:


<!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:


<!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:


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:


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:


<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?


<!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:


<!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:


<!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:

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

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:


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.

spookymix
09-23-2010, 09:08 PM
Hi John,

Do you know how I would go about placing a fancybox popout window in the lookbook section of this site (http://www.calico9.com/test)?

If you click on the link on the top left corner of the page on the lookbook section I placed a popout window link for the lookbook. Instead I would like it to have a Fancybox popout window.

I'm using Coda Slider 1.1.1 (http://www.ndoherty.biz/demos/coda-slider/1.1.1/) and noticed when I place JQuery 1.4.2 (http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js) script in my site it doesn't work. I suppose it conflicts with the Coda Slider Jquery script.

How would I get around this...or if you have any other suggestions please let me know.

Also, the intro loader seems a little buggy. I just placed an animated gif that fade out onLoad. It seems like the page fade out when everything is not finished loading. Whats the best way for me to make an intro loader?

Thanks for all your help.


Mike