0

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);
});
user2755541
  • 536
  • 2
  • 10
  • 25

2 Answers2

1

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)

user2755541
  • 536
  • 2
  • 10
  • 25
NotJustin
  • 529
  • 6
  • 20
  • Very elegant solution. You don't have to deal with adding/removing data, just telling which dataSource to reference. Thanks! – user2755541 Mar 25 '14 at 19:07
  • You know what, I may have accepted this answer too soon. Now I'm getting this error: `Fatal error: Could not extract a stage height from the CSS. Traced height: 0px` – user2755541 Mar 25 '14 at 19:14
  • 1
    using .load instead of .run fixes this issue. Edited above. – user2755541 Mar 25 '14 at 20:10
0

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);
});
Federico J.
  • 15,388
  • 6
  • 32
  • 51