viewer_tool.js

//viewerjs插件引用
		 var viewer2; 
         var index = 0;
         var links ='';
         var arry =[];
         var image = new Image(); 
         var setId //计时器
         //获取项目名
         var pathName = window.document.location.pathname;
     	var projectName =pathName.substring(0,pathName.substr(1).indexOf('/')+1);
         
        //点击事件
        Ext.fly(document).on('click', function(ev){
        	//获取点击的a链接
            var target = ev.getTarget('a[ref=img]');
            if (target) {
            	target.blur();//去掉a标签焦点
               // ev.preventDefault();//取消默认事件
                index = 0; //索引置空
            	
            	indexs(target.href); //获取数组
            	
                //预览图片
    			//this.show_viewer_singer(target.href, target.text);
            } 
            
            //按钮下一页、上一页
            var target_next = ev.getTarget('.viewer-next');
            var target_prev = ev.getTarget('.viewer-prev');
            if (target_next){
            	target_next.blur();//去掉a标签焦点
            	ev.preventDefault();//取消事件的默认动作。
            	clearTimeout(setId);//清除计时器
            	next(target_next);
            }
            if (target_prev){
            	target_prev.blur();//去掉a标签焦点
            	ev.preventDefault();//取消事件的默认动作。
            	clearTimeout(setId);//清除计时器
            	prev(target_prev);
            }
       
        }, this);
        
        //获取数组、索引
        function indexs(href,staus){
        	var setItems;
        	if (staus == '_more'){
        		setItems = Ext.query('a');
        	}else{
        		setItems = Ext.query('a[ref=img]');
        	}
        	arry.length=0;//置空数组
            Ext.each(setItems, function(item) {
            	if(staus == '_more'){
	                if(item.href && item.href.indexOf('javascript:window[\''+'show_viewer_more'+'\']') != -1) {
	                	var list= item.href.split(',');
	                	var id =list[1].replace("\'","").replace("\'","");
	                	arry.push([ links+ id ,item.text]);
	                }
            	}else{
            		if(item.href){
            			arry.push([item.href,item.text]);
            		}
            	}
            });
            while (arry[index][0].replace(/%27/g,'')!= href) {
                index++;
            }
        }
        
      //上一页
        function prev(target_prev){
        	viewer2.destroy();//销毁容器，退出预览
        	var src,alt;
        	var div = document.getElementById('view-imgs');
        	if (index == 0 ){
        		index = arry.length-1 ;
        	}else{
        		index = -- index ;
        	}
        	
        	for (i = 0 ; i < arry.length; i++){
            	if (index == i){
            		src = arry[i][0].replace(/%27/g,'');
            		alt = arry[i][1];
            	}
            }
        	show_viewer_singer(src, alt);
        }
        //下一页
        function next(target_next){
        	viewer2.destroy();//销毁预览容器
        	var src,alt;
        	if (index == arry.length-1){
        		index = 0;
        	}else{
        		index =  ++ index  ;
        	}
        	
        	for (i = 0 ; i < arry.length; i++){
            	if (index == i){
            		src = arry[i][0].replace(/%27/g,'');
            		alt = arry[i][1];
            	}
            }
        	show_viewer_singer(src, alt);
        }
       // 键盘捕捉事件
        document.onkeydown=function(ev){
        	var e =ev || window.event || arguments.callee.caller.arguments[0];
			if (e && viewer2.ready){ 
				var keyCode = ev.keyCode;
				if	(keyCode == 39 || keyCode == 68){ //D
					var target_next =Ext.query('.viewer-next');
					if	(target_next.length == 1){
						next(target_next[0]);
					}
				}else if (keyCode == 37 || keyCode == 65){//A
					var target_prev = Ext.query('.viewer-prev');
					if (target_prev.length == 1){
						prev(target_prev[0]);
					}
				}else if( keyCode== 87){//W
					ev.preventDefault();
					viewer2.zoom(0.1,true);
				}else if (keyCode==83){//S
					ev.preventDefault();
					viewer2.zoom(-0.1,true);
				}else if (keyCode == 81){//Q
					ev.preventDefault();
					viewer2.rotate(-90);
				}else if (keyCode == 69){//E
					ev.preventDefault();
					viewer2.rotate(90);
				}
			}
        }
        
        
        
        
        function show_viewer_more(link , id , name ,value) {
        	if (document.activeElement.tagName == 'A'){
        		document.activeElement.blur();//去掉a标签焦点
        	}
        	var src = link+id; //点击a连接的图片地址
        	 links = link; //数组中的图片地址
        	 index = 0; //索引置空
         	
         	 indexs(src,'_more'); //生成索引
         	
             //预览图片
            this.show_viewer_singer(src, name);
            
        }
        
         function show_viewer_singer(src, name) {
        	image.src = src ;
        	image.alt = index+1 +'/'+ arry.length;
        	
        	
            var viewer = new Viewer(image, {
                hidden: function() {
                    viewer.destroy();
                },
                toolbar: {
                    zoomIn: 3,
                    zoomOut: 3,
                    oneToOne: 3,
                    reset: 3,
                    prev: 3,
                    play: {
                        show: 3,
                        size: 'large',
                    },
                    next: 3,
                    rotateLeft: 3,
                    rotateRight: 3,
                    flipHorizontal: 3,
                    flipVertical: 3,
                },
                navbar:0,
                zoomRatio:0.5,
                keyboard :true,
            });
        
        	viewer.show();
            viewer2 = viewer;
            /*setId =setTimeout(function(){
            	if(viewer2.image.width !=0 && viewer2.image.height!=0){
            		viewer2.image.src=projectName+'/viewerjs/img_error.jpg';
            		viewer2.image.style.cssText = "height: 208px; margin-left: 461px; margin-top: 150.5px; position: absolute; width: 426px; max-width: none !important; transform: none;"
            	}
            	if(image.width !=0 && image.height!=0){
            		image.src=projectName+'/viewerjs/img_error.jpg';
            	}
            		
            },15000);*/
        }