www.webdeveloper.com
Results 1 to 5 of 5

Thread: Trying to create jQuery crossfade gallery without plugins

  1. #1
    Join Date
    Jan 2011
    Posts
    18

    Trying to create jQuery crossfade gallery without plugins

    Is there a way to create a simple jQuery crossfade slideshow without plugin, so that a novice user like me would be able to understand it.
    I want to achieve something like this: http://www.simonbattersby.com/blog/s...age-crossfade/
    but for some reason I can't get this script to work (understand it), so can someone write me a simple script that does this effect?

  2. #2
    Join Date
    Dec 2008
    Posts
    488
    Here's a very simplified version that also fades titles. The javascript is actually very simple. Thing is, it's not really a cross-fade, so to speak. What makes it work is that we put another image on top of the current one and fade it in, so that it appears to cross fade. What's actually happening is that the current image becomes a background for the current one as it fades in.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <title>Fly Gallery</title>
    <style type="text/css">
    body {
         background: #222;
    }
    #gallery {
        background: #ccc;
        position: relative;
        width: 506px;
        height: 337px;
        padding: 10px;
    }
    #gallery div {
        position: absolute;
        top: 10px;
    }
    #gallery span {
        display: block;
        height: 75px;
        width: 506px;
        background: #111;
        position: absolute;
        bottom: 10px;
        z-index: 99999999999;
        text-align: center;
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 24px;
        font-weight: bold;
        color: #ccc;
        line-height: 75px;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        filter: alpha(opacity=80);
        -moz-opacity: 0.8;
        -khtml-opacity: 0.8;
        opacity: 0.8;
    }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
    var gal_interval = 6000;
    
    function gal_Rotate() {
        $('#gallery span').fadeOut('slow', function () {
            $('#gallery div:first')
                .hide()
                .insertAfter($('#gallery div:last'))
                .fadeIn(1500, function () {
                    $('#gallery span')
                        .text($('#gallery div:last img').attr('alt'))
                        .fadeIn('slow');
                    window.setTimeout(gal_Rotate, gal_interval);
                });
        });
    }
    
    $(function () {
        $('#gallery span').text($('#gallery div:last img').attr('alt'));
        window.setTimeout("gal_Rotate()", gal_interval);
    });
    </script>
    </head>
    
    <body>
    <div id="gallery">
        <div><img src="http://www.simonbattersby.com/images/photography/insects/Gallery1.jpg" alt="Hoverfly" /></div>
        <div><img src="http://www.simonbattersby.com/images/photography/insects/Gallery11.jpg" alt="Common House Fly" /></div>
        <div><img src="http://www.simonbattersby.com/images/photography/insects/Gallery12.jpg" alt="Blue Bottle Fly" /></div>
        <span></span>
    </div>
    </body>
    </html>
    So, let me explain how this works. The first thing I had to do was build my images in HTML, so that I'd be able to easily target them with the $() selector. This involved creating a styled wrapper div, which I gave the ID of "gallery".

    I then put them images in. Without the CSS, they would just run down the page, so I had to give them special positioning to lay them on top of each other. The one that is last in the list is the one that shows on top (this I can use to my advantage).

    To simply rotate the images, all we need is a function that will hide the one in back (display: none), move it to the front, then fade it in. When that's complete, we trigger the next cycle. Instead of simply triggering the function again, I created a timeout that would trigger it several seconds later.

    Code:
    function gal_Rotate() {
        $('#gallery div:first')
            .hide()
            .insertAfter($('#gallery div:last'))
            .fadeIn(1500, function () {
                window.setTimeout(gal_Rotate, gal_interval);
            });
    }
    To start the script I simply created that same timeOut in the jquery version of the onload event $(function(){});

    To add the title overlay, I just created a span and used the jquery to pull the alt tag out of the image. I then worked that into the animation:

    Code:
    function gal_Rotate() {
        $('#gallery span').fadeOut('slow', function () {
            $('#gallery div:first')
                .hide()
                .insertAfter($('#gallery div:last'))
                .fadeIn(1500, function () {
                    $('#gallery span')
                        .text($('#gallery div:last img').attr('alt'))
                        .fadeIn('slow');
                    window.setTimeout(gal_Rotate, gal_interval);
                });
        });
    }
    Last edited by jamesbcox1980; 07-19-2011 at 04:02 PM.

  3. #3
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    css3 rocks
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<title>html5 slides</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <style type='text/css'>
    	ul li img{  opacity:0.01; overflow: hidden;  position: absolute; 
    		-moz-transition-property: opacity; 
    		-moz-transition-duration: 0.7s; 
    		-webkit-transition-property: opacity; 
    		-webkit-transition-duration: 0.7s; 
    		transition-property: opacity; 
    		transition-duration: 0.7s; 
    	}
    
    	ul { list-style:none; display:block;}
    
    	ul li.active img { opacity: 1;  }
    	
    </style>	
    
    </head>
    <body>
    
      
    <ul>
     <li><img src="http://www.simonbattersby.com/images/photography/insects/Gallery1.jpg" /></li>	
     <li><img src="http://www.simonbattersby.com/images/photography/insects/Gallery10.jpg" /></li>	
     <li><img src="http://www.simonbattersby.com/images/photography/insects/Gallery11.jpg" /></li>	
     <li><img src="http://www.simonbattersby.com/images/photography/insects/Gallery12.jpg" /></li>	
    </ul>	
      
    
    <script type='text/javascript'>
    
    	var kids=[].slice.call(document.querySelectorAll("ul li"));
    	kids.active=0;
    
    	function passive(elm){elm.className="";}
    	function active(elm) {elm.className="active";}
    	
    
            function reflow(){
    		kids.map(passive);
    		kids.active++;
    		if(kids.active >= kids.length){ kids.active=0; }
    		active(kids[kids.active]);
    	}
    
    	setInterval(reflow, 2500);
    	reflow();
    	
    </script>	
      
    </body>
    </html>

  4. #4
    Join Date
    Dec 2008
    Posts
    488
    I do like the idea of not having to use a framework!

  5. #5
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by jamesbcox1980 View Post
    I do like the idea of not having to use a framework!
    you can use "$" in conjunction withjQuery instead of "document.querySelectorAll" for backward compatibility.

    the nice thing about using css transitions is that old browser don't break, they just doesn't fade. people with old browsers probably care less about presentation fx anyway...

    compared to scripting dom properties with a bunch of stall-able setTimeout()s, CSS animation in general is much smoother and lighter on the old cpu, on all current and future browsers. It's even hardware accelerated in IE9, with other browsers now playing catch-up.
    other browser catching up to IE, i can't believe we're seeing that day...

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