ACFの画像で、メイソンリーレイアウトのLightboxギャラリーを作成

<ul class="gallery">
	<?php if (get_field('add_galleryphoto01')): ?>
		<li>
			<a href="<?php the_field('add_galleryphoto01'); ?>" data-lightbox="gallery1" data-title="">
				<img src="<?php the_field('add_galleryphoto01'); ?>" alt="">
			</a>
		</li>
	<?php endif ?>
	<?php if (get_field('add_galleryphoto02')): ?>
		<li>
			<a href="<?php the_field('add_galleryphoto02'); ?>" data-lightbox="gallery1" data-title="">
				<img src="<?php the_field('add_galleryphoto02'); ?>" alt="">
			</a>
		</li>
	<?php endif ?>
	<?php if (get_field('add_galleryphoto03')): ?>
		<li>
			<a href="<?php the_field('add_galleryphoto03'); ?>" data-lightbox="gallery1" data-title="">
				<img src="<?php the_field('add_galleryphoto03'); ?>" alt="">
			</a>
		</li>
	<?php endif ?>
	<?php if (get_field('add_galleryphoto04')): ?>
		<li>
			<a href="<?php the_field('add_galleryphoto04'); ?>" data-lightbox="gallery1" data-title="">
				<img src="<?php the_field('add_galleryphoto04'); ?>" alt="">
			</a>
		</li>
	<?php endif ?>
	<?php if (get_field('add_galleryphoto05')): ?>
		<li>
			<a href="<?php the_field('add_galleryphoto05'); ?>" data-lightbox="gallery1" data-title="">
				<img src="<?php the_field('add_galleryphoto05'); ?>" alt="">
			</a>
		</li>
	<?php endif ?>
	<?php if (get_field('add_galleryphoto06')): ?>
		<li>
			<a href="<?php the_field('add_galleryphoto06'); ?>" data-lightbox="gallery1" data-title="">
				<img src="<?php the_field('add_galleryphoto06'); ?>" alt="">
			</a>
		</li>
	<?php endif ?>
	<?php if (get_field('add_galleryphoto07')): ?>
		<li>
			<a href="<?php the_field('add_galleryphoto07'); ?>" data-lightbox="gallery1" data-title="">
				<img src="<?php the_field('add_galleryphoto07'); ?>" alt="">
			</a>
		</li>
	<?php endif ?>
	<?php if (get_field('add_galleryphoto08')): ?>
		<li>
			<a href="<?php the_field('add_galleryphoto08'); ?>" data-lightbox="gallery1" data-title="">
				<img src="<?php the_field('add_galleryphoto08'); ?>" alt="">
			</a>
		</li>
	<?php endif ?>
	<?php if (get_field('add_galleryphoto09')): ?>
		<li>
			<a href="<?php the_field('add_galleryphoto09'); ?>" data-lightbox="gallery1" data-title="">
				<img src="<?php the_field('add_galleryphoto09'); ?>" alt="">
			</a>
		</li>
	<?php endif ?>
	<?php if (get_field('add_galleryphoto10')): ?>
		<li>
			<a href="<?php the_field('add_galleryphoto10'); ?>" data-lightbox="gallery1" data-title="">
				<img src="<?php the_field('add_galleryphoto10'); ?>" alt="">
			</a>
		</li>
	<?php endif ?>
	<?php if (get_field('add_galleryphoto11')): ?>
		<li>
			<a href="<?php the_field('add_galleryphoto11'); ?>" data-lightbox="gallery1" data-title="">
				<img src="<?php the_field('add_galleryphoto11'); ?>" alt="">
			</a>
		</li>
	<?php endif ?>
	<?php if (get_field('add_galleryphoto12')): ?>
		<li>
			<a href="<?php the_field('add_galleryphoto12'); ?>" data-lightbox="gallery1" data-title="">
				<img src="<?php the_field('add_galleryphoto12'); ?>" alt="">
			</a>
		</li>
	<?php endif ?>
	<?php if (get_field('add_galleryphoto13')): ?>
		<li>
			<a href="<?php the_field('add_galleryphoto13'); ?>" data-lightbox="gallery1" data-title="">
				<img src="<?php the_field('add_galleryphoto13'); ?>" alt="">
			</a>
		</li>
	<?php endif ?>
	<?php if (get_field('add_galleryphoto14')): ?>
		<li>
			<a href="<?php the_field('add_galleryphoto14'); ?>" data-lightbox="gallery1" data-title="">
				<img src="<?php the_field('add_galleryphoto14'); ?>" alt="">
			</a>
		</li>
	<?php endif ?>
	<?php if (get_field('add_galleryphoto15')): ?>
		<li>
			<a href="<?php the_field('add_galleryphoto15'); ?>" data-lightbox="gallery1" data-title="">
				<img src="<?php the_field('add_galleryphoto15'); ?>" alt="">
			</a>
		</li>
	<?php endif ?>
	<?php if (get_field('add_galleryphoto16')): ?>
		<li>
			<a href="<?php the_field('add_galleryphoto16'); ?>" data-lightbox="gallery1" data-title="">
				<img src="<?php the_field('add_galleryphoto16'); ?>" alt="">
			</a>
		</li>
	<?php endif ?>
</ul>

lightbox.option({
  'wrapAround': true,
  'albumLabel': ' %1 / total %2 ',
  'maxWidth' :'1000',
})

.gallery{
    columns: 4;
    padding: 0;
    margin: 0;
    column-gap: 0;
}

.gallery li {
    margin-bottom: 0px;
}

.gallery img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

@media only screen and (max-width: 1250px) {
	.gallery{
	columns: 3;
	}	
}

@media only screen and (max-width: 740px) {
	.gallery{
	columns: 2;
	}	
}