Need to extend Image Thumbnail Viewer II

[cmwagner]

Image Thumbnail Viewer II
http://www.dynamicdrive.com/dynamici...thumbnail2.htm

I've got the ITV2 working fine. But, I need to make it so that the "big" image does a rollover for "before" and "after" photos, and make it so that I can actually do a "caption" in a div that has an appropriate id of "caption."

If possible, I'd like to make the caption change on rollover as well (i.e "This is the photo (before)" and "This is the photo (after)")

I know just enough javascript to get myself into trouble, and nowhere near enough about jQuery.

I know I could change the caption with the innerHTML property. But I am completely lost when it comes to jQuery. I can barely follow the logic of the ITV2, let alone be able to extend it to do things I need to be able to do.

Can someone help me out here?

EDIT:
The "live" (well, I'm still working on things) page I am using this in is located at: http://www.cmwagner.net/temporary/Hu...ileGallery.php

I tried adding the following to the document.ready function (this is the entire document.ready() function), based on reading http://www.shopdev.co.uk/blog/jquery...rs-using-this/, plus some info from http://webdevel.blogspot.com/2008/04...th-jquery.html but it doesn't work.

jQuery(document).ready(function($){
	var $anchors=$('a[rel="enlargeimage"]') //look for links with rel="enlargeimage"
	$anchors.each(function(i){
		var options={}
		var rawopts=this.getAttribute('rev').split(',') //transform rev="x:value1,y:value2,etc" into a real object
		for (var i=0; i<rawopts.length; i++){
			var namevalpair=rawopts[i].split(/:(?!\/\/)/) //avoid spitting ":" inside "http://blabla"
			options[jQuery.trim(namevalpair[0])]=jQuery.trim(namevalpair[1])
		}
		$(this).addthumbnailviewer2(options)
	})
	// preload images first (can run before page is fully loaded)
	$.preloadImages(
		"images/gallery/img1_b.jpg", 
		"images/gallery/img2_b.jpg", 
		"images/gallery/img3_b.jpg", 
		"images/gallery/img4_b.jpg", 
		"images/gallery/img5_b.jpg", 
		"images/gallery/img6_b.jpg", 
		"images/gallery/img7_b.jpg", 
		"images/gallery/img8_b.jpg", 
		"images/gallery/img9_b.jpg", 
		"images/gallery/img10_b.jpg", 
		"images/gallery/img11_b.jpg", 
		"images/gallery/img12_b.jpg");

	$(function() {
		$("#mainImg").hover(function() {
			$(this).attr("src", $(this).attr("src").split("_a.").join("_b."));
		}, function() {
			$(this).attr("src", $(this).attr("src").split("_b.").join("_a."));
		});
	});

})

[ddadmin]

Lets focus on just the mouse over images part for now (setting aside any captions). Assuming your "before" images all contain the "_a" suffix, and "after" image the "_b" suffix, try the below modified .js file, which should cause the enlarged image to show the later version when the mouse rolls over it.

[cmwagner]

Oh, that is JUST beautiful! (the code, not the horrible, horrible teeth photos I have to do this to).

I really have a lot to learn about jQuery - so I needed to unbind it first?

So, there's not going to be a "simple" way to do a "caption" with innerHTML, is there? Unless I do it in the HTML in the anchor tag - which strikes me as inelegant, but when needs must.

Off to Amazon to pick up a beginner jQuery book.....sigh.

Thank you so much!

[ddadmin]

You're welcome. To the issue of the caption now, the script already does support a caption shown beneath the enlarged image. I reckon want you're asking is how to show a different caption when the mouse rolls over the enlarged image?

[cmwagner]

Yeah, unfortunately I need to place the caption in the area above the larger image, rather than over the rolled over image. And hopefully allow it to change when I rollover (i.e. same info, but adding "before" and "after").

Although, with the "enabletitle" option I would have thought that I could put in an id, and use CSS to move the caption to where I need it.

However, when I did that, it offset the whole image to the right by the absolute amount.

So I changed the code again this time to:

imghtml='<div>'+imghtml+ '</div>' +((setting.enabletitle && $anchor.attr('title')!='')? '<div id="caption">'+$anchor.attr('title') : '')+'</div>'

Trying to basically move the caption where I needed it. But, I get 2 copies of the caption div. 1 basically above the whole thing (because I needed to use a negative margin to take it back off the image), and one exactly where I want it.

I think I am going to ignore the change of caption on rollover and just be happy with getting the caption to work correctly.

(Note: There won't be a black background behind the caption div, but there will be a background. The black is just to make it easy to figure out where everything is sitting before I actually add the background image).

Updated to the example page, located at: http://www.cmwagner.net/temporary/Hu...ileGallery.php

[ddadmin]

Not sure if this matches entirely what you're looking for, but try the below modified .js file. It lets you define two descriptions, one that shows before mouseover, and one onmouseover:

<a href="saleen_a.jpg" rel="enlargeimage" rev="targetdiv:loadarea" title="The Universe is just waiting to be explored|You know what I mean?">Saturn #1</a>

So to define the description, you'd still use the title attribute, but separate the two with a pipe ("|"). The description is shown inside an arbitrary DIV with ID="comment":

<div id="comment"></div>

[cmwagner]

Great thought, and I would think it would work - but the comment div isn't showing.

Of course, when I view it in Firefox, using the Webmaster tools extension allowing for the "generated source" - there isn't any id on the comment div.

This is what it shows:

<div style="display: block;" data-note="Resin Bonding (Before); Dentist: Kris Eklund|Resin Bonding (After); Dentist: Kris Eklund">

Which means it is probably hiding behind the image.

If I add id="comment" to the div portion of the JS file (located here):

imghtml='<div id="comment" data-note="'+$anchor.attr('title')+'" >'+imghtml+'</div>'

Then it invalidates the rollover (and doesn't show EITHER image _a or _b). Shown at: http://www.cmwagner.net/temporary/Hu...ileGallery.php