Advanced Search

Return to Snippet

Revision: 13327
at April 19, 2009 22:19 by demixo
Initial Code 
<html lang="en">
<head>
	<title>Panel slider</title>
	<script type="text/javascript" src="jquery.js"></script>
	<style type="text/css">
		#panel {
			position: absolute;
			bottom: -100px;
			left: 10px;
			width: 645px;
			height: 355px;
		}
		#left_slide {    
			width: 300px;    
			position: absolute;    
			left: 0;    
			top: 80px;    
			z-index: 1;
		}
		#center_slide {    
			width: 478px;    
			position: absolute;    
			left: 84px;    
			top: 0;    
			z-index: 2;
		}
		#right_slide {    
			width: 300px;    
			position: absolute;    
			left: 345px;    
			top: 80px;    
			z-index: 1;
		}	
	</style>
</head>
<body>

<div id="panel">
	<img src="http://valendesigns.com/wp-content/themes/valen/images/panel/left_slide.png" id="left_slide" alt="" />
    <img src="http://valendesigns.com/wp-content/themes/valen/images/panel/center_slide.png" id="center_slide" alt="" />
    <img src="http://valendesigns.com/wp-content/themes/valen/images/panel/right_slide.png" id="right_slide" alt="" /> 
</div>

<script type="text/javascript">
/* <![CDATA[ */
// Panel Slider
$.fn.imageSlide = function(options) {    
  var images = this.find('img').get(),
    container = this,
    settings = $.extend({
        speed: 400,
        styles : [{},{},{}]
    }, options),
    animating = false;  
  function slide(direction) {      
    animating = true;
    var left = direction.toLowerCase() === 'left';
    
    $(images).each(function(i){
        $(images[i]).animate(settings.styles[left ? (i == 0 ? 2 : i - 1) : (i == 2 ? 0 : i + 1)], settings.speed);
    });    
    setTimeout(function(){
        $(images[0]).css({zIndex: left ? 1 : 2});
        $(images[1]).css({zIndex: 1});
        $(images[2]).css({zIndex: left ? 2 : 1});
    }, settings.speed / 2);    
    setTimeout(function(){
        var old = images;
        images = [];
        images[0] = old[left ? 1 : 2];
        images[1] = old[left ? 2 : 0];
        images[2] = old[left ? 0 : 1];
        animating = false;
    }, settings.speed);
      
  } 
  $(container).click(function(e){
      if(animating) {return;}
      if(e.target === images[0]) {slide('right')}
      else {slide('left')}
  })
  return this;
};

$('#panel img').css('cursor','pointer');
$('#panel').imageSlide({
    // Higher = slower
    speed: 400,
    // Set each image's dimensions here:
    styles : [
        {width: 300,top: 80,left: 0},
        {width: 478,left: 84,top: 0},
        {width: 300,top: 80,left: 345}
    ]
})
/* ]]> */
</script>

</body>
</html>
Initial URL 
http://valendesigns.com/
Initial Description 

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Panel silder con jquery

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
javascript, jquery

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
jQuery