Mirjan Cocka

12 Sep 2021

creating custom gallery


Wanted to ask if anyone have experience with this. i want to build this gallery as seen on screen. when user clicks it opens other images on lightbox. now with a jquerry code, i can make it work in a normal page, but this gallery need to be in a popup and js doesnt work (using jetengine map).



Mohamed Atef

12 Sep 2021


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

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

Mirjan Cocka

12 Sep 2021

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.


Mirjan Cocka

12 Sep 2021



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

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');

}, 2700);

window.addEventListener("resize", function() {
}, 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';

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;
color: white;
background-color: rgba(0, 0, 0, 0.4);

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




Mohamed Atef

13 Sep 2021


Maybe you need to check the console and see what is the error or in which line? 

and is this a fatal error or logical issue

© 2024 Copyrights reserved for web-brackets.com