<div class="conteingaller">
<div id="lightgallery" class="emme_gallery masonry <?=$atts['class']?>">
<?php
foreach ($images as $image) {
$gallery = '<div class="emme-gallery-item emme-col-'. $atts['columns'] .'">';
$gallery .= '<a data-lightbox="'.$light.'" data-title="'.wp_get_attachment_caption($image).'" title="'.get_the_title($image).'" href="'.wp_get_attachment_image_url($image, 'full').'" >';
$gallery .= wp_get_attachment_image($image, $atts['thumb'], false, array('alt' => get_the_title($image)));
$gallery .= '</a>';
if($atts['title'] != 'No' || $atts['description'] != 'No'){
$gallery .= '<div class="txt">';
if(get_the_title($image) && $atts['title'] != 'No'){
$gallery .= '<div class="tit">'.get_the_title($image).'</div>';
}
if(wp_get_attachment_caption($image) && $atts['description'] != 'No'){
$gallery .= '<figcaption>'.wp_get_attachment_caption($image).'</figcaption>';
}
$gallery .= '</div>';
}
$gallery .= '</div>';
echo $gallery;
}
?>
</div>
</div>
<style>
@media screen and (min-width:468px){
.prev,.next{
display: none;
}
/* Main CSS */
.masonry .item {
display: flex;
justify-content: center;
align-items: center;
}
.masonry .item img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
}
.masonry .item .image {
height: 100%;
}
.masonry .emme-gallery-item a {
display: block;
height: 100%;
}
.masonry {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: 200px;
grid-auto-flow: dense;
}
.masonry .wide {
grid-column: span 2;
}
.masonry .tall {
grid-row: span 2;
}
.masonry .big {
grid-column: span 2;
grid-row: span 2;
}
.conteingaller{
margin-bottom: 30px;
}
}
@media screen and (max-width:468px){
.masonry{
display: flex;
overflow: auto;
padding-bottom: 10px;
padding-top: 10px;
flex-wrap: nowrap;
}
.masonry .emme-gallery-item
{
min-width: 75%;
}
.conteingaller
{
position: relative;
padding: 0 20px;
margin:0px -20px 30px;
}
}
</style>
<script type="text/javascript">
function next(){
}
function prev(){
}
jQuery(document).ready(function(e) {
if (jQuery('.masonry .emme-gallery-item').length > 0) {
var counter = 0;
jQuery('.masonry .emme-gallery-item').each(function() {
var item = counter % 10;
switch (item) {
case 0:
case 7:
jQuery(this).addClass('big');
break;
case 1:
jQuery(this).addClass('wide');
break;
case 2:
case 3:
case 6:
jQuery(this).addClass('tall');
break;
}
counter++;
});
}
});
</script>
All system for education purposes only. For more tools: Telegram @jackleet