Collection Images; Error when clicking on one

[AndyJAllen]

Hello. First off thank you for this plugin and I think its great. When clicking on an image from within a collection; it will spawn a popup but the image never loads. I will show the browser error and problematic code below.

file: /plugins/UserCollections/template/js/collectionZoom.js

Thanks,
Andy

[AndyJAllen]

I noticed code in the current repository is different from whats downloaded from PiwiGo's plugin page. Maybe its already fixed... I'll test

[AndyJAllen]

Unfortunately I had no luck fixing this on modus theme and piwigo v 12.2 by just copying the most recent changes from github.

[AndyJAllen]

I was able to fix this by changing the regex and image url to the following:

let match = [...initialSrc.matchAll(/(_data\S*)-[^._]+.(\S+)/gm)][0];
if(typeof match[1] != "undefined"){
   return match[1]+'-me.'+match[2];
}

Also this:
getTitle = (node) => $(node).parent().find('img').attr('title');

Needed changed to:
getTitle = (node) => $(node).parent().find('.overDesc').html();

[Gegele1]

Hi,
I am using piwigo 14.2.0 with modus theme and user collection and trying to work around this problem: all the pictures of the collection are displayed. When I search a collection from the menu bar with left click I get a never-ending charging frame of the picture. If I make a Crtl + left click, it shows the picture ready to browse in its album, not in its collection.

When I modify collectionZoom.js according to the code indicated by AndyJAllen just above, I get an empty screen when I search a collection from the menu bar.

collectionZoom.js after modification :

$(function () {
let selector = 'a.preview-box';
let getSrc = (node) => $(node).data('src');
let getTitle = (node) => $(node).closest('.wrap1').find('.thumbName').html();

if (user_theme === 'modus') {
    selector = '#thumbnails > li a:not(.addCollection)';
    getSrc = (node) => {
        let initialSrc = $(node).find('img').attr('src');
        let match = [...initialSrc.matchAll(/(_data\S*)-[^._]+.(\S+)/gm)][0];
        if(typeof match[1] != "undefined"){
          return match[1]+'-me.'+match[2];
};
    getTitle = (node) => $(node).parent().find('.overDesc').html();
} else if (user_theme === 'bootstrap_darkroom') {
    getTitle = (node) => $(node).closest('.card-thumbnail').find('.card-title').html();
}

jQuery(selector).colorbox({
    rel: '.preview-box',
    href: function () {
        return getSrc(this);
    },
    title: function () {
        var title = getTitle(this);
        if (uc_remove_action)
            title += ' · <a class="addCollection" data-id="' + jQuery(this).data('id') + '" rel="nofollow">' + str_remove_from_col + '</a>';
        title += ' · <a href="' + jQuery(this).attr('href') + '" target="_blank">' + str_jump_to_photo + ' ?</a>';
        return title;
    }
});

---

Seems like a regression or did I miss something?

[laurence2605]

Hello !
Did you manage to make it work properly ? I encounter the same issue with the latest PIWIGO version. an the latest plugin version as well. I tried to find how to apply AndyJAllen advices. But, unfortunately its doestn't work.

My computer is a windows 8.1.
[Piwigo]: 14.2.0

PHP: 8.2.12
MySQL: 10.4.32-MariaDB [2024-02-28 08:58:48]
Bibliothèque graphique: GD bundled

[laurence2605]

Hi !
Finally, i founded a way to fix the problem... it's not the best way to fix it, but it's acceptable...
I simply commented the bloc "if (user_theme === 'modus')" like this :

$(function () {
let selector = 'a.preview-box';
let getSrc = (node) => $(node).data('src');
let getTitle = (node) => $(node).closest('.wrap1').find('.thumbName').html();

/*if (user_theme === 'modus') {
    selector = '#thumbnails > li a:not(.addCollection)';
    getSrc = (node) => {
        let initialSrc = $(node).find('img').attr('src');
        let match = [...initialSrc.matchAll(/(upload\S*)-[^._]+.(\S+)/gm)][0];
        return "i.php?/"+match[1]+'-me.'+match[2];
    };
    getTitle = (node) => $(node).parent().find('img').attr('title');
} else */ 
if (user_theme === 'bootstrap_darkroom') {
    getTitle = (node) => $(node).closest('.card-thumbnail').find('.card-title').html();
}

jQuery(selector).colorbox({
    rel: '.preview-box',
    href: function () {
        return getSrc(this);
    },
    title: function () {
        var title = getTitle(this);
        if (uc_remove_action)
            title += ' · <a class="addCollection" data-id="' + jQuery(this).data('id') + '" rel="nofollow">' + str_remove_from_col + '</a>';
        title += ' · <a href="' + jQuery(this).attr('href') + '" target="_blank">' + str_jump_to_photo + ' →</a>';
        return title;
    }
});
jQuery(document).on('click', '#cboxTitle .addCollection', function () {
    jQuery.colorbox.close();
    jQuery('#thumbnails a.addCollection[data-id="' + jQuery(this).data('id') + '"]').trigger('click');
    return false;
});

})

Now, if you clic on the image, the link goes to the image in it's gallery. It doesn't show the image in the same page, but it's better than waiting indefinitely.

it worked on my PIWIGO 12.1 and 14.2 version.

[Gegele1]

Hi laurence2605,

Thank you, your last solution fixed it for me in 14.2 with modus after restarting Piwigo, even better than you seem to think. I get the mosaic of the collection, then, I can now browse the pictures from the mosaic of the collection, and when I clic on a picture, I get the image on the same screen, from which I can either continue to browse the collection without returning to the collection mosaic or go to the picture in its album. Seems perfect for me.

[laurence2605]

You're welcome ! So glad to hear that !

[AndyJAllen]

I use bootstrap darkroom so perhaps my customization wasn't appropriate for just modus theme.