SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fadein amination

    Hi everyone,

    I've set up an html5 slideshow using the code in the tutorial located at the following link:

    http://tutorialzine.com/2010/09/html...deshow-jquery/

    I've also used the code at the following link to make the slideshow auto-advance:

    http://tutorialzine.com/2011/01/how-...ng-slideshows/

    It all works well but I don't like the way there's a lighting effect that happens when it transitions from slide to slide.

    Demo:
    http://demo.tutorialzine.com/2010/09...slideshow.html

    The following code was used:

    Code:
    $(window).load(function(){
    	
    	// We are listening to the window.load event, so we can be sure
    	// that the images in the slideshow are loaded properly.
    
    
    	// Testing wether the current browser supports the canvas element:
    	var supportCanvas = 'getContext' in document.createElement('canvas');
    
    	// The canvas manipulations of the images are CPU intensive,
    	// this is why we are using setTimeout to make them asynchronous
    	// and improve the responsiveness of the page.
    
    	var slides = $('#slideshow li'),
    		current = 0,
    		slideshow = {width:0,height:0};
    
    	setTimeout(function(){
    		
    		window.console && window.console.time && console.time('Generated In');
    		
    		if(supportCanvas){
    			$('#slideshow img').each(function(){
    
    				if(!slideshow.width){
    					// Taking the dimensions of the first image:
    					slideshow.width = this.width;
    					slideshow.height = this.height;
    				}
    				
    				// Rendering the modified versions of the images:
    				createCanvasOverlay(this);
    			});
    		}
    		
    		window.console && window.console.timeEnd && console.timeEnd('Generated In');
    		
    		$('#slideshow .arrow').click(function(){
    			var li			= slides.eq(current),
    				canvas		= li.find('canvas'),
    				nextIndex	= 0;
    
    			// Depending on whether this is the next or previous
    			// arrow, calculate the index of the next slide accordingly.
    			
    			if($(this).hasClass('next')){
    				nextIndex = current >= slides.length-1 ? 0 : current+1;
    			}
    			else {
    				nextIndex = current <= 0 ? slides.length-1 : current-1;
    			}
    
    			var next = slides.eq(nextIndex);
    			
    			if(supportCanvas){
    
    				// This browser supports canvas, fade it into view:
    
    				canvas.fadeIn(function(){
    					
    					// Show the next slide below the current one:
    					next.show();
    					current = nextIndex;
    					
    					// Fade the current slide out of view:
    					li.fadeOut(function(){
    						li.removeClass('slideActive');
    						canvas.hide();
    						next.addClass('slideActive');
    					});
    				});
    			}
    			else {
    				
    				// This browser does not support canvas.
    				// Use the plain version of the slideshow.
    				
    				current=nextIndex;
    				next.addClass('slideActive').show();
    				li.removeClass('slideActive').hide();
    			}
    		});
    		
    	},100);
    
    	// This function takes an image and renders
    	// a version of it similar to the Overlay blending
    	// mode in Photoshop.
    	
    	function createCanvasOverlay(image){
    
    		var canvas			= document.createElement('canvas'),
    			canvasContext	= canvas.getContext("2d");
    		
    		// Make it the same size as the image
    		canvas.width = slideshow.width;
    		canvas.height = slideshow.height;
    		
    		// Drawing the default version of the image on the canvas:
    		canvasContext.drawImage(image,0,0);
    		
    
    		// Taking the image data and storing it in the imageData array:
    		var imageData	= canvasContext.getImageData(0,0,canvas.width,canvas.height),
    			data		= imageData.data;
    		
    		// Loop through all the pixels in the imageData array, and modify
    		// the red, green, and blue color values.
    		
    		for(var i = 0,z=data.length;i<z;i++){
    			
    			// The values for red, green and blue are consecutive elements
    			// in the imageData array. We modify the three of them at once:
    			
    			data[i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
    			data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
    			data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
    			
    			// After the RGB elements is the alpha value, but we leave it the same.
    			++i;
    		}
    		
    		// Putting the modified imageData back to the canvas.
    		canvasContext.putImageData(imageData,0,0);
    		
    		// Inserting the canvas in the DOM, before the image:
    		image.parentNode.insertBefore(canvas,image);
    	}
    	
    });
    I wondered if someone could tell me how to adjust the code so that there's a smooth transition but no lighting effect?

    Appreciate any advice.

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    It looks like most of that code is specifically built in that manner so that it can deal with / handle all the <canvas> stuff (to create the blend mode).

    If all you want is a simple fade, you can rip most of that code out and just use the following:

    Code javascript:
    $(window).load(function(){
     
        // We are listening to the window.load event, so we can be sure
        // that the images in the slideshow are loaded properly.
     
     
        var slides = $('#slideshow li'),
            current = 0,
            slideshow = {width:0,height:0};
     
        $('#slideshow .arrow').click(function(){
            var li = slides.eq(current),
                nextIndex = 0;
     
     
            // Depending on whether this is the next or previous
            // arrow, calculate the index of the next slide accordingly.
     
            if($(this).hasClass('next')){
                nextIndex = current >= slides.length-1 ? 0 : current+1;
            }
            else {
                nextIndex = current <= 0 ? slides.length-1 : current-1;
            }
     
     
            var next = slides.eq(nextIndex);
     
            current=nextIndex;
     
            /*
               Note the use of fadeIn() and fadeOut() rather than hide() and show() here.
            */
            next.addClass('slideActive').fadeIn();
            li.removeClass('slideActive').fadeOut();
        });
    });
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much for that - it works perfectly now.

    So I guess now that it's not using Canvas it will also be compatible with older browsers - is that right?

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    It was already compatible with older browsers as it was detecting support for <canvas> and falling back to a non-canvas solution

    But yes, it's (still) compatible with older browsers.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  5. #5
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok great - thanks again


Bookmarks

Posting Permissions

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