Lightbox Media, Iframe and IE

When including anything but an image using the Lightbox Media (my Lightbox clone) you might have noticed that IE automatically adds a border around the content. I’ve tried numerous CSS modifications to get this disappear but not until today found a proper solution.

The ridiculously simple solution came about after some Googleing and it all comes down to the frameBorder attribute being case sensitive. As my code read frameborder IE simply ignored it.

Download Download Lightbox Media version 1.01

15 thoughts on “Lightbox Media, Iframe and IE

  1. thx,
    I was using a different lightbox, I made the change, it’s working with firefox, but not with IE7.
    (I tested on the sample included in the zip)
    Note on FF, I have just a grey line at the top.

    regards
    raf

  2. That’s strange! It’s working on FF and IE6 & 7 on both my desktop and laptop. Can you please tell me more about what’s not working on IE7 (no effect, borders showing etc…)

  3. Great code. Though I can’t figure out how to make the lightbox window larger. Can you help?

  4. Hi Roger, the default width and height settings are found in lightbox-media.js. Look for the following in the beginning of the script:


    var vidHeight = 400;
    var vidWidth = 600;

    If you were referring to the frame around the images/files you can edit that through the included style sheets (CSS).

  5. Hello,

    im running into a little problem , everytime i open the window iframe to point to a domian.com/subdirectory i get this:

    "The requested URL /href was not found on this server.

    what exactly this means? One more thing you see where it says Google home or whatever text is displayed at the bottom and the closing botton, how do i put them on top instead?

    thanks and great script by the way. hope someone helps.

  6. I’m using the script to load detail pages about products on a client’s web site. There is an option page for these products that pops up in an iframe lightbox using your script. After a customer selects their options, they click “add to cart”. I am using the big red X at the bottom to cancel, but I also need to deactivate/end the lightbox when a user clicks “add to cart” to return the customer to the products page.

    I’ve tried adding:
    function() { myLightbox.end(); return false; }

    I’ve also tried adding rel=”deactivate” to the button and another function that I’ve used to break other iFrame lghtboxes, and none have works thus far.

    Any ideas on how to deactivate the lightbox from a child iFrame page?

  7. In IE7, the frame borders are showing even after giving frameBorder =0 .

    Any ideas why it is showing in IE7, though it is disappearing in IE6 and FF

  8. Hi,

    When I try to resize this thing, the frame resizes but the iframe doesnt. Hard to explain, anyway, check out this link and it will be obvious. I resized changing this section:

    var vidHeight = 400;
    var vidWidth = 600;

  9. Nevermind, discovered that I need to change the size in lightboxIframe in the CSS file! Thanks again!