PDA

View Full Version : Lightbox image viewer 2.0: load outside iframe



the goose
03-27-2007, 09:31 PM
1) Script Title: Lightbox image viewer 2.0

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm


3) Describe problem: I've put the script in my page and it works fine :) the only problem is now, that I'm using an iframe... when I click on the thumb, the picture enlarges inside the iframe which is too small and scrollbars appear. Is there any way (in html) so that I could get it out of the iframe and let the picture enlarge on top of all the template and the iframe?

Thanks in advance,
the goose

jscheuer1
03-28-2007, 03:45 AM
The easiest way would be to use this mod of the script because it already works inside an iframe:

http://www.dolem.com/lytebox/

the goose
03-28-2007, 12:40 PM
Ah thanks alot! Got it to work :)
Still one question: I can only put 3 images in one group?

jscheuer1
03-28-2007, 12:58 PM
From the lytebox page:


!IMPORTANT: If you plan to use Lytebox in an iFrame environment, then you need to include lytebox.css in the parent document, while still including lytebox.js in the iFrame document. Samples are included in the download file from above. If you are still unsure where you need to include each, then it is perfectly safe to include both the css and js in both documents.

jscheuer1
03-28-2007, 01:14 PM
Ah thanks alot! Got it to work :)
Still one question: I can only put 3 images in one group?

No, you can use as many as you like as long as they all have the same [label] added to the rel="lytebox[label]" attribute.

the goose
03-28-2007, 01:14 PM
yes it works :D but can I only have 3 images per group?

jscheuer1
03-28-2007, 01:18 PM
We just cross posted, the answer to your post before this one is answered before it but, the answer is short so, I will just repeat it here:


No, you can use as many as you like as long as they all have the same [label] added to the rel="lytebox[label]" attribute.

the goose
03-28-2007, 01:45 PM
I've tried that:



...........

<!-- begin eerste rij -->

<div id="align_foto_links_r1"><a href="portfolio/example_full.jpg" rel="lytebox[Groep_1]" title="Eventuele voetnoot hier...">
<img src="portfolio/example.jpg" class="img_portfolio" border=0 width=170 height=170 alt=""></a></div>

<div id="align_foto_rechts_r1"><a href="portfolio/example_full.jpg" rel="lytebox[Groep_1]" title="Eventuele voetnoot hier...">
<img src="portfolio/example.jpg" class="img_portfolio" border=0 width=170 height=170 alt=""></a></div>

<!-- einde eerste rij -->

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<!-- begin tweede rij -->

<div id="align_foto_links_r2"><a href="portfolio/example_full.jpg" rel="lytebox[Groep_1]" title="Eventuele voetnoot hier...">
<img src="portfolio/example.jpg" class="img_portfolio" border=0 width=170 height=170 alt=""></a></div>

<div id="align_foto_rechts_r2"><a href="portfolio/example_full.jpg" rel="lytebox[Groep_1]" title="Eventuele voetnoot hier...">
<img src="portfolio/example.jpg" class="img_portfolio" border=0 width=170 height=170 alt=""></a></div>

<!-- einde tweede rij -->

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<!-- begin derde rij -->

<div id="align_foto_links_r3"><a href="portfolio/example_full.jpg" rel="lytebox[Groep_1]" title="Eventuele voetnoot hier...">
<img src="portfolio/example.jpg" class="img_portfolio" border=0 width=170 height=170 alt=""></a></div>

<div id="align_foto_rechts_r3"><a href="portfolio/example_full.jpg" rel="lytebox[Groep_1]" title="Eventuele voetnoot hier...">
<img src="portfolio/example.jpg" class="img_portfolio" border=0 width=170 height=170 alt=""></a></div>

<!-- einde derde rij -->

..............

so that should be one group of 6 images... though it says image 1/3, 2/3 and 3/3. Or am I missing something?

jscheuer1
03-28-2007, 01:56 PM
In your example code, I only see one image:



portfolio/example_full.jpg

The script does have code to eliminate duplicate entries.

the goose
03-28-2007, 02:31 PM
I see, it works now ;) thanks alot!

macintosh_
05-04-2007, 08:10 AM
I am new at editing all of these different things and I do not understand how I exactly "include lytebox.css in the parent document while still including lytebox.js in the iFrame document". What is the parent file? I have my index.htm which is what has my initial iframe and then there is a photos page which is where I have the rel="lytebox"...

jscheuer1
05-04-2007, 08:30 AM
I am new at editing all of these different things and I do not understand how I exactly "include lytebox.css in the parent document while still including lytebox.js in the iFrame document". What is the parent file? I have my index.htm which is what has my initial iframe and then there is a photos page which is where I have the rel="lytebox"...

The parent page is the 'top' page - your index.htm in this case - uses lytebox.css. The iframe document is the 'contained' page that is in the iframe - your photos page in this case - uses lytebox.js. However, as it states in the documentation:


!IMPORTANT: If you plan to use Lytebox in an iFrame environment, then you need to include lytebox.css in the parent document, while still including lytebox.js in the iFrame document. Samples are included in the download file from above. If you are still unsure where you need to include each, then it is perfectly safe to include both the css and js in both documents.

Now, sometimes that isn't true, but it almost always is. It can get quite tricky if there are more than the two pages ('top' and 'contained') at any given time.

macintosh_
05-04-2007, 09:14 PM
I can not seem to figure out how to get it to appear outside of the iFrame . The following site is what I am working on and if you click on check out the photo gallery it brings you to the photos.htm page. I would like to get it so the lytebox loads outside of the iframe.
http://www.belmontato.org

Most of the other links are in the process of being created I am taking it one step at a time. Thanks in advance to anyone who is able to help I really appreciate it.

jscheuer1
05-05-2007, 04:21 AM
This:


<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

needs to be in the head on index.html. This:


<link rel="stylesheet" href="lytebox.css" href="lytebox.js" type="text/css" media="screen" />

belongs nowhere.

Keep this as is on photos.htm:


<script type="text/javascript" language="javascript" src="lytebox.js"></script>

macintosh_
05-05-2007, 04:36 AM
When I delete this line of code from the photos.htm page, the pictures, when clicked appear at the bottom of the screen and are not shown in the slide show mode. I added the line to the head section of index.htm but that did not solve the problem. Any other suggestions?

[QUOTE=jscheuer1;91056]This:

This:


<link rel="stylesheet" href="lytebox.css" href="lytebox.js" type="text/css" media="screen" />

belongs nowhere.

jscheuer1
05-05-2007, 04:48 AM
I'm not sure what you actually did, you seem confused. However, those are the instructions for the script. Let me take a quick look at what you currently have.

Nope, still not like I said it should be.

macintosh_
05-05-2007, 04:59 AM
Yes I am a bit confused with it now, but I removed the line which you said to take out. Now if the a picture is clicked on it doesn't display in the lytebox format and is on the bottom of the page. The reason I am confused is because on the site http://www.dolem.com/lytebox/ it tells me that in order to use Lytebox, add the following line to the <head> of your document:

<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

I apologize if I am not doing something right.

jscheuer1
05-05-2007, 05:04 AM
Well, you could add that to both pages. Or just add the style only to the top page and the script only to the en-framed page. Can't make it much clearer than that.

This however:


<link rel="stylesheet" href="lytebox.css" href="lytebox.js" type="text/css" media="screen" />

Is just wrong. Don't put it anywhere.

syphiell
01-30-2008, 08:31 PM
Hi.

I added the codes as explained. But, since i'm really new at all this, I need help.
My site is : www.syphiell.net.
In Artwork, I have many images and i would like them to load in a lytebox outside of the frame.

Is there someone who could check my coding, to check what I did wrong?

thank you!

P.S.:Only the first two icon works at the moment... I want to make sure it works before I create all the other links.

jscheuer1
01-30-2008, 10:47 PM
On both your top and at least the external page artworks.html you have left off a closing quote in the meta keywords tag, this is preventing the script and styles from loading properly because the browser sees their tags as a continuation of the meta keyword data, not as actual script or style link tags:


<meta name="keywords" content="art . . . rt ยป>

That's probably some sort of typo or corruption that got copied and pasted or otherwise included into many files, it should be:


<meta name="keywords" content="art . . . rt ">

There could be other problems, but just taking care of that here got the external page working for me. Testing it in the iframe is easier to do on your end. Make sure to make this correction on all pages that feature this meta tag.

syphiell
02-01-2008, 06:29 PM
thank you soooo much!! it was very stupid I guess, but it works fine now :) (even though I still have problems with internet explorer... :( )

jscheuer1
02-01-2008, 09:19 PM
I hesitate to add this, but it will probably work out for you if you are willing to deal with it.

Your pages are invalid. This isn't some kind of value judgement, just an evaluation of their source code by the w3c (http://www.w3.org/) validator:

http://validator.w3.org/

The consequences of this are that some browsers have trouble understanding what you intend them to do. All browsers have error correction, but these routines vary from browser to bowser. Invalid code can render well in one browser, but not in another. Valid code may not render identically in all browsers but usually will be close - a few tweaks can get things to work well, if not identically, in all browsers.

I know it can be a bit of a learning curve, but if you are serious about web design, you would do well to validate your pages.

If you have trouble understanding the errors reported and how to correct them, you can ask in the HTML forum here.

NTB
02-21-2008, 04:46 AM
Hi all,
I have read this entire thread, and try to find out what I did wrong... and I just can't seem to make this work.

http://www.namtieubao.net/belle/?load=Collections
I'm testing the link Necklaces under Shape..

In header.php I added

<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

and under S_Necklaces.html (an Iframe)
I added

<script type="text/javascript" language="javascript" src="lytebox.js"></script>

I link the pix like this

<a href="Images/S_N_2.jpg" rel="lytebox" title="Handcrafted sterling silver hammered circle wtih 14kt gold-filled hammered circle pendant necklace on sterling silver chain">
<img border="0" src="Images/S_N_2t.jpg" width="140" height="132" alt="Eternity Necklace"></a>

However, under Press ... which is not an Iframe... things are okie.

What am I doing wrong? The image appears under the page... :( please help!

jscheuer1
02-21-2008, 05:42 AM
Your page in the iframe has no body tag and no html tag. These could well be the problem, or a part of it.

NTB
02-21-2008, 11:00 AM
I put <html> & <body> still now good!!!

jscheuer1
02-21-2008, 02:22 PM
Well, the script is working. It's just not finding the parent (top) page where the css is, so it is displaying the larger image in the iframe without the style, so it is down beneath the thumbnail images when it appears, not centered, and without the shaded area.

You may need to validate both the top and external pages to a valid URL DOCTYPE like:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

and/or not use javascript to create the iframe tag as you are doing on the top page.

NTB
02-21-2008, 02:56 PM
I simplify the whole thing down to
http://www.namtieubao.net/belle2/Collections.html

Now the collections.html... I included everything I need...
and the iframe S_Necklaces.html

What am I missing?

http://www.namtieubao.net/belle2/S_Necklaces2.html is a single page... and it works, but not iframe

jscheuer1
02-21-2008, 04:20 PM
I looked into this a bit more, and although it isn't made clear (at least not that I could tell) you need to give your iframe a name:


document.getElementById('tframe').innerHTML = "<IFRAME name='bob' scrolling=auto height=460 width=680 FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=no allowtransparency=true SRC='"+fname+"'></IFRAME>";

CatcherInTheRye
05-26-2009, 05:11 PM
Really REALLY need some help!

I'm due a project tommorow morning and I made an Art Portfolio. I used Iframes and was trying to get the lightbox to work in the Iframe when I came across this page.

Tried using "Lytebox"..The gallery page(The One I want inside the Iframe) is working fine on its own but when I use it within an Iframe, It doesnt work.

I did put this:

<script type="text/javascript" language="javascript" src="lytebox.js"></script>

In the gallery page.


<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

..and this in the parent page. It didnt work. I then used both the codes in both pages..It still doesnt work.

Can anyone help me out..?

Here is the code of the main page:

<HTML>
<HEAD>
<TITLE>My Art Portfolio</TITLE>

<!--Menu Script-->

<link rel="stylesheet" href="Menu/lavalamp.css" type="text/css" media="screen">
<script type="text/javascript" src="Menu/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="Menu/jquery.easing.min.js"></script>
<script type="text/javascript" src="Menu/jquery.lavalamp.min.js"></script>
<script type="text/javascript">
$(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return ;
}
});
});
</script>

<!--Menu Script Ends-->


<!--Iframe CSS-->

<style type="text/css">
#floatframe {position:absolute;
left: 320px;
top: 120px;
width: 500px;
height: 340px;
z-index: 100
}
</style>
<!--Gallery CSS-->
<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
<!--Gallery CSS Over-->

</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (Untitled-1.psd) -->
<IMG SRC="images/Untitled-1.png" WIDTH=1020 HEIGHT=629 ALT="">
<!-- End ImageReady Slices -->

<!--Menu-->

<ul class="lavaLampWithImage" id="1">
<li class="current"><a href="#">Home</a></li>
<li><a href="Gallery.html/" target="floatframe">My Gallery</a></li>
<li><a href="About Me.html/" target="floatframe">About Me</a></li>
<li><a href="contact.html/" target="floatframe">Contact</a></li>
</ul>

<!--Menu Over-->


<!--Iframe-->

<iframe width="500" height="500" id="floatframe" frameborder="0">
</iframe>

<!--Iframe over-->



</BODY>
</HTML>

Please..:confused:

_yo_wasup_
07-21-2009, 10:26 AM
I hate to bump this thread, but I was wondering if anyone could assist me with a simple problem I'm having. I just started using lytebox in my iframe, and it seems to be not scaling the lytebox according to the size of my enlarged photo. I followed the instructions, but let me know if there is something I can do to fix this:

http://matt.mw/ffm1/slants.html

In Firefox:
http://img218.imageshack.us/img218/1319/help1.png

In IE:
http://img115.imageshack.us/img115/6301/help2.png

Also, there probably isn't a way to get IE to fade black is there?

maplesyrup
08-07-2009, 05:30 PM
It's 2am and I still can't solve this problem so if anyone can shed some light it would be greatly appreciated.

I'm using lytebox but can't seem to get the image to display in the whole browser window - it only downsizes itself to fit the frame that the thumbnails are in. I have tried so many things, including the lyteframe tag but nothing is working.

if you click on the first picture image at www.miaostberg.com/advertising.html you'll see what i mean.

Thanks in advance.