Millenium

Рипнул слайдер ну очень понравился и вот решил скинуть на сайт)) Слайдер стоит 18$ (на офф сайте) так что перечисляйте деньги! (шутка) 

Ну что приступим)) 

<link rel="stylesheet" href="/css/reset.css" /> 

  <link rel="stylesheet" href="/css/ccslider.css" /> 

  <link rel="stylesheet" href="/css/slider_style.css" /> 

   

  <style type="text/css">  

  body { 

  width: 100%; 

  max-width: 1000px; 

  } 

   

  #slider { 

  width: 1000px; 

  height: 450px; 

  } 

   

  #slider .control-links { 

  margin-top: -15px; 

  } 

   

  #demo-description { 

  max-width: 900px; 

  width: 90%; 

  margin: 60px auto; 

  color: #fff; 

  font: 20px 'PT Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 

  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); 

  } 

  </style> 

   

  <!--[if lt IE 8]> 

  <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> 

  <![endif]--> 

   

  <!--[if lt IE 9]> 

  <style type="text/css"> 

  .slider-caption { 

  background: transparent; 

  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FFFFFF,endColorstr=#B2FFFFFF)"; /* IE8 */ 

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FFFFFF,endColorstr=#B2FFFFFF); /* IE6 & 7 */  

  zoom: 1; 

  } 

  </style> 

Далее создаем глобальный блок под названием SLIDESHOW (можете назвать его как захотите,но чтоб потом не задаться вопросом а чо это за блок?сделайте как написанно)  

<div id="slider"> 

  [color=blue]<!-- <Картинки которые будут в слайдере> -->[/color] 

  <img src="http://1.s3.envato.com/files/29381343/gallery/demo1/assassins1.jpg" alt="This is an example of a simple caption" data-caption-position="bottom" data-transition='{"effect": "cubeUp", "slices": 9, "animSpeed": 1200, "delay": 100, "delayDir": "fromCentre", "easing": "easeInOutBack", "depthOffset": 300, "sliceGap": 30}' /> 

  <img src="http://1.s3.envato.com/files/29381343/gallery/demo1/deus-ex1.jpg" alt="" data-captionelem="#caption" data-caption-position="top" data-transition='{"effect": "cubeRight", "slices": 5, "delay": 200}' /> 

  <img src="http://1.s3.envato.com/files/29381343/gallery/demo1/batman.jpg" alt="Images can also serve as links. To see this in effect click on this slide image" data-caption-position="left" data-href="http://google.com" data-transition='{"effect": "cubeDown", "slices": 15, "animSpeed": 3000, "delay": 30, "easing": "easeInOutElastic", "depthOffset": 200, "sliceGap": 20}' /> 

  <img src="http://1.s3.envato.com/files/29381343/gallery/demo1/prince.jpg" alt="" data-transition='{"effect": "cubeLeft", "slices": 5, "delay": 200, "delayDir": "toCentre"}' /> 

  <img src="http://1.s3.envato.com/files/29381343/gallery/demo1/assassins2.jpg" alt="" data-transition='{"effect": "cubeUp", "slices": 5, "animSpeed": 1300, "delay": 100, "easing": "easeInOutCubic", "depthOffset": 500, "sliceGap": 50}' /> 

  <img src="http://1.s3.envato.com/files/29381343/gallery/demo1/deus-ex2.jpg" alt="" data-transition='{"effect": "cubeRight", "slices": 5, "delay": 200, "delayDir": "last-first"}' />  

  </div> 

[color=blue]<!-- </Картинки которые будут в слайдере> -->[/color] 

   

  <div id="caption" class="cc-caption">This is an example of a caption with a <a href="http://www.google.com">link</a></div> 

   

   

   

  <script src="/js/jquery.min.js"></script> 

  <script>!window.jQuery && document.write('<script src="/js/jquery-1.7.2.min.js"><\/script>')</script> 

  <script src="/js/jquery.tools.tooltip.min.js"></script>  

  <script src="/js/jquery.easing.1.3.min.js"></script> 

  <script src="/js/jquery.ccslider-3.0.min.js"></script>  

  <script> 

  $(function(){ 

  $('#demo-nav').find('a').tooltip({effect: 'slide'}); 

  }); 

   

  $(window).load(function(){ 

  $('#slider').ccslider({ 

  _3dOptions: { 

  imageWidth: 900, 

  imageHeight: 350 

  } 

  }); 

  }); 

  </script>