Lightbox Media (LBM) is yet another clone of Lokesh Dhakar’s Lightbox (v2) image add-on. It’s been slightly modified to allow any content (media) apart from images to be shown inside an iframe. This is detected automatically so there’s no need to modify text outside the source files. The overlay effect is applied exactly like before by adding rel=”lightbox” inside the link tag, or rel=”lightbox[some-media-set]”.
The download includes all files needed to set it up on any website, including the Prototype JavaScript Framework and some add-ons provided by Script.aculo.us. It also includes an example page in order to show how you should add the JavaScripts, style etc. Additionally lightbox-media.js and lightbox-media.css holds a few basic instructions on how to alter iframe height and width and set absolute URI’s for the navigation images.
Demo’s can be seen at our Area51 / LBM test site, or on our previous post Introducing Lightbox Media. Feel free to comment and/or ask for/provide help related to this add-on.
Update: Based on user input I’m now pleased to announce version 1.2 of Lightbox Media. The update includes a fix for upper-case file names and also the possibility to set the width and hight for the iframed content by adding a short query string to the link. Demo’s are available at our new Area51 / LBM2 test site.
BUGFIX:
Lightbox doesn’t detect correctliy linked images. This happens when i link an “image.JPG” (with uppercase extension) instead of an “image.jpg” (with lowercase extension)
Solution: when Lightbox checks for file’s extension (line 408), add “i” to the regexp:
/\.jpg$/
becomes
/\.jpg$/i
Repeat for each extension.
Hi Jure,
thanks for sharing your fix with the rest of us!
I suppose you could also use toLowerCase(), I’ll give that a try later as well π
Thanks again!
Hi,
best lightbox I found in the web. GREAT work.
Just one Question:
When i run JavaScript in the loaded IFRAME in the Box, how can the script close the box?
Is ther a function that exits the Box? The red cross button down rigth does this well, but i want to do this by Javascript after the user has done his selections in my dropdownmenus.
Any hint for me?
Already tried: lightbox.end();
But this does not work…
Thanks for your advise.
Thanks,
i have got it: top.myLightbox.end();
May this help all of you…
Thanks for your positive feedback and for the “fix”.
Much appreciated!
I have a problem with the image created with asp.net (same problem with GD Library).
The resizer not found.
what do i do?
[Sorry for my english, I’m an italian guy]
The images Extension are aspx (ex image.asp?id=1)
The script are looking for the extensions, therefore it will not recognize .asp as an image file but rather use the iframe to display what it thinks is a page. To fix this you will need to add asp to the image array in the script. That should hopefully solve your issues…
Here?
if(imageArray[activeImage][0].match(/\.aspx$/) || imageArray[activeImage][0].match(/\.gif$/) || imageArray[activeImage][0].match(/\.png$/) || imageArray[activeImage][0].match(/\.jpg$/) || imageArray[activeImage][0].match(/\.bmp$/) || imageArray[activeImage][0].match(/\.jpeg$/)){
Yes that looks right (line 408 in the original script). Not sure whether your query string will break this rule or not (.asp?id=x). Let me know how it goes.
The exact string is this:
imageArray[activeImage][0].match(/\.aspx\?id.+$/)
I have another question (sorry π )
I would like to open a ligthbox with a exactly dimensions.
How do I do?
I’ve not yet had time to implement this option. I know ThickBox includes this option and most certainly would be a nice alternative. It does however require a different Java library π
I think it should be possible to add the width and height inside the rel ref, but as I said I’ve not had the time to play around with the code yet…
If you figure something out please let me know.
In else of this if:
if(imageArray[activeImage][0].match(/\.gif$/) || ...etc
write:
this.content_is_image = false;
Element.setSrc('lightboxIframe', imageArray[activeImage][0]);
var url=imageArray[activeImage][0];
url=url.replace("&","&");
if(url.match(/\?*intX/)){
i_intX=url.indexOf("intX=")+5;
if (url.indexOf("&",i_intX)>-1){
f_intX=url.indexOf("&",i_intX);
} else{
f_intX=url.length;
}
lunghezza=f_intX-i_intX;
vidWidth=parseInt(url.substr(i_intX,lunghezza));
}
if(url.match(/\?*intY/)){
i_intY=url.indexOf("intY=")+5;
if (url.indexOf("&",i_intY)>-1){
f_intY=url.indexOf("&",i_intY);
} else{
f_intY=url.length;
}
lunghezza=f_intY-i_intY;
vidHeight=parseInt(url.substr(i_intY,lunghezza));
}
myLightbox.resizeImageContainer(vidWidth, vidHeight);
the url:
page
If someone find a bug contact me here.
My code is very very very very very very very very very banal… Sorry…
The link doesn’t work – send it through my contact page and I’ll update it…
I’ll applaud your efforts when I’ve seen it in action π
I have written to you
You have received the message
http://www.micene.net/prova/
the same method you can use inside rel with some simple chages
I’m sorry…. [ops]
Hi i am getting the same problim MpMp is getting any help …
The problim is my extension is .asp and i am using lightbox 2.3 ver
but it is not working it just shows me an blank image
Look for the line referenced in comment 10, try to add your extension in a similar fashion and see if that helps, otherwise I would need more info and preferably a link to your test site.
ΓβΓΒ΅ΓΒ³ΓΖΓΒ½ ΓΒ½ΓΒ΅ ΓΖΓΒ±ΓΒ΅ΓΒΆΓΒ°ΓΒ» ΓΒΎΓβ ΓβΓΖΓΒ³ΓΒ»ΓΒ°, ΓΒ° ΓβΓΒ°ΓΒΊΓΒΆΓΒ΅ ΓβΓΒ΅ΓΒ³ΓΖΓΒ½ ΓΒΓΒΊΓΒΎΓβ¬ΓΒΎ ΓΒΈΓΒΓβ‘ΓΒ΅ΓΒ·ΓΒ½ΓΒ΅Γβ, ΓΒΊΓβΓΒΎ ΓΒΓΒ»ΓΒ΅ΓΒ΄ΓΖΓΕ½Γβ°ΓΒΈΓΒΉ? ΓΒΈ ΓβΓΖΓΒ΄ΓΒ΅Γβ ΓΒ»ΓΒΈ ΓΒ ΓΒ°ΓΒΌΓΒ±ΓΒ»ΓΒ΅Γβ¬ ΓΒΏΓΒΎΓΒ΄ΓΒΌΓΒΓβ ΓβΓΖΓΒ³ΓΒ»ΓΒΎΓΒΌ, ΓβΓΒ΅ΓΒ³ΓΖΓΒ½ ΓΒ½ΓΒ΅ ΓΖΓΒ±ΓΒ΅ΓΒΆΓΒ°ΓΒ» ΓΒΎΓβ ΓβΓΖΓΒ³ΓΒ»ΓΒ° ΓΒΈ ΓβΓΒ΅ΓΒ³ΓΖΓΒ½ ΓΒ½ΓΒ΅ ΓΖΓΒ±ΓΒ΅ΓΒΆΓΒ°ΓΒ» ΓΒΎΓβ ΓβΓΖΓΒ³ΓΒ»ΓΒ° ΓΒΈ Γβ ΓΒ ΓΒ£ΓΒ½ΓΒ΅ΓβΓΒ΅ ΓΒ΄ΓΒ°ΓΒ² ΓΒΈΓΒ³Γβ¬ΓΒ°ΓΒΊΓΒ°: Google ΓΒΈ Yandex, ΓΕΈΓΒΎΓΒ·ΓΒΈΓβ ΓΒΈΓΒΈ ΓβΓΖΓΒ³ΓΒ»ΓΒ° ΓΒ½ΓΒ° ΓΒ ΓΖΓΒ½ΓΒ΅ΓβΓΒ΅ ΓΖΓΒΊΓβ¬ΓΒ΅ΓΒΏΓΒ»ΓΒΓΕ½ΓβΓΒΓΒ
I hope I explain this clearly.
When using the lightbox to load iframed pages the default page prior to clicking any link (while still hidden) loads the same page it’s on with the addition of /href to the url
for example….
if the lightbox is located at the following http://some.domain.com/index.html it will load in the iframe the same page http://some.domain.com/href
this then obviously loads your 404 page
The question is is there any way to set the default page it would load? I’d just point it to a blank page.
Thanks nice job on the lightbox
I haven’t had that problem to be honest. Could you provide an example page and also some information on which browser(s) and version(s) you are using?
Sure – first let me explain how I figured it out. First thing was I noticed 404 errors in my logs so I checked how it was happening. So I used Firefox with the Wed Developer Extension installed and used the Show Hidden Elements tool under Miscellaneous. You will see the default iframe loads the URL the lightbox is loaded on with the addition of /href on the end as in some.domain.com/href
You can see my demo page at http://snefo.com/demo/lbm
Hi efoiv, I’ve also managed to reproduce errors in my Apache log BUT they are not directly caused by the script I believe. In my case I’ll only get errors when trying to open Alexa.com.
Apparently this page contains several broken links/ads which causes the iframed content to produce several 404’s.
Hi Thomas thanks for you very quick replies… I’m specifically talking about what is default loaded into the iframe prior to ever clicking a link to display the iframe. Having not clicked any link to load and display the iframe. I would think the iframe wouldn’t have any content loaded but it does try to load your current page url with the addition of /href at the end.
I’ve tried it on several setups default install with your example page and it exhibits this every time.
I am not saying anything wrong is with the lightbox as is I was just curious if there was a way to *preload* the lightbox with some set page.
Cheers and thanks for your help
Hi again, as you know the script gathers info from all links that includes the reference to lightbox (rel=lightbox…). Furthermore, it reads the value set in the “href” attribute and examines whether it is an image or not.
I believe it would be possible to set a default page but in my mind that would only slow down the process as this would have to be loaded before opening the requested iframe page.
However, have a look for this line in lightbox-media-2.js:
objLightboxIframe.setAttribute('src','href');
And see if it makes any difference if you replace it with:
objLightboxIframe.setAttribute('src','#');
perfect! that did it. now it down’t bother to load anything in the iframe until a link is actually clicked.
Thank You
Thank you =]
Changing href to # on that line solved a weird problem with my lbm2 setup — the href bit was mysteriously refreshing whatever page to the main page after around 20 seconds for some reason…
cool script, but i can’t seem to get the lightbox to display over my flash. Tried to z-index the div my flash is contained in, and make the flash transparent, but nothing seems to work. Anybody got a work around for this.
Whow can i set the with and height of the iFrame runtime ?
… i mean, you say:
“..and also the possibility to set the width and hight for the iframed content by adding a short query string to the link.”
but on the demo there isn’t any example about that π
nevermind, got it π
for the noobs like me, on your anchor just put
href=”blabla.htm?intX=400&intY=200″ rel=”lightbox”> just a test
X = horizontal, y = vertical :p
ΓΒΓΒ΅ΓΒΊΓΒΎΓΒΌΓΒΌΓΒ΅Γβ¬Γβ‘ΓΒ΅ΓΒΓΒΊΓΒΎΓΒ΅ ΓΒΏΓΒ°Γβ¬ΓβΓΒ½ΓΒ΅Γβ¬ΓΒΓβΓΒ²ΓΒΎ ΓΕ‘ΓΒ»ΓΖΓΒ± ΓβΓΒΈΓΒ½ΓΒ°ΓΒ½ΓΒΓΒΎΓΒ²ΓβΉΓβ¦ ΓΒ΄ΓΒΈΓβ¬ΓΒ΅ΓΒΊΓβΓΒΎΓβ¬ΓΒΎΓΒ², ΓΒΓΒΎΓΒ·ΓΒ΄ΓΒ°ΓΒ½ΓΒ½ΓΒΎΓΒ΅ ΓΒ² ΓΒ΄ΓΒ΅ΓΒΊΓΒ°ΓΒ±Γβ¬ΓΒ΅ 2006 ΓΒ³ΓΒΎΓΒ΄ΓΒ°, ΓΒΎΓΒ±ΓΕ ΓΒ΅ΓΒ΄ΓΒΈΓΒ½ΓΒΓΒ΅Γβ ΓΒ²ΓΒ΅ΓΒ΄ΓΖΓβ°ΓΒΈΓβ¦ Γβ¬ΓΒΎΓΒΓΒΓΒΈΓΒΉΓΒΓΒΊΓΒΈΓβ¦ ΓβΓΒΈΓΒ½ΓΒ°ΓΒ½ΓΒΓΒΈΓΒΓβΓΒΎΓΒ²
Hi there, loving the script!
I’m using it to display a portfolio, so very iframe is the same size. Is it possible to disable the animation of the footer when transitioning between two iframes? I can remove the footer by commenting out the three objBottomNav vars, but the iframe still grows and shrinks on each transition.
Thanks!
Hello there,
Great lightbox this one, super! On the site I’ve mentioned I’d also like to show a PDF document in the lightbox. Is this possible also ? If so, this script gets a 10+ π
Kind regards
Barry
First of all many thanks for this great job.
It gave me a perfect solution for my portfolio mixing images and videos.
Now for more flexibility I’m trying to run the Lightbox Media overlay using hotspot links. Did somebody made it through ?
Cheers
Yan-Ali
Very Interestingly server. Thnx…
webkit browsers (chrome, safari, …) does not resize correctly images.
here is the fix:
after this line: imgPreloader.src = imageArray[activeImage][0];
add this line: $(“lightboxImage”).width=imgPreloader.width;