Mirjan Cocka
Published in : 2021-09-12

creating custom gallery

Wordpress

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).

 

web-brackets.com

Comments

Mohamed Atef Date : 2021-09-12

Best answers

51

Best answers

51

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

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

//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>

 

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

What is the best reference to the most used WordPress functions?
Publish date: 2022-02-09 | Comments: 2

Tag: Wordpress

Will Google Dorking save my secure WordPress website running on HTTPS?
Publish date: 2022-02-26 | Comments: 1

Tag: Wordpress

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

Tag: Wordpress

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

Tag: Wordpress

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

Tag: Wordpress

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

Tag: Wordpress

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

Tag: Wordpress

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

Tag: Wordpress