Fade over in other image

[Joepiooo]

Hello,

I have a banner with images and in my content there are small thumbnails. When I click on a thumbnail the banner changes to that image.

I'm doing that with this code:

JS file:

jQuery.noConflict()

jQuery.merkviewer={
		loadmsg: '<img src="spinningred.gif" /><br />Loading Large Image...', //HTML for loading message. Make sure image paths are correct

	/////NO NEED TO EDIT BEYOND HERE////////////////

	dsetting: {trigger:'mouseover', preload:'yes', fx:'fade', fxduration:500, enabletitle:'yes'}, //default settings
	buildimage:function($, $anchor, setting){
		var imghtml='<img src="'+$anchor.attr('href')+'" style="border-width:0" />'
		if (setting.link)
			imghtml='<a href="'+setting.link+'">'+imghtml+'</a>'
		imghtml='<div>'+imghtml+((setting.enabletitle!='no' && $anchor.attr('title')!='')? '<br />'+$anchor.attr('title') : '')+'</div>'
		return $(imghtml)
	},

	showimage:function($image, setting){
		$image.stop()[setting.fxfunc](setting.fxduration, function(){
			if (this.style && this.style.removeAttribute)
				this.style.removeAttribute('filter') //fix IE clearType problem when animation is fade-in
		})
	}
	
}


jQuery.fn.addmerkviewer=function(options){
	var $=jQuery

	return this.each(function(){ //return jQuery obj
		if (this.tagName!="A")
			return true //skip to next matched element

		var $anchor=$(this)
		var s=$.extend({}, $.merkviewer.dsetting, options) //merge user options with defaults
		s.fxfunc=(s.fx=="fade")?"fadeIn" : "show"
		s.fxduration=(s.fx=="none")? 0 : parseInt(s.fxduration)
		if (s.preload=="yes"){
			var hiddenimage=new Image()
			hiddenimage.src=this.href
		}
		var $loadarea=$('#'+s.targetdiv)
		var $hiddenimagediv=$('<div />').css({position:'absolute',visibility:'hidden',left:-10000,top:-10000}).appendTo(document.body) //hidden div to load enlarged image in
		var triggerevt=s.trigger+'.thumbevt' //"click" or "mouseover"
		$anchor.unbind(triggerevt).bind(triggerevt, function(){
			if ($loadarea.data('$curanchor')==$anchor) //if mouse moves over same element again
				return false
			$loadarea.data('$curanchor', $anchor)
			if ($loadarea.data('$queueimage')){ //if a large image is in the queue to be shown
				$loadarea.data('$queueimage').unbind('load') //stop it first before showing current image
			}
			$loadarea.html($.merkviewer.loadmsg)
			var $hiddenimage=$hiddenimagediv.find('img')
			if ($hiddenimage.length==0){ //if this is the first time moving over or clicking on the anchor link
				var $hiddenimage=$('<img src="'+this.href+'" />').appendTo($hiddenimagediv) //populate hidden div with enlarged image
				$hiddenimage.bind('loadevt', function(e){ //when enlarged image has fully loaded
					var $targetimage=$.merkviewer.buildimage($, $anchor, s).hide() //create/reference actual enlarged image
					$loadarea.empty().append($targetimage) //show enlarged image
					$.merkviewer.showimage($targetimage, s)
				})
			$loadarea.data('$queueimage', $hiddenimage) //remember currently loading image as image being queued to load
			}

			if ($hiddenimage.get(0).complete)
				$hiddenimage.trigger('loadevt')
			else
				$hiddenimage.bind('load', function(){$hiddenimage.trigger('loadevt')})
			return false
		})
	})
}

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).addmerkviewer(options)
	})
})

This is my php/html:

    <div id="loadarea" style="position:absolute; top:100px; z-index:1;"></div>
<table border="1" class="bandenmerken">
            <tr>
<?php
    $merken = $merkclass->getMerken($website);
    $counter = 0;
    foreach($merken as $merk)
    {
        if($counter == 5)
        {
            echo "\t\t\t</tr>
            \t\t\t<tr>\n";
            $counter = 0;
        }
    echo "\t\t\t\t<td>
\t\t\t\t\t<a href=\"".str_replace(".png", "_125.png", $merk->merk_foto)."\" width=\"125\" height=\"53\" alt=\"".$merk->merk_naam."\" rel=\"enlargeimage\" rev=\"targetdiv:loadarea,trigger:click,fxstring:none\" class=\"logo\"><img src=\"http://www.url.net/logos/".str_replace(".png", "_125.png", $merk->merk_logo)."\" width=\"125\" height=\"53\" alt=\"".$merk->merk_naam."\" rel=\"enlargeimage\" rev=\"targetdiv:loadarea,trigger:click,fxstring:none\" class=\"logo\"/></a><br/>
\t\t\t\t\t<div class=\"types\">\n";
    echo "\t\t\t\t\t</div>
\t\t\t\t</td>\n";
$counter++;
    }

?>
            </tr>
        </table>

The images are in a database. This script is working just fine but I've got one problem.

When I have image loaded as banner and I click another image, it doesnt fade out of blend over in the image I just clicked. When I click the other image the loaded image is gone immediately and then the image I clicked starts to fade in.

What I want is that the loaded images fades out and the image you clicked fades in immediately. So that you dont see any background when the image changes.

Can somebody help me out with this?

Thank you very much

[dmikester1]

Are you using some sort of Jquery plugin?