Issue when adding images to an already loaded galleria when swipe is set to true (iPad)

[digiguru]

I have a demo page setup showing an issue when pushing images into an already loaded galleria.

http://alpha.hitched.co.uk/DemoPages/Galleria/Galleria.htm

For performance reasons we have 3 images on the page by default, and then we push images (up to 50) after the galleria has called it's ready event.

$(document).ready(function () {

     //Initialize Galleria
    Galleria.loadTheme('galleria.hitched.js');
    Galleria.run('#galleria');
    Galleria.ready(function(options) {
        var gal = this;
        setTimeout(function() { //Simulates ajax call

            var result = {"d":[{"__type":"JSWSMediaGallery+ImageWithThmbnail","Image":"http://hitchedukir.s3.amazonaws.com/Venues/800_800_scaled_725084_tall_2D00_front.jpg","Thumbnail":"http://hitchedukir.s3.amazonaws.com/Venues/40_40_thumb_725084_tall_2D00_front.jpg","Title":"The Montagu Arms "}]};

            $.each(result.d, function(index, val) {
                var imageObject = {
                        thumb: val.Thumbnail,
                        image: val.Image,
                        title: val.Title
                    };
                gal.push(imageObject);
            });
        }, 5000);
    });

});

This seems to work fine on desktop, you can see the first 3 images, and then the later images but on iPad you can only navigate to the first 4 images. It seems in the following code snippet:

this.bind( Galleria.IMAGE, function(e) {
...
     $.each(filtered, function(i, loadme) {
              var d = self.getData(loadme),
                   img = self._controls.slides[loadme],
...
});

... self._controls.slides only has the first 3 images, and hasn't grown every time we've done a push.

Any advice to get this working?

[digiguru]

I've investigated this a little more. If I disable the swipe in options:

Galleria.run('#galleria', {
        swipe:false
});

You can see that it starts working.

http://alpha.hitched.co.uk/DemoPages/Galleria/Galleria-Fixed.htm

I can see in the codebase that

 // we do things a bit simpler in swipe:
        if ( swipe ) {

I'm not 100% sure the swipe behavior has setup everything it needs to when you do a push.

[digiguru]

Oooo - just found that you can emulate touch events in Chrome

To see - go here:

http://alpha.hitched.co.uk/DemoPages/Galleria/Galleria.htm

And then do this in chrome
(Dev Tools > Settings > Overrides > Enable > Emulate Touch events).

That will help work out a fix.

[drskullster]

Any chance you got it working ? I have exactly the same problem, I just turned off swipe and it works.
Same behavior on ipad (chrome and safari) and on nexus 7 (chrome).

[aethernet]

same issue here, tried to dig in the code but i'm lost.

[kayasky]

I copied over and modified some code from the internal _run() function to the push() function which fixed this issue for me. Basically what this does is add the pushed image(s) to the _controls.slides array if swipe is enabled. This of course assumes you are using the galleria.push() method to push additional images to the Slideshow after the Slideshow is ready.

Replace the push() function with this and it should fix things up:

push : function() {
        var self = this,
            args = Utils.array( arguments );

        if ( args.length == 1 && args[0].constructor == Array ) {
            args = args[0];
        }

        window.setTimeout(function() {
            protoArray.push.apply( self._data, args );
            self._parseData( function() {
                self._createThumbnails( args );
            });
            if (self._options.swipe) {
                var slidesLength = (self.getDataLength() - 1),
                    $images = self.$( 'images' ).width( slidesLength * self._stageWidth ),
                    image = new Galleria.Picture(),
                    data = self.getData(slidesLength);

                $( image.container ).css({
                    position: 'absolute',
                    top: 0,
                    left: self._stageWidth*(slidesLength)
                }).prepend( self._layers[slidesLength] = $( Utils.create('galleria-layer') ).css({
                    position: 'absolute',
                    top:0, left:0, right:0, bottom:0,
                    zIndex:2
                })[0] ).appendTo( $images );

                if( data.video ) {
                    _playIcon( image.container );
                }

                self._controls.slides.push(image);

                var frame = new Galleria.Picture();
                frame.isIframe = true;

                $( frame.container ).attr('class', 'galleria-frame').css({
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    zIndex: 4,
                    background: '#000',
                    display: 'none'
                }).appendTo( image.container );

                self._controls.frames.push(frame);

                self.finger.setup();
            }

        }, 2);
        return self;
    }

[monsieurBelbo]

Had the same issue.

Modifying the push method fixed it.

[burtyish]

I had the same problem. Patching the push function worked for me too, but there's one caveat:
I had to call push with one image at a time. Calling it with an array of images didn't work.
I think it's because
image = new Galleria.Picture()
returns just a single image and then just that image is added.

[jeffehobbs]

@davidhellsing Any chance a fix for this could be added to core? We're seeing the same issue.

[gzhebrunov]

Issue is reproducible on Chrome for any type of touch devices now. Turned off "swipe" as workaround, would vote for fixing this in next releases.