user image

Mirjan Cocka
Published in : 2021-09-12

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 Date : 2021-09-12

Best answers


Best answers


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.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 Date : 2021-09-12

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 Date : 2021-09-12


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; = 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 Date : 2021-09-13

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

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

Cpanel to Webmin migration 503 error
Publish date: 2021-08-12 | Comments: 4

Tag: Wordpress

Issue with generating Thumbnails for PDF file format.
Publish date: 2022-02-26 | Comments: 1

Tag: Wordpress

Wordpress update button returns 404 [SOLVED]
Publish date: 2021-06-26 | Comments: 2

Tag: Wordpress

A Site Kit WordPress plugin bug.
Publish date: 2022-02-10 | Comments: 2

Tag: Wordpress

A custom WordPress Login page and URL
Publish date: 2022-02-10 | Comments: 2

Tag: Wordpress

Way to disable Block URLs for WordPress Posts
Publish date: 2022-02-26 | Comments: 2

Tag: Wordpress

Add custom fields in user profile and display in Dashboard
Publish date: 2021-07-27 | Comments: 6

Tag: Wordpress

[solved] undefined $post->ID in WP_Query()
Publish date: 2022-01-30 | Comments: 2

Tag: Wordpress