Image Thumbnail Viewer II Style Help

[vlane95678]

1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem: We are using this script on this page;
http://www.lanitech.com/clients/hillcrest/tour.htm

We want to know 1) how we can change the font of the description since there is no stylesheet with this script and 2) how do we prevent the title="" from popping up when you put your mouseover the text links?

[jscheuer1]

For #1, use the id of the targetdiv as the selector. Say you have:

<a href="some.jpg" rel="enlargeimage" rev="targetdiv:loadarea" 
title="The Universe is just waiting to be explored">Saturn #1</a>

Then you could have a style rule like:

#loadarea {
	color: red;
	font-family: verdana, arial, sans-serif;
	font-size: 90%;
}

For #2 see:

http://www.dynamicdrive.com/forums/s...1&postcount=27

Let me know if you have any questions.

[vlane95678]

Thanks so much for the idea for #1. That worked great!

However #2 is not what I was looking for. I do not want to hide the caption that is underneath the picture but the light yellow box that appears when you put your mouse over any of the links on the left -- I guess you call that the Tooltip -- I want to hide the Tooltip only. It looks tacky because the titles are so long. I thought for sure others had already asked how to make it not do this but I couldn't find anyone who has.

Any ideas?

[jscheuer1]

That's what #2 does, it hides the tooltip.

[vlane95678]

Hmm because I did #2 and then all the text underneath the image disappeared. I want to keep that text but not show it when you mouseover the links on the left.

[jscheuer1]

Well then, now I might be in error, but I don't think so. If I'm not, then you've done something other than was recommended.

I know it's hard to follow jumping into a thread at one post like that, and it was a convoluted thread at that.

Setup your version:

I did #2 and then all the text underneath the image disappeared

live. It can be a separate page, not linked to from your other pages. Give me a link to it and I can probably figure out how to get it working as you want.


There are two things going on in that post #27. First they wanted the description on top of the enlarged image. Later they also wanted to get rid of the tooltip. The advice in post #27 of that thread did both. But it can optionally do only one or the other. You need to use the updated thumbnailviewer2.js file linked to at the bottom of that post #27, and the syntax supplied in that post, tailored to how you want things displayed.

Like:

<a title="Some long title that you don't want to be a tooltip" href="whatever.jpg" 
rel="enlargeimage" rev="targetdiv:loadarea,hidetitle:yes">Trigger Text or Image Tag</a>

If after you've gone through that, you are still having problems, like I say - put up a demo of your best effort and I can probably get it working for you.

[vlane95678]

Oh one more thing...how do I make the anchor text (cause I changed the image thumbs to text) to open a html page instead of an enlarged version of the image?

[jscheuer1]

That's a common request. Which HTML page? Often it's the one that clicking on the larger image would open. If so add this script to the head of the page:

<script type="text/javascript">
jQuery(function($){
	var re = /:(?!\/\/)/;
	$('a[rel=enlargeimage]').click(function(e){
		var opts = {}, rev = this.rev.split(','), i = rev.length - 1;
		for (i; i > -1; --i){
			rev[i] = rev[i].split(re);
			opts[$.trim(rev[i][0])] = $.trim(rev[i][1]);
			if(opts.link){
				e.preventDefault();
				location.href = opts.link;
				return;
			}
		}
	});
});
</script>

Once you have that, use this syntax for the trigger:

<a title="Some long title that you don't want to be a tooltip" href="whatever.jpg" rel="enlargeimage" 
rev="targetdiv:loadarea,hidetitle:yes,link:whatever.html">Trigger Text or Image Tag</a>

Replace whatever.html with the address to the page you want it to link to.