Tạo Image Gallery đơn giản với jQuery

Hôm nay mình xin chia sẻ cho các bạn một ứng dụng hình ảnh đơn giản mà rất thường được sử dụng trên các trang web, đặc biệt là dành cho những web trình diễn ảnh, studio… Chỉ với vài dòng jQuery và css code để tạo hiệu ứng fade.

jQuery Code

jQuery('.photo-thumbnails .thumbnail').click(function() {

    jQuery('.photo-thumbnails .thumbnail').removeClass('current');

    jQuery(this).addClass('current');

    var path = jQuery(this).find('img').attr('src');

    jQuery('#big-photo img').attr('src', path);

});

Mình xin giải thích vài dòng code trên jQuery trên như sau :

jQuery('.photo-thumbnails .thumbnail').removeClass('current');

Đoạn code trên dùng để ấn định class “current” vào ảnh thumbnail vừa được click.

var path = jQuery(this).find('img').attr('src');

Đoạn code này được dùng để lấy thuộc tính ” src ” của hình ảnh vừa được click.

jQuery('#big-photo img').attr('src', path);

Đoạn code này dùng để ấn định thuộc tính ” src ” của ảnh lớn.

CSS Code

Để có thể tạo hiệu ứng fade, thì chúng ta cần có đoạn css sau :

.gallery-photos {

    padding: 20px;

}

.gallery-photos .big-photo {

    display: block;

    background-color: #ffffff;

    padding: 3px;

    border: 1px solid #e7e7e7;

    margin-right: 210px;

}

.gallery-photos .big-photo img {

    display: block;

    max-width: 100%;

    height: auto;

    margin: 0 auto;

}

.gallery-photos .photo-thumbnails {

    float: right;

    width: 210px;

}

.gallery-photos .photo-thumbnails .thumbnail {

    float: left;

    box-sizing: border-box;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    width: 30%;

    height: 63px;

    cursor: pointer;

    padding: 3px;

    border: 1px solid #e7e7e7;

    margin-left: 3.33333%;

    margin-bottom: 6px;

    opacity: 0.4;

}

.gallery-photos .photo-thumbnails .thumbnail.current {

    opacity: 1;

    background-color: #ffffff;

}

.gallery-photos .photo-thumbnails .thumbnail .thumbnail-inner {

    height: 100%;

    overflow: hidden;

}

.gallery-photos .photo-thumbnails .thumbnail img {

    display: block;

    width: auto;

    max-height: 100%;

    margin: 0 auto;

}

HTML Code

Cuối cùng là chúng ta cần có khung chuẩn html như sau :

<div class="gallery-photos clearfix">

  <div class="photo-thumbnails">

    <div class="thumbnail current">

      <div class="thumbnail-inner"> <img src="images/1.jpg" alt="" /> </div>

    </div>

    <div class="thumbnail">

      <div class="thumbnail-inner"> <img src="images/2.jpg" alt="" /> </div>

    </div>

    <div class="thumbnail">

      <div class="thumbnail-inner"> <img src="images/3.jpg" alt="" /> </div>

    </div>

    <div class="thumbnail">

      <div class="thumbnail-inner"> <img src="images/4.jpg" alt="" /> </div>

    </div>

    <div class="thumbnail">

      <div class="thumbnail-inner"> <img src="images/5.jpg" alt="" /> </div>

    </div>

    <div class="thumbnail">

      <div class="thumbnail-inner"> <img src="images/6.jpg" alt="" /> </div>

    </div>

    <div class="thumbnail">

      <div class="thumbnail-inner"> <img src="images/7.jpg" alt="" /> </div>

    </div>

    <div class="thumbnail">

      <div class="thumbnail-inner"> <img src="images/8.jpg" alt="" /> </div>

    </div>

    <div class="thumbnail">

      <div class="thumbnail-inner"> <img src="images/9.jpg" alt="" /> </div>

    </div>

  </div>

  <div id="big-photo" class="big-photo"> <img src="images/1.jpg" alt="" /> </div>

</div>

Rất đơn giản và dễ hiểu phải không các bạn, nếu các bạn còn thắc mắc điều gì thì để lại lời nhắn dưới dạng comment, mình sẽ cố gắng giải thích ngay khi có thể.