Еще один слайд шоу картинок для блоггер

Привет  всем поим читателям. Наконец-то получилось выкроить время на блог. Дома неприятности сломался холодильник и это при жаре +30 и выше. Стояла я перед ним и  спрашивала что же ты негодник не сломался зимой. Но не будем о плохом...

На работе все отлично, скоро получу свою первую зарплату, начальник хороший:)

Сегодня я к вам пришла еще с одним оформлением картинок на blogger возможно такое оформление кому нибудь понравиться. Это все тот же слайдер картинок,  но если в предыдущей статье  картинки менялись при наведении курсора, то в этой статье картинки будут сами   меняться, только нужно указать скорость изменения.

Вот так это будет выглядеть:

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


Извиняюсь за неудобства

сам скрипт

<style type="text/css"> .container1 { width: 400px;padding: 0;margin: 0 auto;}.folio_block { position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;}.main_view {float: left;position: relative;}/*--Window/Masking Styles--*/.window {-moz-box-shadow: 0px 0px 5px #303030;-webkit-box-shadow: 0px 0px 5px #303030;box-shadow: 0px 0px 5px #303030;border:1px solid #000000;height:220px; width: 400px;margin-top:15px;overflow: hidden; /*--Hides anything outside of the set width/height--*/position: relative;}.image_reel { position: absolute;top: 0; left: 0;}.image_reel img {float: left;}.paging_btrix { position: absolute;bottom: 10px; right: -7px;width: 178px; height:47px;z-index: 100; /*--Assures the paging stays on the top layer--*/text-align: center; line-height: 40px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFCFkWYd5VbV6-cg6Mig3rU6HFs3EWtJGe7tU2lUHwcFx_A1LmJq0kfawQ7kEn_cmTR7mYfEoYN5seiaIFnix4aMWd6CclfRZE92s3qa9evY1leRC7CyY7uOaGr1Vy15m2bCw6UPerXlo/s1600/paging_btrix_bg2.png) no-repeat; display: none;
}.paging_btrix a { padding: 5px;text-decoration: none;color: #fff;}.paging_btrix a.active { font-weight: bold; background: #920000; border: 1px solid #610000; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px;}.paging_btrix a:hover {font-weight: bold;}</style><!-- bof Automatic Image Slider w/ CSS & jQuery from Soh Tanaka --><div class="container1"><div class="main_view">    <div class="window">        <div class="image_reel">            <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8OOoVKNG7Q_enrnd0so5s2i59t3WWl8C9jJIRqpehr7SZkpSZFnABd6qV8YaWhwXcwPSlLZR3dvAmLRXBWAHiUuaJ6ep0RAKvguBI1BqoSuc_9lxaQNZvYW-uPDyC70-gxfcKY2lHvuta/s400/Beautiful+nature+photos-1.jpg" alt="" /></a>            <a href="#"><img src="http://cedarsoft.com/resources/com.cedarsoft.page.content.Software/flower.jpg" alt="" /></a>            <a href="#"><img src="http://i.jootix.com/t/picture-543b2d0059_big.jpg" alt="" /></a>            <a href="#"><img src="https://lh4.googleusercontent.com/-1D9bK51cShs/UDS7NHX37PI/AAAAAAAAACY/7qgXH4YCEHI/s400/untitled5.jpg" alt="" /></a>        </div>    </div>    <div class="paging_btrix">        <a href="#" rel="1">1</a>        <a href="#" rel="2">2</a>        <a href="#" rel="3">3</a>        <a href="#" rel="4">4</a>    </div></div></div><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script><script type="text/javascript">$(document).ready(function() { //Set Default State of each portfolio piece $(".paging_btrix").show(); $(".paging_btrix a:first").addClass("active"); //Get size of images, how many there are, then determin the size of the image reel. var imageWidth = $(".window").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; //Adjust the image reel to its new size $(".image_reel").css({'width' : imageReelWidth}); //paging_btrix + Slider Function rotate = function(){
  var triggerID = $active.attr("rel") - 1; //Get number of times to slide  var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide  $(".paging_btrix a").removeClass('active'); //Remove all active class  $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)  //Slider Animation  $(".image_reel").animate({
   left: -image_reelPosition  }, 500 ); }; //Rotation + Timing Event rotateSwitch = function(){
  play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds   $active = $('.paging_btrix a.active').next();   if ( $active.length === 0) { //If paging_btrix reaches the end...    $active = $('.paging_btrix a:first'); //go back to first   }   rotate(); //Trigger the paging_btrix and slider function  }, 5000); //Timer speed in milliseconds (3 seconds) }; rotateSwitch(); //Run function on launch //On Hover $(".image_reel a").hover(function() {  clearInterval(play); //Stop the rotation }, function() {  rotateSwitch(); //Resume rotation }); //On Click $(".paging_btrix a").click(function() {
  $active = $(this); //Activate the clicked paging_btrix  //Reset Timer  clearInterval(play); //Stop the rotation  rotate(); //Trigger rotation immediately  rotateSwitch(); // Resume rotation  return false; //Prevent browser jump to link anchor });});
</script>

500 -скорость движения картинки
5000 - время задержки одной картинки
 height:220px -высота виджета (высота виджета должна соответствовать высоте картинки. Например ширина картинки у вас 200 то и  виджет должен иметь ту же ширину.
width: 400px -длина виджета (тоже что и ширина)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8OOoVKNG7Q_enrnd0so5s2i59t3WWl8C9jJIRqpehr7SZkpSZFnABd6qV8YaWhwXcwPSlLZR3dvAmLRXBWAHiUuaJ6ep0RAKvguBI1BqoSuc_9lxaQNZvYW-uPDyC70-gxfcKY2lHvuta/s400/Beautiful+nature+photos-1.jpg -  адрес картинки

 На этом пожалуй все. Па-ПА

 

Пожалуйста не забывайте нажать