Hi,
there is a different way, that doesn't require changes to any of the shadowbox files (also only manipulates public attributes) that also introduces the text 'Close' next to the close icon. After including the shadowbox script and stylesheet simply change the markup for the shadowbox by using the following javascript code:
Shadowbox.skin.markup='<div id="sb-container">' +
'<div id="sb-overlay"></div>' +
'<div id="sb-wrapper">' +
'<div id="sb-title">' +
'<a id="sb-nav-close" title="{close}" onclick="Shadowbox.close()">Close</a>' +
'<div id="sb-title-inner"></div>' +
'</div>' +
'<div id="sb-body">' +
'<div id="sb-body-inner"></div>' +
'<div id="sb-loading">' +
'<a onclick="Shadowbox.close()">{cancel}</a>' +
'</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 style="clear:both"></div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
And then adjust the css a little bit:
#sb-title-inner {
display:inline;
}
#sb-title a {
display: block;
float: right;
height: 16px;
margin-left: 3px;
padding-left: 19px;
cursor: pointer;
}
#sb-nav-close {
background-image: url(shadowbox-source-3.0b/resources/close.png);
background-repeat: no-repeat;
color:#FFFFFF;
}
You may also want to restyle the font of the 'close' link.
So far I've only tested this with IE8.
Steffen
