I've managed to do add custom next/previous and close controls to Shadowbox without actually modifying the source (which makes upgrades easier). There are some settings and functions specific to my project, but this should get you started. I use jQuery heavily in all my projects, as you can see. I also use
conditional compilation to give IE special treatment, as that's the only 100% foolproof way to detect it, and not another browser masquerading as it.
JavaScript(function() {
// ---- Shadowbox setup ----
var openInit = false;
var titleAnimationActive = false;
var navFadeInTime = 150;
var navFadeOutTime = 400;
var navMinOpacity = 0.1;
var navMaxOpacity = 1;
var closeFadeInTime = 150;
var closeFadeOutTime = 400;
var closeMinOpacity = false;
var closeMaxOpacity = 1;
Shadowbox.init({
skipSetup: true,
initialWidth: 100,
initialHeight: 100,
//counterType: 'skip',
//displayCounter: false,
displayNav: false,
onOpen: function(galleryElement) {
var $this = $(galleryElement.el);
titleAnimationActive = site.titleAnimation.isActive();
if (titleAnimationActive && site.settings.stopTitleWhileViewerOpen) {
site.titleAnimation.stop();
}
if (!$('#sb-custom-close').length) {
// Create our own close link
var $closeLink = $(site.createPseudoLink('Close
'))
.attr('id', 'sb-custom-close')
.attr('title', 'Close')
.bind('click', function(event) {
Shadowbox.close();
})
.appendTo('#sb-title');
// Grab initial opacity from stylesheet
// !IMPORTANT! - IE doesn't like this, ignoring it down below
closeMinOpacity = $closeLink.css('opacity');
}
openInit = false;
},
onFinish: function(galleryElement) {
// Overlay next/previous links over image
// TO DO: only display if content type is "img"?
var $nextLink = $(site.createPseudoLink('Next
'))
.attr('id', 'sb-custom-nav-next')
.addClass('sb-custom-nav-link')
.one('click', function(event) {
Shadowbox.next();
}).css({opacity: navMinOpacity});
if (!Shadowbox.hasNext()) {
$nextLink.addClass('unused');
}
var $previousLink = $(site.createPseudoLink('Previous
'))
.attr('id', 'sb-custom-nav-previous')
.addClass('sb-custom-nav-link')
.one('click', function(event) {
Shadowbox.previous();
}).css({opacity: navMinOpacity});
if (Shadowbox.current == 0) {
$previousLink.addClass('unused');
}
var $navLinks = $([$nextLink[0], $previousLink[0]]);
$('#sb-body-inner').append($navLinks);
// Fade in and out on mouse over and out, respectively
$navLinks
.hover(function(event) {
$(this).stop(true).animate({opacity: navMaxOpacity}, navFadeInTime);
}, function(event) {
$(this).animate({opacity: navMinOpacity}, navFadeOutTime);
});
// Flash and then slowly fade nav links to make user aware of them
$navLinks
.animate({opacity: navMaxOpacity}, navFadeInTime)
.animate({opacity: navMinOpacity}, navFadeOutTime * 3);
var $closeLink = $('#sb-custom-close');
// IE 8 and lower can't read initial opacity, so don't fade
/*@cc_on if ($.browser.version > 8) { @*/
$closeLink
.hover(function(event) {
$(this).stop(true).animate({opacity: closeMaxOpacity}, closeFadeInTime);
}, function(event) {
$(this).animate({opacity: closeMinOpacity}, closeFadeOutTime);
})
.animate({opacity: closeMaxOpacity}, closeFadeInTime)
.animate({opacity: closeMinOpacity}, closeFadeOutTime * 3);
/*@ } @*/
openInit = true;
},
onClose: function(galleryElement) {
if (titleAnimationActive && site.settings.stopTitleWhileViewerOpen) {
site.titleAnimation.start();
}
}
});
})();
CSS/* Custom image locations, overriding shadowbox.css properties */
#sb-nav-close {
background-image: url(../images/shadowbox/close.png);
}
#sb-nav-next {
background-image: url(../images/shadowbox/next.png);
}
#sb-nav-previous {
background-image: url(../images/shadowbox/previous.png);
}
#sb-nav-play {
background-image: url(../images/shadowbox/play.png);
}
#sb-nav-pause {
background-image: url(../images/shadowbox/pause.png);
}
/* Custom loading throbber */
#sb-loading {
background-image: url(../images/throbber.gif);
background-position: 50% 50%;
background-repeat: no-repeat;}
#sb-loading a {
display: none !important;
}
#sb-title-inner {
font-weight: bold;
}
/* Custom navigation pseudo-links */
#sb-custom-nav-next,
#sb-custom-nav-previous {
position: absolute;
display: block;
top: 0;
height: 100%;
/* width: 30%;
min-*/width: 96px;
text-indent: -999em;
overflow: hidden;
}
#sb-custom-nav-next {
right: 0;
}
#sb-custom-nav-previous {
left: 0;
}
#sb-custom-nav-next.unused,
#sb-custom-nav-previous.unused {
display: none;
}
#sb-custom-nav-next .nav-icon,
#sb-custom-nav-previous .nav-icon {
display: block;
position: absolute;
top: 50%;
margin-top: -64px;
width: 48px;
height: 128px;
background: transparent url(../images/viewer_nav.png) 0 0 no-repeat;
opacity: 0.6; /* See common_ie.css as well */
}
.IE6 #sb-custom-nav-next .nav-icon,
.IE6 #sb-custom-nav-previous .nav-icon {
background-image: url(../images/viewer_nav_ie6.png);
}
#sb-custom-nav-next .nav-icon {
background-position: -48px 0;
right: 24px;
}
#sb-custom-nav-previous .nav-icon {
left: 24px;
}
/* Custom close pseudo-link */
#sb-custom-close {
top: 0;
right: 0;
text-indent: -999em;
overflow: hidden;
opacity: 0.5; /* See common_ie.css as well */
}
#sb-custom-close,
#sb-custom-close .close-icon {
position: absolute;
display: block;
width: 24px;
height: 24px;
}
#sb-custom-close .close-icon {
top: 0;
left: 0;
background: transparent url(../images/viewer_close.png) 0 0 no-repeat;
}
.IE6 #sb-custom-close .close-icon {
background-image: url(../images/viewer_close_ie6.png);
}
