Will de la Vega Will de la Vega - 1 month ago 6
Javascript Question

How to refresh contents in NanoGallery jQuery Plugin?

I want to be able to remove the album contents from my div when pressing a button. Something like $("#myDiv").html(""), so the gallery is removed from the DOM and then I am able to recreate the gallery in the same div, but with a different data source array when clicking another button.

Right now I have a function that creates the nanoGallery and I call it when the user clicks on a button, then when the user clicks another button I need to remove the nanoGallery and recreate it with different data.

The code that is not working right now:

function createAlbum()
{
// This object has a different array every time button is clicked!
var pics = currentOrder["vehicle-pictures"];

$("#repairPictures").nanoGallery({
items : pics,
colorSchemeViewer : 'light',
photoset : 'none',
viewerDisplayLogo : true,
thumbnailLazyLoad : true,
thumbnailLabel : { display: true, position: 'overImageOnBottom', titleMaxLength: 35 },
colorScheme : { thumbnail:{ labelBackground: '#444 !important' } },
locationHash : false,
thumbnailHoverEffect :'borderLighter,imageScaleIn80'
});
}


Then to remove it...

//---------------------------------------------------------------------
function cleanAlbum()
{
$("#repairPictures").html("");
}


How can I accomplish this?

BTW, the $("#myDiv").html("") approach is just an example, if you know a better way to remove the gallery html from the div, please feel free to suggest it.

Answer

If you want to remove album from DOM, use: $('#yourElement').nanoGallery('destroy');, but you can set new items for nanoGallery and just do $('#yourElement').nanoGallery('reload');

Comments