Thumbnail Viewer 2: disable click and thumbnail alpha

[seyoo]

1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem:
I've already searched for the answer, but haven't been able to find it. In addition, the code was recently updated. I am working with the May 2010 code. Two questions:

1. I was able to get the code working and am using the default setting of having the large image show onmouseover. However, when the user clicks on the thumbnail, the user is linked to the jpg of the large image (in the same window). This is how it set to function as you can see in the demo at the URL listed above.

I understand why this does it since the image path is contained within the "a href" tag. Is there a simple solution to disabling this? I do not want the user clicking off the page to the large image file.

2. I've set the thumbnail images to a lower alpha (opacity). What is the best method for having the thumbnail image alpha to increase onmouseover and then to reset?

Thanks in advance.

[Ashoro]

For your first question I was actually searching for the answer just this past hour and was googling around, that's how I found your post. Been trying to figure out how to make it so it doesn't go to the link, then I started googling disabling a link and what not, and finally figured out how to do it.

Just add onclick="return false;" to your a href and it'll disable the default action when clicked.

http://www.faqs.org/docs/htmltut/linking/_A_onClick.html

[jscheuer1]

For both, add this script to the head of the page:


<script type="text/javascript">
jQuery(function($){
var initialOpacity = 0.6;
$('a[rel=enlargeimage]').css({opacity: initialOpacity}).click(function(e){
e.preventDefault();
}).hover(function(){
$(this).stop(true, true).animate({opacity: 1});
}, function(){
$(this).stop(true, true).animate({opacity: initialOpacity});
});
});
</script>

Place it after the other two from Step 1 on the demo page. Configure the initial opacity in the highlighted area as shown.

[seyoo]

For both, add this script to the head of the page:

Thanks, but the code doesn't quite function the way I would like it to. I don't have an example to show you online because I'm still testing and developing locally, but the alpha doesn't change on the initial mouseover.

To clarify, the user rolls over the thumbnail -> large image shows. If the user stops, nothing happens. If the user moves again (still over the same thumbnail -never a mouseout), then the alpha state of the thumbnail changes.

I would like both the larger image reveal and the thumbnail alpha change (<100 onmouseover) to happen simultaneously if possible. Any ideas?

Thanks again.

[jscheuer1]

You want the thumbnail to fade out onmouseover?