Advanced Search

Panel silder con jquery

/ Published in: jQuery
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <html lang="en">
  2. <head>
  3. 	<title>Panel slider</title>
  4. 	<script type="text/javascript" src="jquery.js"></script>
  5. 	<style type="text/css">
  6. 		#panel {
  7. 			position: absolute;
  8. 			bottom: -100px;
  9. 			left: 10px;
  10. 			width: 645px;
  11. 			height: 355px;
  12. 		}
  13. 		#left_slide {    
  14. 			width: 300px;    
  15. 			position: absolute;    
  16. 			left: 0;    
  17. 			top: 80px;    
  18. 			z-index: 1;
  19. 		}
  20. 		#center_slide {    
  21. 			width: 478px;    
  22. 			position: absolute;    
  23. 			left: 84px;    
  24. 			top: 0;    
  25. 			z-index: 2;
  26. 		}
  27. 		#right_slide {    
  28. 			width: 300px;    
  29. 			position: absolute;    
  30. 			left: 345px;    
  31. 			top: 80px;    
  32. 			z-index: 1;
  33. 		}	
  34. 	</style>
  35. </head>
  36. <body>
  37.  
  38. <div id="panel">
  39. 	<img src="http://valendesigns.com/wp-content/themes/valen/images/panel/left_slide.png" id="left_slide" alt="" />
  40.     <img src="http://valendesigns.com/wp-content/themes/valen/images/panel/center_slide.png" id="center_slide" alt="" />
  41.     <img src="http://valendesigns.com/wp-content/themes/valen/images/panel/right_slide.png" id="right_slide" alt="" /> 
  42. </div>
  43.  
  44. <script type="text/javascript">
  45. /* <![CDATA[ */
  46. // Panel Slider
  47. $.fn.imageSlide = function(options) {    
  48.   var images = this.find('img').get(),
  49.     container = this,
  50.     settings = $.extend({
  51.         speed: 400,
  52.         styles : [{},{},{}]
  53.     }, options),
  54.     animating = false;  
  55.   function slide(direction) {      
  56.     animating = true;
  57.     var left = direction.toLowerCase() === 'left';
  58.  
  59.     $(images).each(function(i){
  60.         $(images[i]).animate(settings.styles[left ? (i == 0 ? 2 : i - 1) : (i == 2 ? 0 : i + 1)], settings.speed);
  61.     });    
  62.     setTimeout(function(){
  63.         $(images[0]).css({zIndex: left ? 1 : 2});
  64.         $(images[1]).css({zIndex: 1});
  65.         $(images[2]).css({zIndex: left ? 2 : 1});
  66.     }, settings.speed / 2);    
  67.     setTimeout(function(){
  68.         var old = images;
  69.         images = [];
  70.         images[0] = old[left ? 1 : 2];
  71.         images[1] = old[left ? 2 : 0];
  72.         images[2] = old[left ? 0 : 1];
  73.         animating = false;
  74.     }, settings.speed);
  75.  
  76.   } 
  77.   $(container).click(function(e){
  78.       if(animating) {return;}
  79.       if(e.target === images[0]) {slide('right')}
  80.       else {slide('left')}
  81.   })
  82.   return this;
  83. };
  84.  
  85. $('#panel img').css('cursor','pointer');
  86. $('#panel').imageSlide({
  87.     // Higher = slower
  88.     speed: 400,
  89.     // Set each image's dimensions here:
  90.     styles : [
  91.         {width: 300,top: 80,left: 0},
  92.         {width: 478,left: 84,top: 0},
  93.         {width: 300,top: 80,left: 345}
  94.     ]
  95. })
  96. /* ]]> */
  97. </script>
  98.  
  99. </body>
  100. </html>

URL: http://valendesigns.com/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.