Tạo hiệu ứng Zoom Gallery hình ảnh với Colorbox cực đẹp

Web7b.com hướng dẫn bạn đọc cách tạo Gallery hình ảnh với hiệu ứng cực đẹp, khi click vào ảnh sẽ zoom ảnh lớn với công cụ next, prev, close. Để dễ hình dung mình đang nói gì, mời bạn xem demo và cách thực hiện tại đây: Click xem demo

Còn sau đây là cách thực hiện:

Bước 1: Tải các file này về

Colorbox.css | Jquery.Colorbox.js

Sau khi tải về các file này, bạn upload lên host và chèn vào phần header của mã nguồn web.

Bước 2: Copy và paste đoạn code HTML này vào vị trí mà bạn muốn hiển thị trên website:

<section class="hinh-anh">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h2><i class="fal fa-images"></i> Hình Ảnh</h2>
<p>Hình ảnh mới nhất về khách sạn được cập nhật liên tục</p>
</div>
</div>


<!--Start row gallary-->
<div class="row" style="padding:30px 0">

<!--Row 1-->
<div class="col-xs-6 col-sm-4 gallary-item">
<a class="gallery group1" href="/files/assets/gallary/gallary_image_1.jpg">
<img src="/files/assets/gallary/gallary_image_1.jpg" />
<div class="overlay"></div>
</a>
</div>

<div class="col-xs-6 col-sm-4 gallary-item">
<a class="gallery group1" href="/files/assets/gallary/gallary_image_2.jpg">
<img src="/files/assets/gallary/gallary_image_2.jpg" />
<div class="overlay"></div>
</a>
</div>

<div class="col-xs-6 col-sm-4 gallary-item">
<a class="gallery group1" href="/files/assets/gallary/gallary_image_3.jpg">
<img src="/files/assets/gallary/gallary_image_3.jpg" />
<div class="overlay"></div>
</a>
</div>

<!--Row 2-->
<div class="col-xs-6 col-sm-4 gallary-item">
<a class="gallery group1" href="/files/assets/gallary/gallary_image_4.jpg">
<img src="/files/assets/gallary/gallary_image_4.jpg" />
<div class="overlay"></div>
</a>
</div>

<div class="col-xs-6 col-sm-4 gallary-item">
<a class="gallery group1" href="/files/assets/gallary/gallary_image_5.jpg">
<img src="/files/assets/gallary/gallary_image_5.jpg" />
<div class="overlay"></div>
</a>
</div>

<div class="col-xs-6 col-sm-4 gallary-item">
<a class="gallery group1" href="/files/assets/gallary/gallary_image_6.jpg">
<img src="/files/assets/gallary/gallary_image_6.jpg" />
<div class="overlay"></div>
</a>
</div>

<!--Row 3-->
<div class="col-xs-6 col-sm-4 gallary-item">
<a class="gallery group1" href="/files/assets/gallary/gallary_image_7.jpg">
<img src="/files/assets/gallary/gallary_image_7.jpg" />
<div class="overlay"></div>
</a>
</div>

<div class="col-xs-6 col-sm-4 gallary-item">
<a class="gallery group1" href="/files/assets/gallary/gallary_image_8.jpg">
<img src="/files/assets/gallary/gallary_image_8.jpg" />
<div class="overlay"></div>
</a>
</div>

<div class="col-xs-6 col-sm-4 gallary-item">
<a class="gallery group1" href="/files/assets/gallary/gallary_image_9.jpg">
<img src="/files/assets/gallary/gallary_image_9.jpg" />
<div class="overlay"></div>
</a>
</div>

<!--Row 4-->
<div class="col-xs-6 col-sm-4 gallary-item">
<a class="gallery group1" href="/files/assets/gallary/gallary_image_10.jpg">
<img src="/files/assets/gallary/gallary_image_10.jpg" />
<div class="overlay"></div>
</a>
</div>

<div class="col-xs-6 col-sm-4 gallary-item">
<a class="gallery group1" href="/files/assets/gallary/gallary_image_11.jpg">
<img src="/files/assets/gallary/gallary_image_11.jpg" />
<div class="overlay"></div>
</a>
</div>

<div class="col-xs-6 col-sm-4 gallary-item">
<a class="gallery group1" href="/files/assets/gallary/gallary_image_12.jpg">
<img src="/files/assets/gallary/gallary_image_12.jpg" />
<div class="overlay"></div>
</a>
</div>

<!--Row 5-->
<div class="col-xs-6 col-sm-4 gallary-item">
<a class="gallery group1" href="/files/assets/gallary/gallary_image_13.jpg">
<img src="/files/assets/gallary/gallary_image_13.jpg" />
<div class="overlay"></div>
</a>
</div>

<div class="col-xs-6 col-sm-4 gallary-item">
<a class="gallery group1" href="/files/assets/gallary/gallary_image_14.jpg">
<img src="/files/assets/gallary/gallary_image_14.jpg" />
<div class="overlay"></div>
</a>
</div>

<div class="col-xs-6 col-sm-4 gallary-item">
<a class="gallery group1" href="/files/assets/gallary/gallary_image_15.jpg">
<img src="/files/assets/gallary/gallary_image_15.jpg" />
<div class="overlay"></div>
</a>
</div>

<!--Row 6-->
<div class="col-xs-6 col-sm-4 gallary-item">
<a class="gallery group1" href="/files/assets/gallary/gallary_image_16.jpg">
<img src="/files/assets/gallary/gallary_image_16.jpg" />
<div class="overlay"></div>
</a>
</div>

<div class="col-xs-6 col-sm-4 gallary-item">
<a class="gallery group1" href="/files/assets/gallary/gallary_image_17.jpg">
<img src="/files/assets/gallary/gallary_image_17.jpg" />
<div class="overlay"></div>
</a>
</div>

<div class="col-xs-6 col-sm-4 gallary-item">
<a class="gallery group1" href="/files/assets/gallary/gallary_image_18.jpg">
<img src="/files/assets/gallary/gallary_image_18.jpg" />
<div class="overlay"></div>
</a>
</div>

<!--Row 7-->
<div class="col-xs-6 col-sm-4 gallary-item">
<a class="gallery group1" href="/files/assets/gallary/gallary_image_19.jpg">
<img src="/files/assets/gallary/gallary_image_19.jpg" />
<div class="overlay"></div>
</a>
</div>

<div class="col-xs-6 col-sm-4 gallary-item">
<a class="gallery group1" href="/files/assets/gallary/gallary_image_20.jpg">
<img src="/files/assets/gallary/gallary_image_20.jpg" />
<div class="overlay"></div>
</a>
</div>

<div class="col-xs-6 col-sm-4 gallary-item">
<a class="gallery group1" href="/files/assets/gallary/gallary_image_21.jpg">
<img src="/files/assets/gallary/gallary_image_21.jpg" />
<div class="overlay"></div>
</a>
</div>

<!--Row 8-->
<div class="col-xs-6 col-sm-4 gallary-item">
<a class="gallery group1" href="/files/assets/gallary/gallary_image_22.jpg">
<img src="/files/assets/gallary/gallary_image_22.jpg" />
<div class="overlay"></div>
</a>
</div>

<div class="col-xs-6 col-sm-4 gallary-item">
<a class="gallery group1" href="/files/assets/gallary/gallary_image_23.jpg">
<img src="/files/assets/gallary/gallary_image_23.jpg" />
<div class="overlay"></div>
</a>
</div>

<div class="col-xs-6 col-sm-4 gallary-item">
<a class="gallery group1" href="/files/assets/gallary/gallary_image_24.jpg">
<img src="/files/assets/gallary/gallary_image_24.jpg" />
<div class="overlay"></div>
</a>
</div>

</div><!--End all row-->


</div>
</section>

Lưu ý: Ở đây mình không hướng dẫn cách bố trí giao diện và hiển thị ảnh như thế nào, mình chỉ demo tính năng zoom ảnh với dạng show popup. Để sử dụng bạn chỉ cần cho ảnh của mình nằm trong class có tên là "gallery-item" thôi nhé.

Nếu bạn lập trình back-end thì có thể bỏ bớt thẻ lặp và lấy dữ liệu từ database lên cho phù hợp nhé.

Cám ơn đã xem hướng dẫn!