View Full Version : Lightbox to show webpage/frame instead?

html moron
05-05-2006, 09:31 AM

I love the Lightbox and am currently using it in a website for work. However, a request has come in to show text information as well as images. Ideally, I would like to keep the Lightbox and I don't want to use another effect to show text.

Is there a way to show html pages (or frames) using the Lightbox without manually converting html pages into .jpg?

Many thanks.

05-07-2006, 02:08 AM
Lightbox script

Me Too. I also want this. Is there anyway to direct the lightbox to the whole page??

here is my example:
click early work, then click the first image. (even though it is a "x" right now), then it will come up, but only in the inline frame. I can't think of any other way this will work but to direct it to the main page.
I've tried targeting it with >a target=_top but that doesn't work!!! grrr

Is there any way that the main page can call it to it?
Please help it's for a portfolio project for school!
:( :confused:

05-07-2006, 04:35 AM
These appear to me to be two separate questions. The first a request to allow lightbox to display another page in place of an image. The second, to allow lightbox to be executed from within a iframe, yet display over the entire top page. If I've got this right, both are possible. The first, I think has been worked out by users in the forum for these scripts (there are now several versions of lightbox) on the author's home page. The second issue has yet to be worked out by anyone I know of for sure but, I heard a rumor that someone had. It could be done, it would just be quite a bit involved determining which of the script's functions would need to be run on the top page and which on the page in the iframe and how best to accomplish this.

05-07-2006, 07:38 AM
Follow this link (http://www.huddletogether.com/2006/03/29/lightbox-v20/#comment-2549) to the authors support forum. A message relevant to using lightbox v2 inside an iframe will be at the top of the page. There is a link from there to a .zip file. I've downloaded and tested the file and it works in IE and FF quite well and OK in Opera (Opera has always had trouble displaying any content over an iframe so, that part cannot be covered from the top page in Opera).

05-12-2006, 06:27 AM
On a related subject, I've incorporated the iFrame mod that jscheuer1 refers to but I'm having a problem that I hope someone can help me with. I chose to go with v2 because I have different groups of images that would be shown in individual galleries. How do you make the different picture groups show up in the main page? The above zip file does not include anything in it to call the rel = lightbox[array]- it only calls the rel = lightbox. If anyone has a solution I would really appreaciate it!!

I've uploaded the pages here:

Thanks in advance to anyone who can help!

05-12-2006, 10:22 PM
I've figured out how to have the hidden form call for the REL of the pictures:

In the iFrame window, use this code:

<a href="javascript:void(0)" onClick="parent.lBiFrame(this)"><span class="style2">Click image </span><br>
<img src="thumbnail_url.jpg" alt="" name="image" width="178" height="112" border="0"></a>
<form id="lBiFrame_form" name="lBiFrame_form" method="post" action="">
<input name="LightBox_iFrame_imgUrl" type="hidden" id="LightBox_iFrame_imgUrl" value="image_url.jpg"/>
<input name="LightBox_iFrame_imgTitle" type="hidden" id="LightBox_iFrame_imgTitle" value="Image Title" />
<input name="LightBox_iFrame_imgRel" type="hidden" id="LightBox_iFrame_imgRel" value="[array_name]" />

In the Main frame window, use this code:

<!-- Start: LightBox2 iFrame Fix-->
<script type="text/javascript" language="javascript">
function lBiFrame(obj) { //Create the function for your onclick event in your linků
var iframe = window.frames['cwindow']; //this has to be the name of your iframe.
var iframeForm = iframe.document.lBiFrame_form; //this has to be the name of your frame and your form.
var hrefvalue = iframeForm.LightBox_iFrame_imgUrl.value; //this has to be the name of your "Image URL" hidden field.
var titlevalue = iframeForm.LightBox_iFrame_imgTitle.value; //this has to be the name of your "Image Title" hidden field.
var relvalue = iframeForm.LightBox_iFrame_imgRel.value; //this has to be the name of your "rel" hidden field.
var simulated_iFrameLink = document.createElement('a'); //Creates a href object
simulated_iFrameLink.setAttribute('href', hrefvalue); //Sets the href object to your lightbox image.
simulated_iFrameLink.setAttribute('title', titlevalue); //Sets the title object to your lightbox image.
simulated_iFrameLink.setAttribute('rel', 'lightbox', relvalue); //Sets rel href object to your lightbox image.
//alert ('href: ' + hrefvalue + ", Title: " + titlevalue + ', rel: lightbox' + relvalue); //For debug, to test if href, title, and rel are passed correctly..
myLightbox.start(simulated_iFrameLink); //Starts lightBox
<!--End Lightbox2 iFrame fix-->

Here's my problem- how do I now execute the rest of the images. I've tried placing them on the main page, placing them in the iFrame, creating more hidden forms, etc. Anyone have a clue as to how to make this work?