вРазные полезности

Стильный слайдер сайта AtGron для uCoz

 
Сейчас трудно представить некие тематики сайта без слайдера. И здесь вы можете посмотреть и оценить стильный по своему формату слайдер и скачать его. Он создан под систему uCoz, что очень редко делают, основном адаптация идет, сам нужно поставить пять изображений, думаю для такого скрипта в самый раз будет.

Давайте с начала узнаем его ширину: 739px, а высота 341px
Теперь какая должна картинка быть по размерам: 570x270px

Все делаем так как написано. И после установки он начнет автоматически работать, но также и для пользователя или гостей будет видны переключатели, а это нашли что искали и делаем клик и переходим на этот материал, что был изображен.

Приступаем к установка:

1) Прежде скачаем файл и закинем в корень сайта, это папки js, css и img:
2) Панель Управление — Управление дизайном и туда где хотите видеть слайдер, ставим данный код:

Код
<script src=»/js/jquery-1.4.4.min.js»></script>  
<script src=»/js/slides.min.jquery.js»></script>  
<script>  
  $(function()  
  $(‘#slides’).slides(  
  preload: true,  
  preloadImage: ‘/img/loading.gif’,  
  play: 5000,  
  pause: 2500,  
  hoverPause: true,  
  animationStart: function()  
  $(‘.caption’).animate(  
  bottom:-35  
  ,100);  
  },  
  animationComplete: function(current)  
  $(‘.caption’).animate(  
  bottom:0  
  ,200);  
  if (window.console && console.log)   
  // example return of current slide number  
  console.log(current);  
  ;  
  }  
  });  
  });  
</script>  
<link rel=»stylesheet» href=»/css/slides_style.css»>  
<div id=»container»>  
<div id=»example»>  
<div id=»slides»>  
<div class=»slides_container»>  
<div>  
<a href=»#» title=»Текст описание» target=»_blank»><img src=»/img/slide-1.jpg» width=»570″ height=»270″ alt=»Slide 1″></a>  
<div class=»caption»><p>Текст описание</p></div>  
</div>  
<div>  
<a href=»#» title=»Текст описание» target=»_blank»><img src=»/img/slide-2.jpg» width=»570″ height=»270″ alt=»Slide 2″></a>  
<div class=»caption»><p>Текст описание</p></div>  
</div>  
<div>  
<a href=»#» title=»Текст описание» target=»_blank»><img src=»/img/slide-3.jpg» width=»570″ height=»270″ alt=»Slide 3″></a>  
<div class=»caption»><p>Текст описание</p></div>  
</div>  
<div>  
<a href=»#» title=»Текст описание» target=»_blank»><img src=»/img/slide-4.jpg» width=»570″ height=»270″ alt=»Slide 4″></a>  
<div class=»caption»><p>Текст описание</p></div>  
</div>  
<div>  
<a href=»#» title=»Текст описание» target=»_blank»><img src=»/img/slide-5.jpg» width=»570″ height=»270″ alt=»Slide 5″></a>  
<div class=»caption»><p>Текст описание</p></div>  
</div>  
</div>  
<a href=»#» class=»prev»><img src=»/img/arrow-prev.png» width=»24″ height=»43″ alt=»Arrow Prev»></a>  
<a href=»#» class=»next»><img src=»/img/arrow-next.png» width=»24″ height=»43″ alt=»Arrow Next»></a>  
</div>  
<img src=»/img/example-frame.png» width=»739″ height=»341″ alt=»Example Frame» id=»frame»>  
</div>  
</div>