Monday, May 18, 2009

Making Lytebox Work in IE8 - Close, Previous & Next

Update: There is another solution that is a touch cleaner and probably gets more to the root of the issue available here: http://nederveld.wordpress.com/2009/07/02/lytebox-and-internet-explorer-8/

Here at Guild Launch we've been using a wonderful streamlined version of Lightbox called Lytebox. We use it primarily because it's a much smaller download than the other Lightboxes and Lightbox 2 and doesn't require any external libraries such as Prototype or Scriptaculous.

This version hasn't seen much development in the last year or so though. It just works.... until IE8 came out. With the release of IE8 some problems cropped up. Namely, the Close, Previous and Next buttons wouldn't show. After a lot of playing around and testing different things I've found the solution. So without further ado here is how to get Lytebox working in IE8 again.

One thing to keep in mind, this fix is specific to us and removes some of the customization that Lytebox has in its CSS. If you know what you are doing you can adapt the fix to your own customization. We've been using the "Grey" theme so I just tweaked those settings:

Before The Changes

In the current lytebox.css there are these lines for the previous buttons in the Grey theme:

#lbPrev { width: 49%; height: 100%; background: transparent url(images/blank.gif) no-repeat; display: block; left: 0; float: left; }
#lbPrev.grey:hover, #lbPrev.grey:visited:hover { background: url(images/prev_grey.gif) left 15% no-repeat; }

And these for the Next button in the Grey theme:

#lbNext { width: 49%; height: 100%; background: transparent url(images/blank.gif) no-repeat; display: block; right: 0; float: right; }
#lbNext.grey:hover, #lbNext.grey:visited:hover { background: url(images/next_grey.gif) right 15% no-repeat; }

And this for the Close button:

#lbClose { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
#lbClose.grey { background: url(images/close_grey.png) no-repeat; }

The Problem

The crux of the problem is that IE8 isn't recognizing the "Grey" class being applied to the ID by the script. Instead of directly figuring out why that is I just merged the classes together since we always use the Grey theme.

The Fix

For the Previous:

#lbPrev { width: 49%; height: 100%; background: transparent url(images/blank.gif) no-repeat; display: block; left: 0; float: left; }
#lbPrev:hover, #lbPrev:visited:hover { background: url(images/prev_grey.gif) left 15% no-repeat; }

For the Next:

#lbNext { width: 49%; height: 100%; background: transparent url(images/blank.gif) no-repeat; display: block; right: 0; float: right; }
#lbNext:hover, #lbNext:visited:hover { background: url(images/next_grey.gif) right 15% no-repeat; }

And for the Close:

#lbClose { width: 64px; height: 28px; float: right; margin-bottom: 1px; background: url(images/close_grey.png) no-repeat;}

Why does this work?

Basically I just made an end run around IE8 not rendering the Grey class properly and just made the button be always the Grey set. If you are using one of the other themes just make the same changes using that theme's images.

So, now you have Lytebox working in IE8 the way it should.

Enjoy!
Stephen

23 comments:

alexM said...

Great post, thanks.

This fixes one problem, but I'm finding that IE8 isn't showing the darkened background behind the Lytebox overlay/popup. Have you had this issue, and do you know of a solution?

alexM said...

Found a simple fix.

Add this on line 2 of the css...

#lbOverlay { background-color: #000000; }

Again, this is specific to the grey theme, so might need tweaking for the other colour themes.

Rdiseo said...

Helpful post,

working perfectly, thanks guys

Marco said...

you saved me lot of time searching the problem, thx you

Robert.S said...

Great tip, thanks!

BTW, same fix can be used to make border around the image to appear. Like,

Line 13: #lbOuterContainer { border: 3px solid #888888; }
Line 21: #lbDetailsContainer { border: 3px solid #888888; border-top: none; }

Again, only for grey theme.

Cheers!

mark said...

Brilliant, exactly the fix I needed. Definitely 1up to you guys!

Thanks

edot3

Anonymous said...

Here is what I did to fix the IE8 issue: http://nederveld.wordpress.com/2009/07/02/lytebox-and-internet-explorer-8/

Cybernoxa said...

http://nederveld.wordpress.com/2009/07/02/lytebox-and-internet-explorer-8/ This is the real solution I think. The problem isn't css but JS

Cybernoxa said...

It just works... more over it seems the only one that works with application/xhtml+xml

alexM said...

Thanks Nederveld and Cybernoxa. That's a much nicer fix.

Yeesha said...

Easy and quick solution:

Open lytebox.css.
Delete .grey (≈16 times).
Done.

Slideshow buttons also will be visible.

Adam said...

I've got another problem. Well, several if you're counting browsers... I'm using iframes, one of the features the tool touts, but in FF 3.0.8, the 'pop-up' only gets as big as the iframe, and it ain't very big. The same happens in Opera, and oddly, in IE8. In Safari and Chrome it works like a charm.

The page I'm working on is here:

http://www.frartexchange.com/gallery_new_frame.html

If you (or anyone) wants to take a look...

Thank You,
Adam

Michael said...

Thanks for the help. Having a look at the javascript it seems that IE has brought back good ol bugs.
The problem being that IE doesnt behave correctly when setting the Attribute of an object with js especially when it comes to styles.

You can fix the code by replacing
.setAttribute((this.ie ? 'className' : 'class'), this.theme);

with

.className = this.theme;

Johannes said...

Thanks a lot for the fix! Was trying to figure out why the Lytebox was broken in IE8 myself but a quick Google search took me to your site.

Thanks again!

Jiten said...

great, and thanks. However, I have another problem now :

When I am using the lyteframe, it loads perfectly when it is an outside websitelike google, wikipedia or any other, but when I call a *.php file inside my website, it opens it and closes it inmediatly witout clicking the close button... what am I missing ?

bookinmedia said...

I have another problem, perhaps someone else relized it :

In the mother page I have a couple of textfields "user" and "password" but also i have a link in a different part (of the same mother page) that when you click on it, opens a lytebox.. it works great, but once you close the lytebox, if you want to click on the textfields... it becomes impossible !! you have to refresh the page and only then the text fields become available to click and fill out... any help please ?

maarten said...

Thank you very much great timesaver!

thestockguy101 said...

Any come across an issue that the images are being shrunk, and not being displayed as the full size image on IE8?

Thanks

admin said...

Thanks!
I have used a simpler and quick way:
Changed compatibility mode of the IE8.
How to do this on blogger:
Edit Template HTML, and add just after the opening of the
< head > tag, this line:
meta content='IE=7' http-equiv='X-UA-Compatible'

(add: < at the beginning,
and: /> at the end of the line added)

See it working on this link:
lytebox IE8

Craig said...

after getting lost in cross browser compatibility this post helped me out heaps and solved the problems in IE8...thanks so much

Doug said...

Can you please tell me how I can place a html file in lyteframe and have it auto size with no scrolling?

Thanks

Doug

Doug said...

I would also like to be able to use the next and previous button to go to another html page in lytebox. Could you please give me a step by step on this?

This has been a HUGE help to me...

thanks

Doug

mike said...

Here's a problem for you guys that I think you will not be able to figure out. I have lytebox working just fine but then I tested it in IE and instead of opening the other web page on the same page and dimming the background etc, it opens that other web page period. Now, I know hwat the problem is, I am using google cart and they have me place a script on the page for the cart to be integrated with the website.
here's a link to view the script. Just view the source of this web page.
http://www.champion-fulfillment.com/2011/theScript.html

Why would this script be making the lytebox not work!?!?!?! It's driving me crazy.

Oh, and you can see what I mean here.

http://www.champion-fulfillment.com/2011/Champion_Generators.html

and here's the exact same page with that google script excluded.
http://www.champion-fulfillment.com/2011/Champion_Generators9.html

Thank you ahead of time.