slideGallery - Trình diễn hình ảnh nhiều chức năng

Đăng bởi Neo trong mục Hướng dẫn vào 19 tháng 3, 2010 | Comments
Xem Demo

slideGallery là một plugin cho MooTools chạy trên hầu hết các trình duyệt phổ biến . Hơn thế slideGallery còn có nhiều chức năng cho bạn lựa chọn : hiển thị một hay nhiều hình ảnh trên một slide đơn lẻ , di chuyển theo chiều ngang hay chiều dọc , tốc độ chạy slide , khoảng cách , bật / tắt pager , bật /tắt tự động chạy ....

Cách sử dụng :

Trước tiên, bạn cần có MooTools và SliderGallery MooTools plugin . Sau đó thêm vào trong thẻ <head> của trang web:

<!-- slideGallery Stylesheet -->
<link media="all" type="text/css" rel="stylesheet" href="css/all.css" />
<!-- Mootools framework -->
<script type="text/javascript" src="js/mootools-1.2.4-core.js"></script>
<!-- slideGallery plugin -->
<script type="text/javascript" src="js/Source/mootools.slideGallery.js"></script>
<script type="text/javascript">
    window.addEvent('domready', function() {
        var gallery1 = new slideGallery($$("div.gallery")[0], {
            steps: 3,
            speed: 600,
            transition: Fx.Transitions.Sine.easeInOut,
            mode: "circle"
        });
)};

Mã HTML :

<div class="gallery">
  <div class="holder">
    <ul>
      <li><img src="images/img1.jpg" alt="image" width="240" height="180" />1</li>
      <li><img src="images/img2.jpg" alt="image" width="240" height="180" />2</li>
      <li><img src="images/img3.jpg" alt="image" width="240" height="180" />3</li>
      <li><img src="images/img4.jpg" alt="image" width="240" height="180" />4</li>
      <li><img src="images/img5.jpg" alt="image" width="240" height="180" />5</li>
      <li><img src="images/img6.jpg" alt="image" width="240" height="180" />6</li>
      <li><img src="images/img7.jpg" alt="image" width="240" height="180" />7</li>
      <li><img src="images/img8.jpg" alt="image" width="240" height="180" />8</li>
    </ul>
  </div>
  <a href="#" class="prev">prev</a> 
  <a href="#" class="next">next</a>
</div>

Bạn có thể xem thêm cách sử dụng trên trang chủ plugin hoặc ngay trên trang demo

mootools, plugin, slideshow, gallery

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter