Automatic Image Slider với CSS & jQuery cho blogger

Khi chúng ta bước vào blogger, chúng ta đều thấy trong temp của chúng ta hầu như đều có tiện ích Slidershow 1 tiện ích cho phép hiển thị ảnh 1 cách phong phú, bất ngờ và đầy sáng tạo được biết đến với 1 tên gọi khá hay "Automatic Image Slider"

View Demo

Tìm hiểu thành phần

 Đây là 1 Slider của Sohtanaka được viết cho anh chàng "WP" kẻ thù không đội trời chung với yolks nay sẽ được chuyển thể qua blogger nhà ta vì tính chuyên nghiệp của slider này

Chúng ta sẽ bắt đầu tìm hiểu từng phần để dễ dàng tùy biến cũng như việc chỉnh sửa sau này:

Việc đầu tiên chúng ta gọi 1 thẻ là <div class="container"> trong đó nó bao gồm những thành phần sau.

<div class="main_view">là nơi trình chiếu ảnh bao gồm 2 thành phần nhỏ khác đó là  <div class="window"> là khung màn ảnh trình chiếu và <div class="image_reel"> là nơi chứa các ảnh sẽ hiển thị và <div class="paging"> là phân trang có chứa những nút ẩn chuyển đổi bức ảnh khác chúng ta có thể hiểu rõ hơn bằng cách xem hình dưới đây:

Thực hành về css

Bây giờ chúng ta sẽ thực hiện theo những gì viết ở trên:
Đầu tiên chúng ta vào phần chỉnh sửa html

 

 Sau đó tìm :

]]></b:skin>

rồi copy đoạn code sau đây vào trước nó:

/*--Main Container--*/
.main_view {
    float: left;
    position: relative;
}
/*--Window/Masking Styles--*/
.window {
    height:286px;    width: 790px;
    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 Styles--*/
.paging {
    position: absolute;
    bottom: 40px; 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/AVvXsEiArqRE5u6GCzBMRuoLgHNe5LvnM00QeNJfDS5zdjJpo-sXYrI4xvfIe1Q1gfRxMc-sPCtKMRtWK330_li6QiRa2pLZRB4TrwzqUx0zgazuOoZdZLshpjczMqJJK5uYJOYP5J-azCpRHNF7/s1600/paging_bg2.png) no-repeat;
    display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
    padding: 5px;
    text-decoration: none;
    color: #fff;
}
.paging a.active {
    font-weight: bold;
    background: #920000;
    border: 1px solid #610000;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

trong code yolks đã bôi đậm 2 đoạn code cần chỉnh sửa cho bạn, chúng ta hãy chỉnh thông số cho phù hợp với blog bạn nhé

Tìm hiểu js và thực hành

Trước tiên chúng ta nên tìm thẻ

</head>

và add đoạn mã js này trước nó:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js' type='text/javascript'/>

Sau đó lại tạo thêm 1 js nữa lần này là js truy vấn slider chúng ta sẽ chèn dưới đoạn code trên:

<script type='text/javascript'>
$(document).ready(function() {
    //Nơi bạn đặt code js vào
});
</script>

Sau đó chúng ta hãy lần lượt bỏ code vào theo thứ tự
Đoạn code thứ nhất sẽ giúp cho chúng ta hiển thị các đoạn phân trang và liên kết đầu tiên.Sau đó sẽ tự tính toán và điều chỉnh độ rộng các ảnh bạn sẽ add vào slider

//Show the paging and activate its first link
$(".paging").show();
$(".paging a:first").addClass("active");

//Get size of the image, how many images 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});

Đoạn mã kế sẽ giúp chúng ta chỉnh sửa được thời gian truy vấn 1 ảnh là bao lâu

//Paging and 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 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 and Timing Event
rotateSwitch = function(){
  play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
    $active = $('.paging a.active').next(); //Move to the next paging
    if ( $active.length === 0) { //If paging reaches the end...
      $active = $('.paging a:first'); //go back to first
    }
    rotate(); //Trigger the paging and slider function
  }, 7000); //Timer speed in milliseconds (7 seconds)
};

rotateSwitch(); //Run function on launch

Đoạn code trên sẽ hiển thị 1 bức ảnh với 7 giây, các bạn hãy chỉnh chỗ bôi đậm ở trên 7000:là 7s nhé ^^

Đoạn cuối cùng chúng ta sẽ giúp cho khách đỡ mất thời gian hơn nếu như đợi 7s như trên thì thay vào đó người xem sẽ tự chuyển qua ảnh khác nhờ code sau:

//On Hover
$(".image_reel a").hover(function() {
  clearInterval(play); //Stop the rotation
}, function() {
  rotateSwitch(); //Resume rotation timer
});    

//On Click
$(".paging a").click(function() {
  $active = $(this); //Activate the clicked paging
  //Reset Timer
  clearInterval(play); //Stop the rotation
  rotate(); //Trigger rotation immediately
  rotateSwitch(); // Resume rotation timer
  return false; //Prevent browser jump to link anchor
});

Sau khi đã add theo thứ tự chúng ta sẽ có được đoạn code hoàn chỉnh như sau

<script type="text/javascript">

$(document).ready(function() {

    //Set Default State of each portfolio piece
    $(".paging").show();
    $(".paging 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 + 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 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 a.active').next();
            if ( $active.length === 0) { //If paging reaches the end...
                $active = $('.paging a:first'); //go back to first
            }
            rotate(); //Trigger the paging and slider function
        }, 7000); //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 a").click(function() {    
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
    });    
    
});
</script>

Chèn vào sau đoạn khi nãy đó là đoạn

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js' type='text/javascript'/>

Chúng ta save template lại và qua phần tử trang để add thêm tiện ích >>> chọn Html/Javascript
Sau đó chúng ta Copy and Paste đoạn code sau vào:

<div class="main_view">
  <div class="window">
    <div class="image_reel">
      <a href="#"><img src="reel_1.jpg" alt="" /></a>
      <a href="#"><img src="reel_2.jpg" alt="" /></a>
      <a href="#"><img src="reel_3.jpg" alt="" /></a>
      <a href="#"><img src="reel_4.jpg" alt="" /></a>
    </div>
  </div>
  <div class="paging">
    <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>

Nếu như chúng ta muốn thêm ảnh chúng ta hãy làm như sau:
thêm đoạn code sau đây:

<a href="#"><img src="reel_5.jpg" alt="" /></a>

vào sau đoạn code

<a href="#"><img src="reel_4.jpg" alt="" /></a>

và thêm đoạn code sau đây:

<a href="#" rel="5">5</a>

vàp sau đoạn code

<a href="#" rel="4">4</a>

Các bạn nhớ 2 việc làm trên phải làm song song nhé

Chúc các bạn test thành công