pc端、移动端照片查看器（照片编辑器插件）

PC端：

首先文件引入：

html代码：

<div class="container">
	        <div class="image-set">
	            <ul>
	            	<li>
	            		<a data-magnify="gallery" data-caption="111111" href="img3/img1.png">
			               <img src="img3/img1.png" title="" alt="img1" />
			            </a>
	            	</li>
	            	<li>
	            		<a data-magnify="gallery" data-caption="22222" href="img3/img2.png">
			               <img src="img3/img2.png" title="" alt="img1" />
			            </a>
	            	</li>
	            	<li>
	            		<a data-magnify="gallery" data-caption="33333" href="img3/img3.png">
			               <img src="img3/img3.png" title="" alt="img1" />
			            </a>
	            	</li>
	            </ul>
	        </div>
        </div>

再设置下样式：

.magnify-modal {
            box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.3);
        }

        .magnify-header .magnify-toolbar {
            width: 40px;
            background-color: rgba(0, 0, 0, .5);
        }

        .magnify-stage {
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            border-width: 0;
        }

        .magnify-footer .magnify-toolbar {
            display: inline-block;
            height: 40px;
            background-color: rgba(0, 0, 0, .5);
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

再重新定义下内容：

      $('[data-magnify]').magnify({
            headToolbar: [
                'close'
            ],
            footToolbar: [
                'zoomIn',
                'zoomOut',
                'prev',
                'fullscreen',
                'next',
                'actualSize',
                'rotateRight'
            ],
            title: false,
            resizable:[  //模态窗口调整大小
               'true'  
            ],
            keyboard:[]//键盘
        });

具体参数详见：Magnify JS 官网

效果：

手机端：

文件引入：

html代码：

        <div id="box1">
			<div id="header">
				<header class="mui-bar mui-bar-nav bg" style="box-shadow: none;">
					<a href="###" class="mui-icon mui-icon-left-nav mui-pull-left mui-icon-    arrowleft back" style="width: 45px;height: 60px;display: block;"></a>
					<h1 class="mui-title">手机端照片查看器</h1>
				</header>
			</div>
			<div id="content">
				<div class="content"> 
					<ul>
	            	<li>
	            		<img src="img/img1.jpg"  data-preview-src="" data-preview-group="1" />
	            	</li>
	            	<li>
	            		<img src="img/img2.jpg"  data-preview-src="" data-preview-group="1" />
	            	</li>
	            	<li>
	            		<img src="img/img3.jpg"  data-preview-src="" data-preview-group="1" />
	            	</li>
	            </ul>
				</div>
			</div>
		</div>

js初始化：

mui.init();
mui.previewImage();

效果：

支持双击放大，缩小，左右切换

 

转载于:https://my.oschina.net/u/3767595/blog/1606323