Laman

Pages

Laman

Jun 14, 2011

Automatic Image Slider với CSS & jQuery cho blogger

images slider
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"







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

9 comments:

  1. Cái này hay lắm bạn à. mượt quá, chúc blog bạn phát triển hơn nữa

    ReplyDelete
  2. :( Sao nhiều code quá vậy.

    ReplyDelete
  3. Mình đang hướng dẫn add mà ^^ bạn nên add code hoàn chỉnh thôi nhé.Còn mấy cái trên là chuyên sâu vào cho mấy bạn

    ReplyDelete
  4. Hi` dù sao trang trí cũng được mà để thành Feature post thì càng tốt nhưng cũng phải cập nhật thủ công :D

    ReplyDelete
  5. Cái này có con heo ngộ quá ta....

    ReplyDelete
  6. nhà bác Yolk đông khách wa' ta. chúc vui vẻ

    ReplyDelete
  7. Hì cám ơn 2 bạn nhé

    ReplyDelete
  8. apna pharmacy bc canada http://nextdayshippingpharmacy.com/products/aricept.htm maryland state pharmacy plan

    ReplyDelete

Comment của bạn sẽ bị xóa nếu:
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D