Question

I'm building a dynamic gallery with galleria. The idea is that you'd click on a product category and the associated photos are loaded into the gallery. Clicking a category would first remove all the images currently sitting in the gallery and then load the ones. I can successfully load new photos in dynamically (below), but I can't figure out how to get rid of all the current ones first.

$("#category1").click(function(){
    var category1photos = [
       { image: 'images/products/photo1.jpg' },
       { image: 'images/products/photo2.jpg' }
    ];
    Galleria.get(0).push(category1photos);
});
Was it helpful?

Solution

Is there a particular reason why you don't change the datasource and rerun the galleria?

Galleria datasource

Then you can easily change the images:

var data = [
    { image: "/path/to/myimage1.jpg" },
    { image: "/path/to/myimage2.jpg" },
];

var gallery = this; 
gallery.load(data);

Data being any source (JSON, data-attribute, etc)

OTHER TIPS

Check this from the docs:

http://galleria.io/docs/api/methods/#manipulation

$("#category1").click(function(){
    // This will remove all the photo from Galleria array: 
    Galleria.get(0).splice( 0, Galleria.get(0).length );

    var category1photos = [
       { image: 'images/products/photo1.jpg' },
       { image: 'images/products/photo2.jpg' }
    ];
    Galleria.get(0).push(category1photos);
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top