Interface plugin for jQuery

HTML

<a href="bw1.jpg" title="Moon eclipse" rel="imagebox-bw"><img src="ht_bw1.jpg" /></a>
<a href="bw2.jpg" title="Rain drops" rel="imagebox-bw"><img src="ht_bw2.jpg" /></a>
<a href="bw3.jpg" title="Church" rel="imagebox-bw"><img src="ht_bw3.jpg" /></a>
<a href="lights1.jpg" title="City lights" rel="imagebox-lights"><img src="ht_lights1.jpg" /></a>
<a href="lights2.jpg" title="Flash lights" rel="imagebox-lights"><img src="ht_lights2.jpg" /></a>
<a href="lights3.jpg" title="Laser lights" rel="imagebox-lights"><img src="ht_lights3.jpg" /></a>

CSS

.lienintelliance{ color:#F16710; text-decoration:underline; }
.lienintelliance:hover { text-decoration:none; }
.lienagence{ color: #666666; text-decoration:none;}
p.piedpage{  font-style:italic; margin-bottom:2px; margin-top:2px;}
p.seeothers{}
#ImageBoxOverlay { background-color: #000;}
#ImageBoxCaption { background-color: #F4F4EC;}
#ImageBoxContainer { width: 250px; height: 250px; background-color: #F4F4EC;} 
#ImageBoxCaptionText { font-weight: bold; padding-bottom: 5px; font-size: 13px; color: #000; }
#ImageBoxCaptionImages { margin: 0; }
#ImageBoxNextImage ( background-image: url(spacer.gif); background-color: transparent; }
#ImageBoxPrevImage { background-image: url(spacer.gif); background-color: transparent;}
#ImageBoxNextImage:hover { background-image: url(next_image.jpg); background-repeat: no-repeat;background-position: right top; }
#ImageBoxPrevImage:hover { background-image: url(prev_image.jpg); background-repeat: no-repeat; background-position: left bottom; }
h2, h4, p { padding-left: 20px; }
#viewjs { color:#222222; font-size:14px; font-height:bold; text-decoration:underline; }
#viewjs:hover {  text-decoration:none;}

Javascript

$(document).ready(
 function()
 {
  $.ImageBox.init(
   {
    loaderSRC: 'loading.gif',
    closeHTML: '<img src=close.jpg" />'
   }
  );
 }
);

View Example