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…
comments
14 Responses to “move the Shadowbox.js close button to the upper-right”
Leave a Reply
-
need my help?
Interested in having me be a consultant on your next project? to email me.
-
what i’m reading...
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.
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=" ">I hope this helps (someone out there).
Best,
Dustin
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!
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.
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!!
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!
Worked perfectly. Thanks for documenting this.
Worked like a charm!
Thank you so much for sharing this tip
Regards
Thanks for this great tip! Almost had to give up on Shadowbox because client didn’t like x in bottom corner. WHEW! Thanks!
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
Worked great on the first try! Thank you VERY much for posting this!
Awesome workaround. Thanks!!
Thank you for this. Clear instructions and easy to do!
Worked perfectly. Thanks you. hi from Czech Republic