TẠO SLIDESHOW ẢNH (Kiểu 7)

Giống các kiểu slideshow khác đã được chia sẻ TẠI ĐÂY. Slideshow kiểu 7 này cũng không chiếm không gian của Blog, các hình ảnh của bạn được trình chiếu gọn gàng trong một khung ảnh, đặc biệt của slideshow này là hiệu ứng rơi ảnh khá ngộ nghĩnh. Lúc bắt đầu slideshow sẽ tự trình chiếu...Phía dưới có các thẻ XEM LẠI, XEM TRƯỚC VÀ STOP. 
Lưu ý khi slideshow đang được trình chiếu tự động, bạn bấm một trong các thẻ phía dưới sẽ làm mất đi chế độ autostart của slideshow...

Mời các bạn bấm vào Xem thử phía dưới để xem trước slideshow này nha.

Xem thử

Bạn chỉ việc đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML/Javacript (nếu bạn chưa biết các thêm HTML/Javacript thì mời bạn xem TẠI ĐÂY). Sau đó copy tất các code phía dưới dán vào.

<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/66348944/thunghiem/carddeckslideshow.css" />

<style>

.stackcontainer{
margin: 10px 0 0px 0;
}

#demo1{
width: 240px;
height: 320px;
margin-left: 210px;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script src="https://dl.dropboxusercontent.com/u/66348944/thunghiem/carddeckslideshow.js">

</script>

<script>

var demo1 = new carddeckslideshow({
 id: 'demo1',
 autoplay: true,
 cycles: 2,
 persist: false
})


</script>


<div id="demo1" class="stackcontainer">

 <div class="inner">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFnjpS5jff2Gzv1_jzT5AN7-vwt_Ib1Rno740YEQJ-CMUteYyveOv3BiE83AMQI5qQ0tdLqw37ac43hiy5TdCJFISVCmiiXdgdbTxZFPwdrRIfD40HcSBzGrhqBbLPgzloJpohqKd2uOQ/s1600/0024.gif" />
 </div>

 <div class="inner">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht2vBUNFmxqdtEK8YGDx37w-nRglz5lsUxSPW9Eo0OaK3wTpyUUDH-u7OIUgSJK1UTkgoI5dapwBnQlJ3kOjYV58w7wZuXY3VaqNSCb_gXq58pC5CAj_PhCc-MISj_V2RFL2sZ5vL1Ucc/s1600/0055.gif" />
 </div>

 <div class="inner">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIOWzVDXgUopA-5BxivjGMT2NXppnl8HyIFkfhcpkpLtDwID88JGPIX9jJ7RyjhP4nmomypH8hiAD1V5zbULLe_cr1W0T4PrC-OqA-K8sbYvNAKkxszsLVC3LZmFQ6Ct_-OHVFo93yDRc/s1600/0013.gif" />
 </div>

 <div class="inner">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxtv2nxg14rKv0XZSnCzXgC9A2eh_MA3s40Sbc0TVWNNH6Grf0RZTVlDr_yLMLKgmwr_ip8Gug0HS3HIoPDWW2LXiBvbXxw1-MWKuvbHfUtrJYhl0x1wt-rbXn5fWgG-b8tXzOn0Aiu0A/s1600/0015.gif" />
 </div>

 <div class="inner">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcQyPjkNndM6o5wKOap5BG_DX5sWAhqyOutW1Gv4W6mwnWTPmBQ1WD04lhxLje5NLRssttRt0stqfgWaeO4NtlawjdjHwsDznUCWn0VdlOaAxhc50CvS4qUBfhDqOgBC_Y9PR6OqJXVVU/s1600/0014.gif" />
 </div>


<div class="inner">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzQehlbrADdkaSCzfcbjMwQV5iSzPO6SeMMRlJIopcNLFuQFKVxb9FmS29n2Src4hWeb9JkIZxIBHiWXk2FHYqUDyYUKox4zNtQn0OrmyDQMhwFxZq0NpCp4A2bdIedScQoqMh1vNzytY/s1600/0019.gif" />
 </div>

 <div class="inner">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJB-8uQ8fH3ornzNEJRGI9bcFU1kKCZReLwGY2b449wFtOkovGbmXf-25kIjvo66-Rc5HIYwKHJF8NnCpZuFuAHl3X4-0ZUl_78x948YbNVh3LKPpnCZLB2yeshVmxskbeisDO6-aBE95k/s1600/0035.gif" />
 </div>




</div>

<div style="margin-top:1em; margin-left:250px">
<a href="javascript:demo1.navigate('prev')">Previous Slide</a> / <a href="javascript:demo1.navigate('next')">Next Slide</a> / <a href="javascript: demo1.userpause()">Stop</a>
</div>

Bây giờ, bạn có thể thay đổi các dòng lệnh màu đỏ, trong đó:

Width: chiều rộng của khung trình chiếu

Height: chiều cao của khung trình chiếu

Margin-left: khoảng cách từ lề trái đến khung trình chiếu (khoảng cách này nếu bạn để ngắn quá thì hiệu ứng rơi ảnh sẽ không được đẹp).

Và các dòng lệnh màu xanh là link ảnh.

Cuối cùng bấm Lưu là xong.

Ở code trên tôi làm 7 ảnh, nếu bạn muốn nhiều ảnh hơn nữa thì dán đoạn code:

 <div class="inner">
  <img src="link ảnh" />
 </div>

lên phía trên thẻ đóng </div> cuối cùng.

Để slideshow được đẹp, bạn nên resize các ảnh có cùng kích thước với khung trình chiếu.

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