Hướng dẫn kết hợp tính năng và hiển thị ảnh được tạo bởi AFC Gallery dưới dạng Masonry

Để kết hợp các tính năng và hiển thị ảnh ACF Gallery dưới dạng masonry thumbnail gallery chúng ta sẽ sử dụng thư viện LightGallery. 

Đoạn mã dươi sử dụng masonry để hiển thị các ảnh ACF Gallery dưới dạng lưới masonry, sau đó sử dụng LightGallery để hiển thị các ảnh trong một thumbnail gallery với các tính năng hiển thị được tùy chỉnh như thumbnail, caption, tốc độ và chế độ hiển thị ảnh. Ngoài ra, đoạn mã còn sử dụng imagesLoaded để đảm bảo rằng tất cả các hình ảnh được tải trước khi khởi tạo lưới masonry, điều này giúp tránh tình trạng hiển thị không đúng kích thước hoặc không đồng đều.

1. Chèn đoạn code sau vào vị trí bạn muốn hiển thị Album hình ảnh

<?php
$images = get_field('album_anh'); // Thay album_anh bằng tên field của bạn
if ($images): ?>
<div id="gallery-container">
  <ul id="gallerys" class="list-unstyled">
    <?php foreach ($images as $image): ?>
    <li class="gallery-item" data-src="<?php echo esc_url($image['url']); ?>" data-sub-html="<?php echo esc_attr($image['caption']); ?>">
      <a href="">
        <img src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
      </a>
    </li>
    <?php endforeach; ?>
  </ul>
</div>
<?php endif; ?>

2. Chèn đoạn mã sau vào header

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/css/lightslider.min.css" />

3. Chèn đoạn mã sau vào footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/js/lightgallery-all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('#gallerys').lightGallery({
    selector: '.gallery-item',
    thumbnail: true,
    animateThumb: true,
    showThumbByDefault: true,
    getCaptionFromTitleOrAlt: true,
    speed: 500,
    rowHeight: 280,
    thumbMargin: 10,
    thumbWidth: 100,
    thumbContHeight: 100,
    mode: 'lg-slide-circular',
    download: false
  });

  // Initialize Masonry after all images have loaded
  $('#gallerys').imagesLoaded(function() {
    $('#gallerys').masonry({
      itemSelector: 'li',
      columnWidth: 'li',
      percentPosition: true
    });
  });
});
</script>

4. Thêm đoạn css dưới đây

#gallery-container {
  margin: 0 auto;
}

#gallerys li {
  display: block;
  float: left;
  margin: 0 10px 10px 0;
  width: calc(33.33% - 10px);
}

@media only screen and (max-width: 767px) {
  #gallerys li {
    width: calc(50% - 10px);
  }
}

@media only screen and (max-width: 480px) {
  #gallerys li {
    width: 100%;
  }
}