www.webdeveloper.com
Results 1 to 2 of 2

Thread: Fade over in other image

  1. #1
    Join Date
    Jun 2012
    Posts
    23

    Fade over in other image

    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:

    Code:
    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:

    PHP Code:
        <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

  2. #2
    Join Date
    May 2007
    Posts
    105
    Are you using some sort of Jquery plugin?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles