其实在DOJO官方的例子中写的比较详细了,
dojox.image.ThumbnailPicker,
dojox.image.Lightbox两个插件结合用确实也很不错,不过还是有些细节问题值得注意。
1.把单击弹出改成双击弹出,这样单击可以作为选中该图片,进行删除,下载等后续操作。关键代码是 dojo.subscribe(dijit.byId('thumbPicker').getClickTopicName(), ondblclick); 函数不是直接的显示的lightbox函数,而是用一个间接的函数去绑定双击事件,触发lightbox函数。
2.样式的问题,hover在IE下没用,并且官方的select也是没有效果,所以应该手动去添加。
3.左右按钮,官方的例子样式写的不对(真不知道他们为什么不该),应该是background: transparent url("image/imageULbutton.png") no-repeat;
关键点1,2的代码:
function ondblclick(packet)
{
imageId = packet.data.id;
dojo.query(".imageGalleryThumbSelected").removeClass("imageGalleryThumbSelected");
dojo.addClass("img_thumbPicker_"+packet.index,"imageGalleryThumbSelected");
dojo.connect(dijit.byId('thumbPicker'),"onDblClick",function(){
if(packet!=null){
lightbox.show({
href: packet.largeUrl,
title: packet.title
});}
packet=null;
});
}