• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 247
  • Last Modified:

LightBox HTML/CSS/JQuery help - errors on Chrome, can't resolve without breaking IE


I am reusing some code I found online, everthing does what I want except in Chrome two dots are visible in the lightbox when I click on an image in Chrome.

My experience in web design is very minimal, when I have tried to resolve the problem, it then breaks the functionality in IE8.

LightBox based on SlimBox2,
which was then modified by another developer.

my test page here

I have attached an image showing the location of the dots if it isn't obvious.

Help appreciated.

 two dot location
  • 3
  • 3
3 Solutions
in your next image background there is some rubbish dot. delete it and everything will be ok.

thydzikAuthor Commented:
saimazz, the gifs are transparent with rounded corners. your suggestion does not resolve the issue.

I have managed to remove one of the dots, and colored the other a grey to hide it.
we have to leave it this way if there are no other solutions.
Piotr DCommented:
@saimazz: these are not rubbish dots, you are just using a rubbish image editor ;) These are thansparent pixels to make the button corners look rounded. nothing wrong with that. The problem is in slimbox code.

First of all, I would greatly recommend not using slimbox, mostly because:

- the last version was released almost 1,5 year ago, it looks like it is not being supported anymore
- you are using a modified version - this might be where the problems lies (you can notice that the original slimbox2 does not have the issue that yours does)
- there are much better lightbox scripts out there, supported, actively developed and with more features

I would opt for Fancybox (fancybox.net), which I've been using for a few projects already and it always works great.

But anyway, the black things displaying on the images are dots. To remove them, edit lines 54-55 in slimbox2_full.js and replace them with:
prevLink = $('<a id="lbPrevLink" href="#" />').text(' ').click(previous)[0],
nextLink = $('<a id="lbNextLink" href="#" />').text(' ').click(next)[0]

Open in new window

(note: there is a space in "text(' ')")

I tested in FF, Chrome and IE. This should resolve the problem.

PS. Anyway, give Fancybox a try ;)
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

thydzikAuthor Commented:
delink, thanks for the reply.
Yes, this this mod is a bit of a hack (trying to get auto resize to work)

I have previously tried the add a space method, but it then screws up the navigation icons in IE.
I have reimplemented the change to show.

I will look at Fancybox.
Piotr DCommented:
If it breaks anything in IE, try different form of space, e.g.

Open in new window


Open in new window

Piotr DCommented:
But using fancybox is a better idea ;) It does support smart resizing.
thydzikAuthor Commented:
delinek, thanks for the help.

whilst none of the answers provided a solution.
awarded points for fancybox recommendation

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now