viewer_tool.js 6.36 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
//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]);
            		}
            	}
            });
67
            while (arry[index][0].replace(/%27/g,'')!= href) {
68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
                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){
85
            		src = arry[i][0].replace(/%27/g,'');
86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102
            		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){
103
            		src = arry[i][0].replace(/%27/g,'');
104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201
            		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);*/
        }