Блог
Главная » jQuery » Полноэкранное слайдшоу через плагин Supersized на jQuery для uCoz
07:32




Интересное полноэкранное слайдшоу для вашего сайта

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах вставляйте:

Code

<script src="/js/effects.core.js"></script>  
  <script src="/js/effects.slide.js"></script>  
  <script type="text/javascript" src="/js/supersized.2.0.js"></script>  
  <script type="text/javascript">  
  $(function(){  
  $.fn.supersized.options = {  
  startwidth: 640,  
  startheight: 480,  
  vertical_center: 1,  
  slideshow: 1,  
  navigation: 1,  
  transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left  
  pause_hover: 0,  
  slide_counter: 1,  
  slide_captions: 1,  
  slide_interval: 3000  
  };  
  $('#supersize').supersized();  
  });  
  </script>  

  <style type="text/css">  
  *{  
  margin:0;  
  padding:0;  
  }  
  body {  
  overflow:hidden;/*Needed to eliminate scrollbars*/  
  background:#000;  
  }  
  #content{  
  margin:0px auto;  
  height:100px;  
  width:100%;  
  bottom:5%;  
  z-index: 3;  
  background:#262626 no-repeat 90%;  
  border-top:1px solid #000;  
  border-bottom:1px solid #4F4F4F;  
  position:absolute;  
  }  
  #contentframe{  
  overflow: hidden;  
  border-top:solid 1px #4F4F4F;  
  border-bottom:1px solid #000;  
  height: 100%;  
  text-align:left;  
  z-index: 3;  
  }  
  #slidecounter{  
  float:left;  
  color:#4F4F4F;  
  font:50px "Helvetica Neue", Arial, sans-serif;  
  font-weight:bold;  
  margin:18px 20px;  
  }  
  #slidecaption{  
  overflow: hidden;  
  float:left;  
  color:#FFF;  
  font:26px "Helvetica Neue", Arial, sans-serif;  
  font-weight:bold;  
  margin:33px 0;  
  }  
  /*Supersized Stamp*/  
  .stamp{  
  float: right;  
  margin: 25px 20px 0 0;  
  }  
  /*Supersize Plugin Styles*/  
  #navigation{  
  background: url('http://www.buildinternet.com/project/supersized/images/navbg.gif') no-repeat;  
  float: right;  
  margin:22px 20px 0 0;  
  }  
  #loading {  
  position: absolute;  
  top: 49.5%;  
  left: 49.5%;  
  z-index: 3;  
  width: 24px;  
  height: 24px;  
  text-indent: -999em;  
  background-image: url(http://www.buildinternet.com/project/supersized/images/progress.gif);  
  }  
  #supersize{  
  position:fixed;  
  }  
  #supersize img, #supersize a{  
  height:100%;  
  width:100%;  
  position:absolute;  
  z-index: 0;  
  }  
  #supersize .prevslide, #supersize .prevslide img{  
  z-index: 1;  
  }  
  #supersize .activeslide, #supersize .activeslide img{  
  z-index: 2;  
  }  
   
   
  </style>  
  <script type="text/javascript">  
  (function(){  
  var bsa = document.createElement('script');  
  bsa.type = 'text/javascript';  
  bsa.async = true;  
  bsa.src = '//s3.buysellads.com/ac/bsa.js';  
  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);  
  })();  
  </script>


Следующий код сразу после предыдущего:
Code

<div id="loading"> </div>  
   
  <!--Slides-->  
  <div id="supersize">  
  <img src="Ссылка на картинку" title="Заголовок"/>  
  <img src="Ссылка на картинку" title="Заголовок"/>  
  <img src="Ссылка на картинку" title="Заголовок"/>  
  <img src="Ссылка на картинку" title="Заголовок"/>  
  </div>  

  <div id="content">  
  <div id="contentframe">  
   
  <div id="slidecounter"><!--Slide counter-->  
  <span class="slidenumber"></span>/<span class="totalslides"></span>  
  </div>  
  <div id="slidecaption"></div>  
   
  <!--Navigation-->  
  <div id="navigation">  
  <a href="#" id="prevslide"><img src="/images/back_dull.gif"/></a><a href="#" id="pauseplay"><img src="/images/pause_dull.gif"/></a><a href="#" id="nextslide"><img src="/images/forward_dull.gif"/></a>  
  </div>  
  </div>  
  </div>


Залейте три скрипта из прикреплённого архива в папку js и все картинки в папку images

Категория: jQuery

Вы не авторизованы, по-этому вы не можете скачивать файлы к материалу, просматривать демо, читать и оставлять комментарии!

Knu.com
  • Опросик
  • Зайдете ли вы к нам еще?