Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    40
    Thanks
    0
    Thanked 1 Time in 1 Post

    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
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 565 Times in 558 Posts
    UNTESTED

    Try to replace this line
    Code:
    var $targetimage=$.merkviewer.buildimage($, $anchor, s).hide() //create/reference actual enlarged image
    with
    Code:
    var $targetimage=$.merkviewer.buildimage($, $anchor, s).fadeOut(setting.fxduration) //create/reference actual enlarged image

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    40
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hello,

    I replaced the line of code with the one you suggested and tested it but no luck...

    When I click the thumbnail with that line of code I jump to a blank page and load the large image


  •  

    Posting Permissions

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