Привет всем поим читателям. Наконец-то получилось выкроить время на блог. Дома неприятности сломался холодильник и это при жаре +30 и выше. Стояла я перед ним и спрашивала что же ты негодник не сломался зимой. Но не будем о плохом...
На работе все отлично, скоро получу свою первую зарплату, начальник хороший:)
Сегодня я к вам пришла еще с одним оформлением картинок на blogger возможно такое оформление кому нибудь понравиться. Это все тот же слайдер картинок, но если в предыдущей статье картинки менялись при наведении курсора, то в этой статье картинки будут сами меняться, только нужно указать скорость изменения.
Вот так это будет выглядеть:
Из за нового шаблона возникли трудности с отображения слайда. Временно его работу вы можете посмотреть вот тутНа работе все отлично, скоро получу свою первую зарплату, начальник хороший:)
Сегодня я к вам пришла еще с одним оформлением картинок на blogger возможно такое оформление кому нибудь понравиться. Это все тот же слайдер картинок, но если в предыдущей статье картинки менялись при наведении курсора, то в этой статье картинки будут сами меняться, только нужно указать скорость изменения.
Вот так это будет выглядеть:
Извиняюсь за неудобства
сам скрипт
.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/AVvXsEhfgB_mV3IdKLJCSLAq-mQf8nz3RI80EC_GpSPltskxW60kbnlEB61Q2skcJBKQQcZ765_IWEQvuXVg2Vur-7WdJ2dRRAhovMN-R4xQtrGJWsTmEWZ-cD5R8G7xGv0-dPsT3cv6yaOAvl0/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;}$(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(){https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLZJ7KCnEH6HEoLfNdNbnEAEQx2MP47oZdB9G4XZt0GMtUA18KOuJnDEpNlBSzOwM_gTE2TAI6y-DGQy9NP6hc6BmfwaACMTWpR9VIZFEPjAXCXHvHim6yQypIbsnI1VfIp2WzbLiuaT8u/s400/Beautiful+nature+photos-1.jpg" alt="" /> http://cedarsoft.com/resources/com.cedarsoft.page.content.Software/flower.jpg" alt="" /> http://i.jootix.com/t/picture-543b2d0059_big.jpg" alt="" /> https://lh4.googleusercontent.com/-1D9bK51cShs/UDS7NHX37PI/AAAAAAAAACY/7qgXH4YCEHI/s400/untitled5.jpg" alt="" />
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 });});
500 -скорость движения картинки
5000 - время задержки одной картинки
height:220px -высота виджета (высота виджета должна соответствовать высоте картинки. Например ширина картинки у вас 200 то и виджет должен иметь ту же ширину.
width: 400px -длина виджета (тоже что и ширина)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLZJ7KCnEH6HEoLfNdNbnEAEQx2MP47oZdB9G4XZt0GMtUA18KOuJnDEpNlBSzOwM_gTE2TAI6y-DGQy9NP6hc6BmfwaACMTWpR9VIZFEPjAXCXHvHim6yQypIbsnI1VfIp2WzbLiuaT8u/s400/Beautiful+nature+photos-1.jpg - адрес картинки
На этом пожалуй все. Па-ПА
Пожалуйста не забывайте нажать
0 коммент. :