Add onclick to load different informational content into another div

[LisaD]

1) Script Title: Thumbnail Viewer II

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...thumbnail2.htm

3) Describe problem:

Thank you for this code! It works beautifully. I disabled the onclick action as per this:

<script type="text/javascript">
jQuery(function($){
	$('a[rel=enlargeimage]').click(function(e){
		e.preventDefault()
	});
});
</script>

And now I would like to have the click load content(detailed info about the image) into another load area. Is this possible?

I am very new to all this. Please forgive my ignorance.

[jscheuer1]

OK, change that to:

<script type="text/javascript">
jQuery(function($){
	$('a[rel=enlargeimage]').bind('click mouseenter', function(e){
		var infodiv = /\binfodiv *: *([^\b]+)\b/.exec(this.rev), $infotarget,
		$target = $('#' + /\btargetdiv *: *([^\b]+)\b/.exec(this.rev)[1]);
		if(infodiv && e.type === 'click'){
			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();
		}
		e.preventDefault();
	});
});
</script>

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.

You may now make an additional load area with 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 links and/or images 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 links and/or images 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 links and/or images in it.
</div>

[LisaD]

Wow! Thanks so much, John! Your explanations and step by steps really work beautifully.