Lightbox Media

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.

Download Download Lightbox Media 1.01

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.

Download Download Lightbox Media 1.20

About Author

40 Comments on “Lightbox Media”

  1. 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.

  2. 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!

  3. 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.

  4. Thanks,

    i have got it: top.myLightbox.end();

    May this help all of you…

  5. 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]

  6. 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…

  7. 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$/)){

  8. 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.

  9. I have another question (sorry πŸ˜› )
    I would like to open a ligthbox with a exactly dimensions.
    How do I do?

  10. 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.

  11. 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…

  12. 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 πŸ™‚

  13. 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

  14. 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.

  15. Γβ€˜ΓΒ΅ΓΒ³Γ‘Ζ’ΓΒ½ нС убСТал ΓΒΎΓ‘β€š Γβ€œΓ‘Ζ’ΓΒ³ΓΒ»ΓΒ°, а Γ‘β€šΓΒ°ΓΒΊΓΒΆΓΒ΅ Γβ€˜ΓΒ΅ΓΒ³Γ‘Ζ’ΓΒ½ скоро ΓΒΈΓ‘ΒΓ‘β€‘ΓΒ΅ΓΒ·ΓΒ½ΓΒ΅Γ‘β€š, ΓΒΊΓ‘β€šΓΒΎ слСдующий? и Γβ€˜Γ‘Ζ’ΓΒ΄ΓΒ΅Γ‘β€š ли РамблСр ΓΒΏΓΒΎΓΒ΄ΓΒΌΓ‘ΒΓ‘β€š Γβ€œΓ‘Ζ’ΓΒ³ΓΒ»ΓΒΎΓΒΌ, Γβ€˜ΓΒ΅ΓΒ³Γ‘Ζ’ΓΒ½ нС убСТал ΓΒΎΓ‘β€š Γβ€œΓ‘Ζ’ΓΒ³ΓΒ»ΓΒ° и Γβ€˜ΓΒ΅ΓΒ³Γ‘Ζ’ΓΒ½ нС убСТал ΓΒΎΓ‘β€š Γβ€œΓ‘Ζ’ΓΒ³ΓΒ»ΓΒ° и Ð’ ΓΒ ΓΒ£ΓΒ½ΓΒ΅Γ‘β€šΓΒ΅ дав играка: Google и Yandex, Позиции Γβ€œΓ‘Ζ’ΓΒ³ΓΒ»ΓΒ° на ΓΒ Γ‘Ζ’ΓΒ½ΓΒ΅Γ‘β€šΓΒ΅ Γ‘Ζ’ΓΒΊΓ‘β‚¬ΓΒ΅ΓΒΏΓΒ»Γ‘ΒΓ‘Ε½Γ‘β€šΓ‘ΒΓ‘Β

  16. 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

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

  18. 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

  19. 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.

  20. 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

  21. 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','#');

  22. perfect! that did it. now it down’t bother to load anything in the iframe until a link is actually clicked.

    Thank You

  23. 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…

  24. 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.

  25. 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 πŸ™‚

  26. 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

  27. НСкоммСрÑ‑СскоС ΓΒΏΓΒ°Γ‘β‚¬Γ‘β€šΓΒ½ΓΒ΅Γ‘β‚¬Γ‘ΒΓ‘β€šΓΒ²ΓΒΎ Ðőлуб Γ‘β€žΓΒΈΓΒ½ΓΒ°ΓΒ½Γ‘ΒΓΒΎΓΒ²Γ‘β€ΉΓ‘β€¦ ΓΒ΄ΓΒΈΓ‘β‚¬ΓΒ΅ΓΒΊΓ‘β€šΓΒΎΓ‘β‚¬ΓΒΎΓΒ², созданноС в дСкабрС 2006 года, ΓΒΎΓΒ±Γ‘Ε ΓΒ΅ΓΒ΄ΓΒΈΓΒ½Γ‘ΒΓΒ΅Γ‘β€š вСдущих российских Γ‘β€žΓΒΈΓΒ½ΓΒ°ΓΒ½Γ‘ΒΓΒΈΓ‘ΒΓ‘β€šΓΒΎΓΒ²

  28. 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!

  29. 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

  30. 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

  31. 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;

Comments are closed.