PDA

View Full Version : Lightbox Link Target???



TheJoshMan
11-14-2006, 05:56 PM
Hi,
I'm using the Lightbox v2.0 (http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm) script in conjunction with an Iframe and trying to target "_parent" but I can't make it work. I've tried everything I can think of, but it's not working. Does anyone have any ideas as to what the problem could be? Here's a link to a test page so you can see what I mean...
Temp Gallery (http://www.waldronar.com/Design/Myspace/Krysten-Overlay/gallery.html)

Thanks in advance for any help.

TheJoshMan
11-25-2006, 04:02 AM
Hey, does anybody know if it is possible to us the lightbox script inside an I-Frame, but when you click on the link for the lightbox script to target the _parent window? I've tried numerous methods, yet none work. The above link to a "temp gallery" doesn't run an IFrame anymore, I took out the IFrame utnil I can get this figured out... Thanks.

Zoumbatianos Kostas
03-14-2007, 09:15 PM
Hi, This is pretty old, but I was looking of exactly the same thing! I found something that works great for me. Here is the method:
1. Load the scripts and css needed to run lightbox in the parent page
2. Create a function in the parent page like the one below:
function openImage(input)
{
myLightbox.start(input);
return false;
}
3. Inside the iframe page write links of the following format:

<a link="images\target_image.jpg" rel="lightbox" onClick="self.parent.openImage(this)" OnMouseOver="this.className='cursor';" style="cursor:pointer;cursor:hand;"><img src="images\target_image_small.jpg"></a>
4. Modify file lightbox.js :
on line 331, replace: imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));
with: imageArray.push(new Array(imageLink.getAttribute('link'), imageLink.getAttribute('title')));

jscheuer1
03-15-2007, 03:55 AM
This mod:

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

works in an iframe.

Moonspear
12-02-2008, 01:36 PM
Hi, This is pretty old, but I was looking of exactly the same thing! I found something that works great for me. Here is the method:
1. Load the scripts and css needed to run lightbox in the parent page
2. Create a function in the parent page like the one below:
function openImage(input)
{
myLightbox.start(input);
return false;
}
3. Inside the iframe page write links of the following format:

<a link="images\target_image.jpg" rel="lightbox" onClick="self.parent.openImage(this)" OnMouseOver="this.className='cursor';" style="cursor:pointer;cursor:hand;"><img src="images\target_image_small.jpg"></a>
4. Modify file lightbox.js :
on line 331, replace: imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));
with: imageArray.push(new Array(imageLink.getAttribute('link'), imageLink.getAttribute('title')));
hey.

Have no idea if you read this or not....

I tryied to do this, but my lightbox didnīt have the same text at the line 331, and not anywhere else either. =0(

I am having problems with the iframe and the lightbox...

thanx.

jscheuer1
12-02-2008, 05:07 PM
There are quite a number of versions of lightbox out there. The line number(s) for, and the exact code syntax used for doing:


imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));

vary. Some may not even do that particular thing at all, dealing with the issue of getting the href and title (if any) in a different manner.

However, Zoumbatianos Kostas' idea is a pretty good one and should work with at least some lightbox version(s) prior to 2.04 (all of them, provided the myLightbox.start() function or an equivalent is available or is made available in the global scope). Now I'm referring only to the official lightbox scripts, not to any of its many 'clones' and imitators, though a similar strategy may work with them.

In fact, with the version Zoumbatianos Kostas was using, no modification would be needed to line 331. One could instead follow the rest of his adaptation, but use this type link in the iframe:


<a href="images\target_image.jpg" rel="lightbox"
onclick="self.parent.openImage(this);return false;"
><img src="images\target_image_small.jpg"></a>

This script though (a lightbox 'clone'):

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

already has the iframe functionality built in, though it can be a little tricky to implement. The iframe must have a name attribute, a fact which I believe is left unmentioned on the demo page and only hinted at due to its use in the demo code.

Moonspear
12-03-2008, 10:18 AM
Yeah, I know.
This is the one I use for the moment (http://www.lokeshdhakar.com/projects/lightbox2/).

Could you help me to get it right...?:confused:
If not I have to take a look at the other one.

Thanx.

jscheuer1
12-03-2008, 04:18 PM
That version of Lightbox (2.04), though it has some significant bugs, supports AJAX imported content, making iframe (which is being deprecated anyway) unnecessary.

However, if you aren't ready to 'graduate' to using AJAX, I have figured out how to get my version v2.04a (which is still AJAX friendly, also has numerous other added features and bug fixes) to work with iframe.

Demo:

http://home.comcast.net/~jscheuer1/side/lightbox2.04a/light_frame.htm

Archive:

http://home.comcast.net/~jscheuer1/side/lightbox2.04a/lightbox2.04a.zip

There is an added script on light_externl.htm. Put that in the head of your iframe page. Otherwise, just install Lightbox 2.04a as usual on the top page.

Moonspear
12-03-2008, 06:46 PM
Thanx for answering and helping. :)

Iīm just a beginner and if you say that I have to "graduate" to use the Ajax, then I maby should try it. Is it the lytebox or what exactly is the "Ajax"? :confused:

Iīm just a regular homepagemaker, not an expert, especially this "lightbox" is quite new for me. :p

jscheuer1
12-03-2008, 07:03 PM
Well the newer lightbox versions (2.04 from the author, and 2.04a - my updated and bug fixed version) use a different strategy for opening the lightbox. Instead of assigning events to each lightbox link, they listen for clicks on the page. If one of these happens to be on a lightbox link, they open its href in the lightbox.

Because of that one can import content to the page that uses the lightbox syntax and it will be still be active without additional initialization.

A good basic AJAX routine is here:

http://www.dynamicdrive.com/forums/showpost.php?p=143849&postcount=16

Once you have that on your page, just make up a division like:


<div id="targetarea"></div>

You can then have a link:


<a href="external_light_box_content.htm" onclick="new loadXmlHttp(this.href, 'targetarea');return false;>Link Text</a>"

It will bring the external_light_box_content.htm into the targetarea div. If the external_light_box_content.htm has lightbox links on it, and the lightbox 2.04a script is installed on the 'top' page, the imported lightbox links will work.

I recommend using my 2.04a version because of its bug fixes and added features. But for a basic installation, the author's 2.04 version will work in most cases.

Moonspear
12-04-2008, 09:01 AM
Honestly, I got more confused after your last message. :o

I have no experience of java(script), not at all.

I want to use iframe with a "lightbox" (it doesnīt mather witch one of them).

I have no clue why it didnīt work, when I tryied to use your version. :(:confused:

I will try it again now, but... I want it to work... :cool:

jscheuer1
12-04-2008, 09:38 AM
Well you seemed game, but I did set things up so that you could still use iframe if you want to. For that, either get lytebox, or follow the example from my 2.04a archive where light_frame.htm is the top page and light_externl.htm is the page that goes in the iframe.

Moonspear
12-04-2008, 10:03 AM
I did try your 2.04a version and I did as you say about the two htm-pages.
BUT, still I donīt get it to work - it appear that the pictures come as if I donīt have Lightbox. I do not get it. =((

Feels like Iīm so stupid, eventough Iīve done some html+css hompages.

Offtopic: How is (the easiest) way to learn understand Java(script)?

jscheuer1
12-04-2008, 10:19 AM
The v2.04a is no different than the 2.04, except for the lightbox.js script which fixes some bugs and adds a lot of extras, now including this iframe capability. To use it with iframe, you need the extra script on the iframe page. This is all clearly shown in the demo archive and works on the demo page. If you've tried to set something up and it's not working, post a link to it so I can see what's going on:

Please post a link to the page on your site that contains the problematic code so we can check it out.

Moonspear
12-04-2008, 11:11 AM
Well, Iīm so grateful for your help.
Here is the link to the homepage (http://www.kolumbus.fi/jani.mantyla/Pics/testingdec08_3.htm).

Thanx in advance!! :)

jscheuer1
12-04-2008, 01:13 PM
First of all, you must use lightbox v2.04a. Second, most (probably all) of these scripts and files linked to on your top page don't exist:


<script type="text/javascript" src="Lightbox-filer/js/prototype.js"></script>
<script type="text/javascript" src="Lightbox-filer/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="Lightbox-filer/js/lightbox.js"></script>
<link rel="stylesheet" href="Lightbox-filer/css/lightbox.css" type="text/css" media="screen" />

Third, the lightbox styles and scripts should be associated only with the top page, and the added script code:


<script type="text/javascript">
if(parent.Lightbox && parent.Lightbox.version == '2.04a')
;(function(){
var boxit = function(e){
e = e || window.event;
var t = e.target || e.srcElement;
t = /^lightbox/.test(t.rel)? t : t.parentNode && /^lightbox/.test(t.parentNode.rel)? t.parentNode : null;
if (t){
parent.Lightbox.box.lightframe = document.body;
parent.Lightbox.box.start(t);
if(e.preventDefault)
e.preventDefault();
return false;
}
return true;
};
if(document.addEventListener)
document.addEventListener('click', boxit, false);
else if(document.attachEvent)
document.attachEvent('onclick', boxit);
})();
</script>

belongs only on the page(s) in the iframe.

Moonspear
12-04-2008, 01:37 PM
Oki. I think it was the index-page that had the links a little bit wrong.
What is new in lightbox v2.04a? I thought I got it right when I just changed the js-file... :confused:

I am not shore if I get what you mean with "the lightbox styles and scripts should be associated only with the top page, and the added script code...belongs only on the page(s) in the iframe."

I am feeling so stupid at the moment. :o

jscheuer1
12-04-2008, 03:56 PM
Now you have on the top (testingdec08_3.htm) page:


<script type="text/javascript" src="Lightbox-fils/js/prototype.js"></script>
<script type="text/javascript" src="Lightbox-fils/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="Lightbox-fils/js/lightbox.js"></script>
<link rel="stylesheet" href="Lightbox-fils/css/lightbox.css" type="text/css" media="screen" />

Those aren't there either. If I look at:

Lightbox-files/js/lightbox.js

I see that it is still 2.04 - it has to be changed to 2.04a.

Once you take care of that, and get the correct external script tags and style link tag to the lightbox files on the top (testingdec08_3.htm) page, remove this from the top (testingdec08_3.htm) page:


<script type="text/javascript">
if(parent.Lightbox && parent.Lightbox.version == '2.04a')
;(function(){
var boxit = function(e){
e = e || window.event;
var t = e.target || e.srcElement;
t = /^lightbox/.test(t.rel)? t : t.parentNode && /^lightbox/.test(t.parentNode.rel)? t.parentNode : null;
if (t){
parent.Lightbox.box.lightframe = document.body;
parent.Lightbox.box.start(t);
if(e.preventDefault)
e.preventDefault();
return false;
}
return true;
};
if(document.addEventListener)
document.addEventListener('click', boxit, false);
else if(document.attachEvent)
document.attachEvent('onclick', boxit);
})();
</script>

Then in the page in the iframe (winterpics.htm), get rid of this:


<script type="text/javascript" src="Lightbox-files/js/prototype.js"></script>
<script type="text/javascript" src="Lightbox-files/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="Lightbox-files/js/lightbox.js"></script>
<link rel="stylesheet" href="Lightbox-files/css/lightbox.css" type="text/css" media="screen" />

Moonspear
12-04-2008, 06:43 PM
THANX A LOT FOR YOUR HELP!

Now Iīve got it to work.
Just one minor linking-problem... I donīt get the nextlabel.gif/prevlabel.gif to show. Hehe.
Buuut, I do think I get it. =0)

Thanx again!!

jscheuer1
12-04-2008, 07:33 PM
Your live demo, unless you've made a new one and not given me a link to it, is still using the old 2.04 script and isn't working properly. If you do have this working, and put it up live, I can help you figure out the problem with the next/previous images.

Moonspear
12-05-2008, 05:48 AM
Hmm.. As I asked before, how can I change the old 2.04 script to the newer one? What do I have to change...?

Now I have got the next/previous images as well. Thanx for asking.

jscheuer1
12-05-2008, 06:42 AM
Looks like you've got it now on the live page. I meant the lightbox.js file, which is now the correct 2.04a version. Good.

Since we've been doing this thread though, I've updated again, such that all one need do now is to put all of the lightbox scripts and style on all of the pages.

But because you already have it working, I doubt that you will want to deal with that, at least not now. And I will probably be updating further.

One thing you should change though, an error I made. On the pages in the iframe where you have:


if(parent.Lightbox && parent.Lightbox.version == '2.04a')
;(function(){
var boxit = function(e){
e = e || window.event;
var t = e.target || e.srcElement;
t = /^lightbox/.test(t.rel)? t : t.parentNode && /^lightbox/.test(t.parentNode.rel)? t.parentNode : null;
if (t){
parent.Lightbox.box.lightframe = document.body;
parent.Lightbox.box.start(t);
if(e.preventDefault)
e.preventDefault();
return false;
}
return true;
};
if(document.addEventListener)
document.addEventListener('click', boxit, false);
else if(document.attachEvent)
document.attachEvent('onclick', boxit);
})();


Get rid of the highlighted semicolon. It was an error on my part to include it in the first place.

Moonspear
12-05-2008, 08:30 AM
hehe. Iīm just so afraid that Iīll complicate everything much more than it is... ;0)

Buuut, do you have the new version?
I could try it when itīs much easier then later to have everything in same place...

I just have to ask, donīt you sleep at all... (or are you in Europe) when you answer so fast?

jscheuer1
12-05-2008, 08:39 AM
I keep odd hours. Anyways, the latest version and demos will always be at:

http://home.comcast.net/~jscheuer1/side/lightbox2.04a/lightbox2.04a.zip

I've also included a simplified AJAX demo. Turns out that the prototype.js file used by lightbox has decent AJAX routines in it.

Just make sure that before you try updating anything you have, make a back up of the working version in a separate folder or in an archive.

Moonspear
12-05-2008, 09:44 AM
Oki. I have no clue about the AJAX...

I have tried the new version, there you have all the lightbox-scripts and -style on all of the pages. BUT, the picture appears to come in the iframe - not working... What am I doing wrong? I have the demo same address to the demo.

jscheuer1
12-05-2008, 09:56 AM
Well, you need to download the archive again and use the new lightbox.js in it, or you can just grab it directly by right clicking on this link and choosing 'save as':

http://home.comcast.net/~jscheuer1/side/lightbox2.04a/js/lightbox.js

Just make sure to keep a back up of your older files if you need them.

Moonspear
12-05-2008, 10:52 AM
thanx for that - now I should have it right here (http://www.kolumbus.fi/jani.mantyla/Pics_vers2/testingdec08_3.htm). The new one I mean. =0)

Is it the picture that is too big when the page is "jumpping" when opening the picture?

jscheuer1
12-05-2008, 04:24 PM
It is working, but since you are now using the latest version, you may skip:


<script type="text/javascript">
if(parent.Lightbox && parent.Lightbox.version == '2.04a')
(function(){
var boxit = function(e){
e = e || window.event;
var t = e.target || e.srcElement;
t = /^lightbox/.test(t.rel)? t : t.parentNode && /^lightbox/.test(t.parentNode.rel)? t.parentNode : null;
if (t){
parent.Lightbox.box.lightframe = document.body;
parent.Lightbox.box.start(t);
if(e.preventDefault)
e.preventDefault();
return false;
}
return true;
};
if(document.addEventListener)
document.addEventListener('click', boxit, false);
else if(document.attachEvent)
document.attachEvent('onclick', boxit);
})();
</script>


on the page(s) in the iframe, and instead use:


<link rel="stylesheet" href="http://www.kolumbus.fi/jani.mantyla/Pics/Lightbox-files/css/lightbox.css" type="text/css" media="screen">
<script src="http://www.kolumbus.fi/jani.mantyla/Pics/Lightbox-files/js/prototype.js" type="text/javascript"></script>
<script src="http://www.kolumbus.fi/jani.mantyla/Pics/Lightbox-files/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="http://www.kolumbus.fi/jani.mantyla/Pics/Lightbox-files/js/lightbox.js" type="text/javascript"></script>


there as well as on the top page.


About 'jumpping', I'm not sure what you mean. If you mean that the animation of the lightbox is jumpy, that does vary depending upon browser, image and even computer.

Near the beginning of every lightbox v2.04 and v2.04a lightbox.js file, there is a configuration area. In the current version it looks like so:


// -----------------------------------------------------------------------------------

//
// Configurationl
//
LightboxOptions = Object.extend({
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',
cookieForFirstLight: false, // use session only cookie for first light? (true/false)

overlayOpacity: 0.8, // controls transparency of shadow overlay

animate: true, // toggles resizing animations
resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest)

borderSize: 10, // if you adjust the padding in the CSS, you will need to update this variable

forceLocal: false, // set to true to force lightbox into a frame or iframe
// (default: false) - will allow lighbox effect to appear on the top page of an iframe if any

// When grouping images this is used to write: Image # of #.
// Change it for non-english localization
labelImage: "Image",
labelOf: "of"
}, window.LightboxOptions || {});

// -----------------------------------------------------------------------------------


See the two highlighted values above. There you can adjust the speed of the animation, slower or faster may be smoother. Or you can turn it off, by setting the animate : false, property.

Moonspear
12-12-2008, 02:56 PM
Hey.

I have it now to work, but Iīm wondering about one thing.

This is a little bit tricky to explain...
How can I get it so that Iīve got 2 pics showing on the homepage, several pics that are not shown at the homepage but shows up when "youīre in the big pics view and goes forward" and then perhaps again 2 pics showing on the homepage?

Did you get what Iīm after?

jscheuer1
12-12-2008, 05:34 PM
No, not really. Perhaps if you were to explain why, that would help me understand. Also, if you could explain step by step what you want when the page loads, what you want to happen when the user does something, and what they do to make it happen, that would probably help too.

Moonspear
12-12-2008, 07:43 PM
you got a example of what I mean here (http://synvinklar.se/portfolio/portfolio1.htm) from a homepage I know uses this.

- the user has clicked on a picture (on the page that all pictures are)
- then he click forward
- here can appear:
A) a picture that you have to click on to get it to appear (on the page that all pictures are)
B) you can get a picture that doesnīt appear (on the page that all pictures are)
- then you just continue to go forward until you come to the end.

Hope you get it. Otherwise I have to try again to explain.

Moonspear
12-15-2008, 10:51 AM
I have now made a demo-homepage here (http://www.kolumbus.fi/jani.mantyla/Pics_vers3/Testingpics.htm).

Hopefully, you get what Iīm having trouble with (the pictures that donīt is shown at the homepage, will not work in your new version for Lightbox). And searching for a solution. =0)

Moonspear
12-16-2008, 09:07 AM
Hmm... I just have to wonder why I am not getting any answers...