Single image gallery – Modal not working

Posted in: Newspaper
Post count: 201

Hi,

I’m trying to find the best way to create a gallery on a page.

At the moment, I’m using multiple ‘single image’ blocks, which works in creating a neat grid of gallery photos. Users should then be able to click a photo for a larger view, with the option to scroll left and right.

An example of this is available here: https://cloud.tagdiv.com/photo-gallery-spa-heaven/

Unfortunately, when I use or create a similar gallery, the images are not loading in a pop-up, despite ‘Modal image’ being checked in each single image.

What am I doing wrong?

Thanks!

Post count: 35449

Hi,

Normally, this should work without any issues if nothing else is interfering. Please try importing the gallery from the cloud library and then replacing the images:

View post on imgur.com

View post on imgur.com

View post on imgur.com

View post on imgur.com


If it doesn’t work this way, it’s likely that something is interfering. My suggestion would be to run a test using only the theme plugins enabled.

Let me know how it goes.

Post count: 201

Hi Calin,

I’ve tried importing the gallery on my local staging site using a blank category template, with all other plugins disabled, but frustratingly still can’t get the images to pop-up.

Update: if I create a new page, or a page cloud template, the gallery does work. However, if I import the gallery to a category cloud template, it doesn’t work.

Any idea why pop-up images wouldn’t work in category templates?

Post count: 35449

Hi,
Normally, it should work, the element has its own option for popup in the module https://prnt.sc/ochu4uQVa9Fi
If possible on the live site to provide a link where I can check this situation?

Post count: 201

Yeah it’s so strange. The modal option is there, and seems to work everywhere apart from category cloud templates.

My updated work is still in dev but I’ll see if I can push it live sooner for you to take a look at. In the meantime, can you try importing the gallery template (https://cloud.tagdiv.com/photo-gallery-spa-heaven/) into a category cloud template, to see if it works for you?

Post count: 201

Hi Calin,

You can now see an example of the gallery not working as expected at this url.

Look forward to hearing from you.

Post count: 35449

Hi,
I see that the images are displaying the attachment path instead of displaying them in a pop-up modal.
Here is a quick fix that can be used. On the cloud category template use tagDiv Composer and in a raw HTML element, add this js code:
jQuery(document).ready(function($) {
$('.tdm-inline-image-wrap img').each(function() {
var $parentLink = $(this).parent('a');
if ($parentLink.length) {
$parentLink.addClass('td-modal-image');
}
});
$('.td-modal-image').magnificPopup({
type: 'image',
gallery: {
enabled: true
}
});
});

This should be set between script tags like this – https://prnt.sc/JEUuywa7ias6
I hope this will help you!

Post count: 201

Hi Calin,

Thank you for following up. Unfortunately, the suggested code hasn’t worked; it does turn the gallery into a pop-up modal, but shows the same incorrect image from the media library for each picture.

Do we know what’s causing the issue; why does a cloud category template behave this way even though the modal box is checked?

Post count: 35449

Hi,
Could you contact us via email at contact@tagdiv.com and provide a temporary WP-Admin access to see what the situation is and why the provided code is not applied correctly?
Thank you!

Post count: 201

Hi Calin,

In the first instance, can you confirm whether the template works for you on a cloud template?

Ideally I’d like to get it working without having to inject additional code. Very strange that it works fine on other cloud templates, just not category cloud templates.

Post count: 35449

Hi,

I have teh same behavior and I saw that the modal is not set correctly on the link of the image bot on the image and the provided js should make it work as on the rest of the website (I also added this on our list to be checked and fixed, but until then ,the provided js sjould do the job)

Post count: 201

Hi Calin,

Thanks for confirming, it’s reassuring to know that I haven’t overlooked something, and that the problem lies elsewhere.

Hopefully this can be fixed in the next release. Thanks for adding it to the list.

Post count: 35449

Hello,
It will be, but for the next one, not for today’s one, time was too short to fix it for today’s update.
Thanks!

Post count: 201

Ironic that the next release came out seconds after I posted. Nevertheless, great to see the category siblings fix was rolled in.

Top-notch support from the team as always, thank you all for the great work you do.

Post count: 35449

Thank you very much! 😀
Although we had not originally planned to release the update so soon, we identified and resolved several vulnerabilities and therefore decided to deploy the update earlier than scheduled.

Post count: 201

Can confirm this was fixed in the latest update. Thank you once again.

Viewing 16 posts - 1 through 16 (of 16 total)
You must be logged in to reply to this topic.