【总结】【图片预览】手机预览图片插件iSlider使用总结

开发资源包在这里:


http://download.csdn.net/detail/snow_finland/8763729


其中有官网原始版本和楼主优化过的版本可选择(楼主优化的部分都用注释标出了)




官网地址:


http://be-fe.github.io/iSlider/



需要用到islider时,可以包含islider.js的文件,然后js中做如下调用:


var islider_tpl = '<div class="iSlider" id="J_islider">'+
			'<div class="preview_toolbar preview_toolbar_top">'+
				'<a id="J_close_preview" class="icons1 i_close"></a>'+
				'<div class="user_info_box">'+
					'<p class="creator"></p>'+
					'<p class="time"></p>'+
				'</div>'+
			'</div>'+
			'<div id="iSlider-wrapper" class="preview_wrap">'+
			'</div>'+
			'<p id="J_islider_loading_more" class="loading_more hide">正在加载更多...</p>'+
		'</div>';
		
		
$("#J_file_list .item").die().live('click',function(){
	var show_current = $(this).index();
	var window_scroll_top = $(window).scrollTop();
	$('body').append(islider_tpl);
	$('#J_file_list').hide();
	
	islider = new iSlider({
		type: 'pic',
		data: islider_array, // islider_array为arr形式,每一个arr中的obj包含需要用到的信息,比如fileid、content、creatorid、time等等
		dom: document.getElementById("iSlider-wrapper"),
		isLooping: true,
		animateType: 'default',
		useZoom: true,
		initIndex: show_current
	});
	
	var prevent_body_move = function(evt){
		evt.preventDefault();
	}
	
	var prevent_window = document.body;
	prevent_window.addEventListener('touchmove', prevent_body_move);
	
	$('#J_close_preview').die().live('touchstart',function(){
		islider.destroy();
		$('#J_islider').remove();
		prevent_window.removeEventListener('touchmove', prevent_body_move);
		$('#J_file_list').show();
		$(window).scrollTop(window_scroll_top);
		return false;
	});
});


由于代码都比较简单,并且资源包中的注释都非常详细,

这里就提一下开发中碰到过的几个重要的部分:


1、为了良好的用户体验,在出islider的图片预览浮层时,需要将所有body上别的元素隐藏,并且滚轴移动到左上角的地方,屏蔽body的默认move事件,确保屏幕中只有左右滑动,长按保存图片和关闭浮层这几个操作


2、官网中屏幕旋转的事件是监听在元素上的,但是android手机只有window上才能监听到这个事件,ios可以监听在元素上,所以这个部分需要改为监听在window上,以便兼容


3、允许瀑布流方式的加载更多的图片(在预览时),当图片是倒数三张的时候加载更多批次;当正在加载后一批并且这时已经是当前批次的最后一张图时,不允许左右滑动切换图片,并且给出正在加载的提示


4、修复官网代码中,只有一张图片时的加载和左右滑动的事件错误


5、重设了最大和最小的缩放尺寸(官网版本只有最小缩放尺寸)



PS:这是楼主目前用下来最好用的图片预览插件,没有之一,可控性比较强,而且代码比较简短,比较清晰,容易根据个人需要进行改动和添加,并且没有屏蔽浏览器原生的长按保存图片的功能

你可能感兴趣的:(图片预览,图片预览插件,iSlider,手机图片预览,手机图片插件)