Multiple galleries on the page

[alexweb-zz]

When I added two galleries to the page, they looks like not work. Try:

<?php $items = [
    [
        'url' => 'http://farm4.static.flickr.com/3712/9478186779_81c2e5f7ef_b.jpg',
        'src' => 'http://farm4.static.flickr.com/3712/9478186779_81c2e5f7ef_s.jpg',
        'options' => array('title' => 'Sail us to the Moon')
    ],
    [
        'url' => 'http://farm4.static.flickr.com/3802/9478895708_ccb710cfd1_b.jpg',
        'src' => 'http://farm4.static.flickr.com/3802/9478895708_ccb710cfd1_s.jpg',
        'options' => array('title' => 'Sail us to the Moon')
    ],
];?>
<?= dosamigos\gallery\Gallery::widget(['items' => $items]);?>

<?php $items = [
    [
        'url' => 'http://farm8.static.flickr.com/7429/9478294690_51ae7eb6c9_b.jpg',
        'src' => 'http://farm8.static.flickr.com/7429/9478294690_51ae7eb6c9_s.jpg',
        'options' => array('title' => 'Camposanto monumentale (inside)')
    ],
    [
        'url' => 'http://farm3.static.flickr.com/2863/9479121747_0b37c63fe7_b.jpg',
        'src' => 'http://farm3.static.flickr.com/2863/9479121747_0b37c63fe7_s.jpg',
        'options' => array('title' => 'Hafsten - Sunset')
    ],
];?>
<?= dosamigos\gallery\Gallery::widget(['items' => $items]);?>

[tonydspaniard]

@alexweb I am not sure if its the plugin but i tried and it works

[alexweb-zz]

Hm. Very strange. When I insert the code above to the blank page and click on thumbnails, two overlays appear and big image is hidden.

[tonydspaniard]

Maybe something with your CSS?

[alexweb-zz]

I don't think so. When there is one gallery on the page it works correctly. So you copied all the code above and it works? Looks like when there are two galleries on the page, the extension creates two sets of gallery controls. So when you click on thumbnail, two overlays and two sets of gallery controls (next/forward) apear. When there are 3 galleries - 3 overlays appear etc. Btw they have the same IDs, maybe that is the problem?

[tonydspaniard]

Hi, it works, but the problem is that it renders twice the template and thats bad. In order to make it work with multiple galleries I would require to modify the plugin itself, OR, I should make sure the template is always one by rendering a custom script.

See how your code renders two rows of pictures:

Will update to make sure it doesn't render twice the template.

[andrew72ru]

In my case, I create a multiply galleries on one page with Ajax-request

This is javascript in my main view:

$.post('{$coolGalleryUrl}', {'gallery': $(gObj).attr("id")}, function(rData){
        $(gObj).html(rData);
});

Controller find a models and

$this->renderAjax('_gallery', ['model' => $gallery]);

And _gallery view

echo Gallery::widget([
    'items' => $items,
    'options' => [
        'id' => 'gallery-widget-' . $model->id,
    ],
    'templateOptions' => [
        'id' => 'blueimp-gallery-' . $model->id
    ],
    'clientOptions' => [
        'container' => '#blueimp-gallery-' . $model->id
    ]
]);

So, I have two (for example) js-calls in main view and two galleries on one page, and id of widgets and id of gallery containers is mine, but a javascript-call

dosamigos.gallery.registerLightBoxHandlers('#gallery-widget-7 a', {"container":"#blueimp-gallery-7"});

is not work, because a options parameter in dosamigos-blueimp-gallery.js is undefined.

Also, this code

if (typeof dosamigos == "undefined" || !dosamigos) {
    var dosamigos = {};
}
dosamigos.gallery = (function($){
    var pub = {
        registerLightBoxHandlers: function(selector, options) {
            $(document).off('click.gallery', selector).on('click.gallery', selector, function() {
                var links = $(this).parent().find('a.gallery-item');
                var options = options || {};
                options.index = $(this)[0];
                blueimp.Gallery(links, options);
                return false;
            });
        }
    };
    return pub;
})(jQuery);

not work in my case, but this

if (typeof dosamigos == "undefined" || !dosamigos) {
    var dosamigos = {};
}
dosamigos.gallery = (function($){
    var pub = {
        registerLightBoxHandlers: function(selector, options) {
            var options = options || {}; // options is here!
            $(document).off('click.gallery', selector).on('click.gallery', selector, function() {
                var links = $(this).parent().find('a.gallery-item');
                options.index = $(this)[0];
                blueimp.Gallery(links, options);
                return false;
            });
        }
    };
    return pub;
})(jQuery);

work for me.

I don`t know, is this correct, but may be You tested? And change, if test is passed?

P.S. My English is terrible, sorry :)

[hphuoclam]

thank you!

[dajnz]

+1 Yes, this fixes the problem, thank you @andrew72ru

registerLightBoxHandlers: function(selector, options) {
    var options = options || {}; // options is here!
    ...

[Routhgen]

This bug is still present in actual version. Doesnt work modifing from original code with opts to options. Why? How to fix that while author didnt fix his own bugs?

if (typeof dosamigos == "undefined" || !dosamigos) { var dosamigos = {}; } dosamigos.gallery = (function($){ var pub = { registerLightBoxHandlers: function(selector, opts) { var options = opts || {}; $(document).off('click.gallery', selector).on('click.gallery', selector, function() { var links = $(this).parent().find('a.gallery-item'); options.index = $(this)[0]; blueimp.Gallery(links, options); return false; }); } }; return pub; })(jQuery);

[lioPixiumDigital]

Awful fix that works: add a static member on Gallery class, and test it when the template is rendered

class Gallery extends Widget
{
    static $singleRender = false;

    //...

    public function renderTemplate()
    {
        if (!self::$singleRender) {
            self::$singleRender = true;
        } else {
            return "<-- NO RENDER -->";
        }
        //...
    }
    //...
}

[excel007]

Awful fix that works: add a static member on Gallery class, and test it when the template is rendered

class Gallery extends Widget
{
    static $singleRender = false;

    //...

    public function renderTemplate()
    {
        if (!self::$singleRender) {
            self::$singleRender = true;
        } else {
            return "<-- NO RENDER -->";
        }
        //...
    }
    //...
}

This is work for me.

It can show multiple instant lightbox.