Images in Masonry Gallery opening as files instead of in lightbox

  • Resolved matutino

    (@matutino)


    4 years, 4 months ago

    Hi janthielemann,
    Thanks a lot for this free plugin, I was so amazed when I discovered it was so easy to create a Masonry gallery for Divi. So super thankful for what you’ve done!

    The plugin has worked like a charm all the time but now, for some reason I still didn’t find, it doesn’t anymore. Now when clicking on an image it would make it larger to fill the viewport with an animation, as expected. So far so good, but at the very last moment instead of showing the picture in a lightbox, so that you can navigate through the rest of the elements of the gallery, it jumps to the image file page (https://domain.com/…/image.jpg). So you have to go back to the gallery page every time.

    Here’s a video showing this behavior: https://photos.app.goo.gl/1jNNENiKqAVaWAUXA

    I’ve been looking for the reason why this works like that but I haven’t been able to find it. Deactivating all the plugins or switching to the default Divi theme instead of the child won’t fix the problem. I thought it could be due to updating Divi recently, but I’ve used your plugin in another website, updated Divi in it and keeps working fine.

    I understand it probably is a specific problem of this website, so you wouldn’t know what could cause it, but I tell you just in case you had this issue in the past and know what’s the reason.

    Thanks a lot again for you work and your time you’ve invested on giving us this free tool.
    Have a nice day!

    • This topic was modified 4 years, 4 months ago by matutino.
    • This topic was modified 4 years, 4 months ago by matutino.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Thread Starter matutino

    (@matutino)

    So I’ve discovered what was causing the issue!!

    It was this code I used for creating an animation when navigating through the pages of the website, showing a fade-out animation after clicking on an internal link of the website and a fade-in when loading that new page. I placed it inside Divi Settings > Integrations > “Add to <body> (good for codes like Analytics)”
    In case you’re curious, this is it:

    <!-- FADE-IN and FADE-OUT al navegar por la web -->
<script>
const mq = window.matchMedia( "(min-width: 981px)" );
if (mq.matches) {
function fadeInPage() {
if (!window.AnimationEvent) { return; }
var fader = document.getElementById('fader');
fader.classList.add('fade-out');
}
document.addEventListener('DOMContentLoaded', function() {
if (!window.AnimationEvent) { return }
var anchors = document.getElementsByTagName('a');
for (var idx=0; idx<anchors.length; idx+=1) {
? if (anchors[idx].hostname !== window.location.hostname || anchors[idx].pathname === window.location.pathname) {
? continue;
}
? anchors[idx].addEventListener('click', function(event) {
// Habilitar poder abrir enlaces en nueva pestanha con CRTL/CMD
if (event.metaKey || event.ctrlKey) return;
// 
? ? var fader = document.getElementById('fader'),
? ? ? ? anchor = event.currentTarget;
? ? var listener = function() {
? ? ? window.location = anchor.href;
? ? ? fader.removeEventListener('animationend', listener);
? ? };
? ? fader.addEventListener('animationend', listener);

? ? event.preventDefault();
? ? fader.classList.add('fade-in');
? });
}
});
window.addEventListener('pageshow', function (event) {
if (!event.persisted) {
? return;
}
var fader = document.getElementById('fader');
fader.classList.remove('fade-in');
});
}
</script>

<style>
#fader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
pointer-events: none;
animation-duration: 300ms;
animation-timing-function: ease-in-out;
}
/* Color segun si es night mode o normal */
#fader {
background: #f8f9fa;
}

#fader:before {
content: 'fade'
}
@keyframes fade-out {
from { opacity: 1 }
to { opacity: 0 }
}
@keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#fader.fade-out {
opacity: 0;
animation-name: fade-out;
}
#fader.fade-in {
opacity: 1;
animation-name: fade-in;
}
/* OCULTAR EN MOVILES */
@media only screen and (max-width: 767px) {
? #fader {
? ? display: none;
? }
}
</style>

<svg id="fader" class="fade-out"></svg>

    So it seems there’s some conflict with this script. I’ve now deleted it from the site and will look for an alternative.

Viewing 1 replies (of 1 total)
  • The topic ‘Images in Masonry Gallery opening as files instead of in lightbox’ is closed to new replies.