Các chức năng chính:

• Sử dụng nút back/forward ngay trên trình duyệt để điều khiển gallery. Bạn cũng có thể gửi link cho người khác, họ sẽ xem được chính xác ảnh mà bạn đang xem (History Manager)
• Bạn có thể có nhiều gallery trên cùng một trang (Gallery sets)
• Hiệu ứng: fade-in và sliding transition
• Hỗ trợ preloader: chỉ tải về những gì cần thiết (tiết kiệm bandwidth)

Cách sử dụng

1. Trước tiên, bạn cần tải về SmoothGallery (đã bao gồm mootools 1.11 đi kèm) và thêm vào header của trang web:

<script src="scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />

2. Mã HTML: SmoothGallery sử dụng mã HTML khá dễ hiểu và thân thiện với search engine

<div id="myGallery">
  	<div class="imageElement">
  		<h3>Item 1 Title</h3>
  		<p>Item 1 Description</p>
  		<a href="mypage1.html" title="open image" class="open"></a>
  		<img src="images/brugges2006/1.jpg" class="full" />
  		<img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
  	</div>
  	<div class="imageElement">
  		<h3>Item 2 Title</h3>
  		<p>Item 2 Description</p>
  		<a href="mypage2.html" title="open image" class="open"></a>
  		<img src="images/brugges2006/2.jpg" class="full" />
  		<img src="images/brugges2006/2-mini.jpg" class="thumbnail" />
  	</div>
</div>

Tất cả nằm trong thẻ div có id là myGallery. Mỗi mục con có các giá trị:

• Thẻ h3: quy định tiêu đề
• Dòng thứ 2 là thẻ p quy định mô tả cho ảnh
• Dòng thứ 3 là link (chỉ sử dụng nếu bạn muốn hiện link ở trong gallery)
• Dòng thứ 4 là ảnh với kích thước lớn
• Cuối cùng là ảnh thu nhỏ, chỉ cần thiết nếu bạn muốn hiện carousel ở gallery (Mặc định, ảnh có kích thước rổng 100px và cao 75px)

3. Gọi gallery theo các cách sử dụng khác nhau

- Gallery không tự động chạy (demo)

function startGallery() {
    var myGallery = new gallery($('myGallery'), {
    	timed: false
    });
}
window.addEvent('domready', startGallery);

- Gallery tự động chạy (demo)

function startGallery() {
    var myGallery = new gallery($('myGallery'), {
    	timed: true
    });
}
window.addEvent('domready', startGallery);

- Tự động chạy & sử dụng link (demo)

function startGallery() {
    var myGallery = new gallery($('myGallery'), {
        timed: true,
        showArrows: false,
        showCarousel: false
    });
}
window.addEvent('domready', startGallery);

- Không tự động chạy & không sử dụng link (demo)

function startGallery() {
    var myGallery = new gallery($('myGallery'), {
        timed: false,
        showArrows: true,
        showCarousel: false,
        embedLinks: false
    });
}
window.addEvent('domready', startGallery);

4. Đặt kích thước cho gallery (kích thước mặc định là 460x345) bằng cách thêm vào đoạn style:

#myGallery {
	width: 400px !important;
	height: 200px !important;
} 

Nếu bạn muốn dùng carousel và tự động tạo thumbnail, bạn có thể tự viết mã hoặc sử dụng mã php đi kèm với gallery

5. (Không bắt buộc) Thêm plugin History Manager

Để có thể sử dụng nút back, forward của trình duyệt, và gửi link ảnh đang xem tới bạn bè, bạn sẽ cần plugin này. Trước tiên cần thêm đoạn mã sau vào header:

<script src="scripts/HistoryManager.js" type="text/javascript"></script>

Và gọi gallery như sau:

function startGallery() {
    var myGallery = new gallery($('myGallery'), {
        timed: false,
        useHistoryManager: true
    });
    HistoryManager.start();
}
window.addEvent('domready', startGallery);

Sử dụng Gallery sets

1. Thêm vào header:

<script src="scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.set.js" type="text/javascript"></script> <!-- Mã javascript dùng cho gallery sets -->
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />

2. Mã HTML:

<div id="myGallerySet">
    <div id="gallery1" class="galleryElement">
      <h2>Brugges 2006</h2>
      <div class="imageElement">
        <h3>Item 1 Title</h3>
        <p>Item 1 Description</p>
        <a href="#" title="open image" class="open"></a>
        <img src="images/brugges2006/1.jpg" class="full" />
        <img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
      </div>
      <div class="imageElement">
        <h3>Item 2 Title</h3>
        <p>Item 2 Description</p>
        <a href="#" title="open image" class="open"></a>
        <img src="images/brugges2006/2.jpg" class="full" />
        <img src="images/brugges2006/2-mini.jpg" class="thumbnail" />
      </div>
    </div>
    <div id="gallery2" class="galleryElement">
      <h2>Stock Photos</h2>
      <div class="imageElement">
        <h3>Item 1 Title</h3>
        <p>Item 1 Description</p>
        <a href="#" title="open image" class="open"></a>
        <img src="images/stock/77196_6784.jpg" class="full" alt="Item 1 Title">
        <img src="images/stock/77196_6784_002.jpg" class="thumbnail" alt="thumbnail of Item 1 Title">
      </div>
      <div class="imageElement">
        <h3>Item 2 Title</h3>
        <p>Item 2 Description</p>
        <a href="#" title="open image" class="open"></a>
        <img src="images/stock/165392_5486.jpg" class="full" alt="Item 2 Title">
        <img src="images/stock/165392_5486_002.jpg" class="thumbnail" alt="thumbnail of Item 2 Title">
      </div>
    </div>
</div>

Gọi gallery với các lựa chọn tương tự như sử dụng 1 gallery

function startGallery() {
    var myGallerySet = new gallerySet($('myGallerySet'), {
    	timed: false
    });
}
window.addEvent('domready', startGallery);