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
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!
Đánh giá
Vương IT là freelancer nhận các dự án lập trình, thiết kế website tại Quận 12 TPHCM. Nhận thiết kế web hcm giá rẻ và các dự án phần mềm theo yêu cầu. Vương là một freelancer thiết kế web đã có hơn 7+ kinh nghiệm thiết kế và lập trình web cho hơn 200+ dự án lớn nhỏ. Hy vọng Vương sẽ được hợp tác cùng mọi người trong thời gian sớm nhất nhé! Add zalo của Vương nha zalo.me/0352833656