creating custom gallery

Which page builder you are using? 
if you are using wpbakery you can handle it but it will require coding, by adding a regular image & open it in lightbox on click then you will take the code from the inspect element and edit but the gallery will have to be custom codded.
if you want to make it using jquery only you will have to use click event and built the popup in custom coding and you will make the jquery click event like 

jQuery(document).ready(($) => {
 //when user click on the first image
 $("div.gallery div.image-container-class:nth-child(1)").click(() => {
 //Open popup
 $("div.popup-container").addClass('show');
 //etc
 });
});

this is just a hint about how it suppose to be working but it will require a lot of coding & if you want to make it custom coded you will need to make a custom post type or custom field on the page & use “owl carousel” and jQuery

let me know if you have another question, Thanks for using Web-brackets

i use elementor. i used jetengine t make a custom post type and show 3 diferent locations in map. when map icon is clicked, a popup is opened with info + this gallery. and when the 4rth img is clicked , it opens rest of photos.

 

//prnt.sc/1ry0vg2

by adding a class in gallery and this code, it works perfect on a normal page, but in this google marker popup js doesnt works

<script>
jQuery.each( elementorFrontend.documentsManager.documents, ( id, document ) => {
 if ( document.getModal ) { // It's a popup document
 document.getModal().on( 'show', () => {
 console.log( 'let galleries,
shownAmount = 4, /* How many images will be shown by default */
viewMoreMessage = 'Show XX more'; /* Enter your message here, keep the XX for where the additional images count will be dynamically entered. Needs to look like this: 'See XX More' */

document.addEventListener('DOMContentLoaded', function() {

galleries = document.querySelectorAll('.showmoreimages');

setTimeout(function(){
viewMoreGalleries();
}, 2700);

window.addEventListener("resize", function() {
setTimeout(function(){
viewMoreGalleries();
}, 777);
});

});

function viewMoreGalleries(){

galleries.forEach((e,i) => {

let galleryItems = e.querySelectorAll('.elementor-gallery-item');
let viewMoreImagesCount = 0;
for (let i = shownAmount; i < galleryItems.length; i++){
galleryItems[i].style.display = 'none';
viewMoreImagesCount++;
}

let galleryOffsetDiv = e.querySelector('.elementor-widget-container');

let offSet = galleryItems[shownAmount - 1].getBoundingClientRect().bottom - e.getBoundingClientRect().top;

galleryOffsetDiv.style.height = offSet + 'px';

galleryItems[shownAmount - 1].setAttribute('data-count', viewMoreMessage.replace('XX',viewMoreImagesCount));

cssDiv.innerHTML = `
.showmoreimages .elementor-gallery-item:nth-child(${shownAmount}):before {
content: attr(data-count);
text-align: center;
z-index: 5;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
/* Edit the below CSS to adjust the 'view more' card styling */
text-transform: uppercase;
font-weight: 900;
font-size: 1rem;
font-family:inherit;
width:90%;
height:90%;
color: white;
background-color: rgba(0, 0, 0, 0.4);
}`
});
}

let cssDiv = document.createElement('style');
document.querySelector('head').appendChild(cssDiv);' );
 } );
 }
 } );


</script>