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

Posted on 2011-10-14
Last Modified: 2012-05-12

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
Question by:thydzik
    LVL 3

    Expert Comment

    in your next image background there is some rubbish dot. delete it and everything will be ok.

    LVL 11

    Author Comment

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

    Accepted Solution

    @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 (, 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 ;)
    LVL 11

    Author Comment

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

    Assisted Solution

    by:Piotr D
    If it breaks anything in IE, try different form of space, e.g.

    Open in new window


    Open in new window

    LVL 3

    Assisted Solution

    by:Piotr D
    But using fancybox is a better idea ;) It does support smart resizing.
    LVL 11

    Author Closing Comment

    delinek, thanks for the help.

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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: HTML5 for Beginning Beginners

    Are you looking for an efficient introduction to HTML5? Have you tried other HTML5 courses and found them too complex? Do you need just the basics of HTML5 to use with Wordpress or other content management system? If you said yes to any of these questions, this course is for you.

    JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now