我正在使用图片库插件nanoGallery2和自定义按钮,将图片的图标切换为“收藏夹”。我想在localstorage中保存图标的切换状态。由于我显然对自己如何让这个工作无能为力,我希望有人可以指出我正确的方向。这是codepen我尝试在本地存储。哪个不起作用。
我的代码:
$(document).ready(function () {
$("#nanogallery2").nanogallery2({
thumbnailWidth: 'auto',
thumbnailHeight: 200,
itemsBaseURL: 'http://nanogallery2.nanostudio.org/samples/',
locationHash: false,
thumbnailHoverEffect2 : '.ngy2info_opacity_0_1|.ngy2info_scale_5_1',
thumbnailBuildInit2: '.ngy2info_translateY_-50%|.ngy2info_translateX_-50%',
thumbnailToolbarImage: { topLeft: 'custom1' },
fnThumbnailInit: myTnInit,
fnThumbnailToolCustAction: myTnTool,
icons: { thumbnailCustomTool1 : '<i class="nGY2Icon icon-heart"></i>'}
});
});
var favorites = JSON.parse(localStorage.getItem('favorites')) || [];
localStorage.setItem('favorites', JSON.stringify(favorites));
localStorage.getItem('favorites');
// click/touch on custom tool/button
function myTnTool( action, item ) {
console.dir(item);
switch( action ) {
case 'info':
break;
case 'custom1':
// switch favorite status
item.customData.favorite=!item.customData.favorite;
TnSetFavorite(item);
break;
}
}
// Add custom elements after one thumbnail is build
function myTnInit( $e, item, GOMidx ) {
TnSetFavorite( item);
}
// Set the favorite status
function TnSetFavorite(item) {
var c='#fff';
var d='#f90';
if( item.customData.favorite ) {
item.$elt.find('[data-ngy2action="custom1"]').css('color',d);
localStorage.setItem(item, 'favorites');
} else {
item.$elt.find('[data-ngy2action="custom1"]').css('color',c);
localStorage.removeItem(item);
}
}