move the Shadowbox.js close button to the upper-right

Shadowbox.js is the coolest JavaScript lightbox I’ve come across. The only thing I wanted to change was to put the “Close” button in the upper-right corner, where most users are used to looking for it. After crusing their forums, I discovered I wasn’t the only one that wanted this feature. So, I dove into the code and made the necessary adjustments, and of course, afterwards, I decided to document it here so that others could use it too. Here’s how to do it…

First, find this part in the Shadowbox.js code that writes the HTML into the page…

<div id="sb-container"><div id="sb-overlay"></div><div id="sb-wrapper"><div id="sb-title"><div id="sb-title-inner"></div></div><div id="sb-wrapper-inner"><div id="sb-body"><div id="sb-body-inner"></div><div id="sb-loading"><div id="sb-loading-inner"><span>{loading}</span></div></div></div></div><div id="sb-info"><div id="sb-info-inner"><div id="sb-counter"></div><div id="sb-nav"><a id="sb-nav-close" title="{close}" onclick="Shadowbox.close()"></a><a id="sb-nav-next" title="{next}" onclick="Shadowbox.next()"></a><a id="sb-nav-play" title="{play}" onclick="Shadowbox.play()"></a><a id="sb-nav-pause" title="{pause}" onclick="Shadowbox.pause()"></a><a id="sb-nav-previous" title="{previous}" onclick="Shadowbox.previous()"></a></div></div></div></div></div> 

and edit it – moving the HTML for the “X” (close) button…

<a id="sb-nav-close" title="{close}" onclick="Shadowbox.close()"></a>

…into the upper div #sb-title, just after #sb-title-inner, like so…

<div id="sb-container"><div id="sb-overlay"></div><div id="sb-wrapper"><div id="sb-title"><div id="sb-title-inner"></div><a id="sb-nav-close" title="{close}" onclick="Shadowbox.close()"></a></div><div id="sb-wrapper-inner"><div id="sb-body"><div id="sb-body-inner"></div><div id="sb-loading"><div id="sb-loading-inner"><span>{loading}</span></div></div></div></div><div id="sb-info"><div id="sb-info-inner"><div id="sb-counter"></div><div id="sb-nav"><a id="sb-nav-next" title="{next}" onclick="Shadowbox.next()"></a><a id="sb-nav-play" title="{play}" onclick="Shadowbox.play()"></a><a id="sb-nav-pause" title="{pause}" onclick="Shadowbox.pause()"></a><a id="sb-nav-previous" title="{previous}" onclick="Shadowbox.previous()"></a></div></div></div></div></div> 

then, add this stuff to your Shadowbox.css file AFTER all the other styles…

#sb-title-inner {
    width: 90%;
}
#sb-nav-close {
    float: right;
    width: 16px;
    height: 16px;
    display: block;
    margin: -20px 0px 0px 0px;
    background: url(close.png) 2px 0px no-repeat;
    cursor: pointer;
}

…and that’s it.

Let me know in the comments if this worked for you…

27 thoughts on “move the Shadowbox.js close button to the upper-right

  1. Nice work on this, thanks! FYI, I had to make the margin -50px instead of -20px to get it to work for me. And of course, the URL of the close PNG may need to be changed for anyone that has it in a different location.

  2. Hi Darren,
    thanks for pointing out the image path – i’ve changed it in the example to be more generic.

    ————————-

    Also – i noticed something else since i wrote this post – and its probably why you had to use -50px on the top margin. The -20px setting in my code assumes that there will be a value in the “title” attribute of the <a> tag that wraps the image, like so…

    <a href="path/to/someimage.jpg" rel="shadowbox" title="My Great Image">

    if it looks like this…

    <a href="path/to/someimage.jpg" rel="shadowbox" title="">

    …or this…

    <a href="path/to/someimage.jpg" rel="shadowbox">

    …you’ll probably have to use the -50px top margin you used.

    The problem with this approach is that – eventually, maybe some of your images WILL have titles, and then everything will look all messed up. The easiest solution is to keep the -20px top margin and just put something in the title attribute, like so…

    <a href="path/to/someimage.jpg" rel="shadowbox" title="&nbsp;">

    I hope this helps (someone out there).

    Best,
    Dustin

  3. This was extremely helpful! Thank you so much, I was over thinking this problem for the past few hours and a quick look here made me realize it.

    Thanks!

  4. Thanks Dustin, nice fix, saved me from having to figure that all out. I wanted to add that I actually played a little more with the css and popped a circle button kinda over top of the corner of the window (like u see commonly) by setting the

    #sb-wrapper {overflow:visible; (+everything else)}

    and the

    #sb-wrapper-inner {z-index:-1;(+everything else)}

    and the

    #sb-nav-close {
    float: right;
    width: 42px;
    height: 42px;
    display: block;
    /*margin: -25px 5px 0 -20px;*/
    position:absolute;
    top:0px;
    right:-20px;
    background-image:url(‘close.png’);
    cursor: pointer;
    overflow:visible;
    visibility:visible;
    z-index:1000;
    }

    getting rid of the margins saved the ie box-model issue with positioning and I just used top and right and a position of :absolute;

    Thank god for Firefox Firebug.

  5. it is 7am – i have just spent the entire night working on a project due at 10am. for the last 3hrs i have been pulling my hair out trying to do what i thought would be a simple problem – moving the close button to the top right.

    Then i found your blog, you jsut saved me, i cannot thank you enough.

    -50px margin worked for me due to no title

    word!!

  6. Hey, thanks for the tips! I’ve been meaning to move my close button for a while and found this article much more useful than what is currently out there.

    Keep up the good work!

  7. nice one, thanks for this – worked perfectly for me, tried loads of other solution that didn’t work.

    This worked first go.

    Thanks again.
    D

  8. Hi:

    This gets me on the right track. I was looking to add a button to the shadowbox that would let the viewer naviagte backwards when they are viewing html in the shadowbox. onclick=shadowbox.history.go(-1). something like that, but it doesn’t work. New to this. all guess work. Would appreciate some advice.

    Larry

  9. Thanks man!

    This is the first working solution I found in the last couple of hours.
    I also had to change the margin to -50px to make it work. It was the easiest solution for me since I don’t use any titles.

    Really easy solution for a pretty big problem.

    Thanks again! 🙂

  10. Little notice for those who does not use a attribute for all images, just add this:
    position: absolute;
    top: 27px;
    right: 1px;

    at the end of #sb-nav-close {

    The animation will be a bit weird but at least it will always show up as if no title attribute is entered..

    Anyone figure out a way for next/previous arrow ???

  11. Hey Dustin,

    I’m curious, how might someone go about moving the position of the previous and next arrows to appear outside the image’s left and right, respectfully? I’m curious because I’d like to simplify navigation through a Shadowbox gallery using touch.

    And thanks very much for your info on moving the close button, it’s been useful.

    -Matt

  12. I have a problem with Close botton. I would like that when the mouse is over “x” to close the image, i see the word “Cerrar” instead “Close”. I dont find where I can define that word.
    Is in : ?

    Thanks in advanced

  13. Hi Divian,
    it’s actually pretty simple.
    open shadowbox.js in your text editor.
    search for the word “close”.
    do “find next” a few times until you see some code that looks like this…

    close:”Close”

    and just change the text inside the quotes to “Cerrar”, like so…

    close:”Cerrar”

    that should do it.

    Best,
    Dustin

  14. Thanks!! It was there: close:”Close”, I was looking for somethinf like “title”. Thanks so much. Now its working

    Best
    Divian

Leave a Reply

Your email address will not be published. Required fields are marked *