Jquery Image Gallery with categories

Question

I am going to use the Galleriffic jquery plugin to display my images (please look at demo here: http://www.twospy.com/galleriffic/advanced.html

I want to include categories above the gallery, but when each category is clicked I want the image gallery to change dynamically. That meaning, I don't want the page to reload each time a category is clicked, rather I want just the gallery area to change. Is there any suggestions for how to approach this? AJAX perhaps? Any similar code that you have used?

Answer 1

AJAX would work. Simply have a method that returns the HTML for that particular gallery DIV or the set of thumbs/images that make up the gallery. It's probably easier to create a server-side method to produce the gallery HTML in the first place and just reuse it to generate the HTML for the AJAX call. Have the method that obtains the new HTML re-invoke the gallery plugin on the HTML when the callback completes.

$('#category').change( function() {
    $('div#gallery').load( '/some/url/togeneratehtml',
                           { category : $(this).val() },
                           function() {
                             $('div#gallery').gallerific();
                           });
});