Setup the script as per the instructions. Then in the head of the page add this script after the thumbnailviewer2.js script:
<script type="text/javascript">
jQuery(function($){
$('a[rel=enlargeimage]').bind('click mouseenter', function(e){
if(e.type === 'click'){e.preventDefault(); return;}
var infodiv = /\binfodiv *: *([^\b]+)\b/.exec(this.rev), $infotarget,
$target = $('#' + /\btargetdiv *: *([^\b]+)\b/.exec(this.rev)[1]);
if(infodiv){
infodiv = $('#' + infodiv[1]);
$infotarget = $('#' + infodiv.get(0).className).html(infodiv.html() || '');
$target.data('$infotarget', $infotarget.data('trigger', this));
} else if (($infotarget = $target.data('$infotarget')) && $infotarget.data('trigger') !== this){
$infotarget.empty();
}
});
});
</script>
And add this stylesheet to the head of the page:
<style type="text/css">
.infoarea {
visibility: hidden;
position: absolute;
top: -30000px;
left: -30000px;
}
</style>
or put its rules in an existing stylesheet for the page.
What this allows you to do is in addition to the loadarea div where the larger images (the link's href attribute) and title attribute (if any) will show up, you may have another division, give it an id of 'infoarea':
<div id="infoarea"></div>
Put it anywhere you want it on the page. Style it however you like (width, height, colors, font, etc.) It's different than .infoarea, it's #infoarea in a stylesheet or you may style it inline.
Now all you need to do is make up your detailed information divisions and associate them with each trigger. For example, if you have a trigger like:
<a href="some.jpg" rel="enlargeimage" rev="targetdiv:loadarea" title="Whatever, or there could be no title">Link Text or Thumbnail img tag</a>
You can add the highlighted:
<a href="some.jpg" rel="enlargeimage" rev="targetdiv:loadarea,infodiv:someid" title="Whatever, or there could be no title">Link Text or Thumbnail img tag</a>
Then at the bottom of the page, right before the closing </body> tag you can put:
<div id="someid" class="infoarea">
Detailed information About some.jpg This can go on and on and have HTML tags in it including link and/or image tags in it.
</div>
Do that for as many as you want/need, using a unique id for each one. Example with two triggers:
<a href="some.jpg" rel="enlargeimage" rev="targetdiv:loadarea,infodiv:someid" title="Whatever, or there could be no title">Link Text or Thumbnail img tag</a>
<a href="someother.jpg" rel="enlargeimage" rev="targetdiv:loadarea,infodiv:someotherid" title="Whatever, or there could be no title">Link Text or Thumbnail img tag</a>
Then at the bottom of the page, right before the closing </body> tag you can put:
<div id="someid" class="infoarea">
Detailed information About some.jpg This can go on and on and have HTML tags in it including link and/or image tags in it.
</div>
<div id="someotherid" class="infoarea">
Detailed information About someother.jpg Like the other one, this can go on and on and have HTML tags in it including link and/or image tags in it.
</div>
If you want more help, please post a link to the page on your site that contains the problematic code so we can check it out.