地址：/articles/2YRVr2a
可以通过nmp或bower来安装该图片查看器插件。npm install imageviewerbower install imageviewer 复制代码使用方法使用该幻灯片插件需要引入jQuery，和文件。<link rel="stylesheet" href="css/" type="text/css"><script type="text/javascript" src="js/"></script><script type="text/javascript" src="js/"></script> 复制代码HTML结构该图片查看器需要一个块级元素来作为包裹元素，可以只有一张图片，直接使用<img> 元素，或者是一组图片，使用无序列表来制作：<!--单张图片--><div> <img class="image" src="" alt="Picture"></div><!--一组图片--><div> <ul class="images"> <li><img src="" alt="Picture"></li> <li><img src="" alt="Picture 2"></li> <li><img src="" alt="Picture 3"></li> </ul></div> 复制代码初始化插件在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该图片查看器插件。$('.image').viewer();$('.images').viewer(); 复制代码键盘控制在模态窗口模式下，可以使用键盘来控制查看图片：Esc：退出全屏并停止播放。←：查看前一张图片。→：查看下一张图片。↑：放大图片。↓：缩小图片。Ctrl + 0：缩小到初始大小。Ctrl + 1：放大到自然尺寸。配置参数你可以通过$().viewer(options)来设置这个图片查看器的参数。如果你要修改全局配置参数，你需要使用$.(options)。inline：类型：Boolean，默认值：false。使用内联模式来查看图片。button：类型：Boolean，默认值：true。在图片查看器的右上角显示按钮。navbar：类型：Boolean，默认值：true。显示导航条。title：类型：Boolean，默认值：true。显示图片标题。标题来自图片的alt属性或从URL解析的图片名称。toolbar：类型：Boolean，默认值：true。显示工具栏。tooltip：类型：Boolean，默认值：true。在放大缩小图片的时候显示图片的百分比比例。movable：类型：Boolean，默认值：true。图片是否可以移动。zoomable：类型：Boolean，默认值：true。图片是否可以放大缩小。rotatable：类型：Boolean，默认值：true。图片是否可以旋转。scalable：类型：Boolean，默认值：true。图片是否可以翻转。transition：类型：Boolean，默认值：true。是否为某些指定的元素使用CSS3 Transition效果。fullscreen：类型：Boolean，默认值：true。是否允许全屏模式。该功能需要浏览器支持Full Screen API。keyboard：类型：Boolean，默认值：true。是否可以使用键盘控制。interval：类型：Number，默认值：5000。自动播放时图片的切换时间间隔。zoomRatio：类型：Number，默认值：0.1。在使用鼠标缩放图片时的缩放比例。minZoomRatio：类型：Number，默认值：0.01。图片缩小的最小比例。maxZoomRatio：类型：Number，默认值：100。图片放大的最小比例。zIndex：类型：Number，默认值：2015。定义图片查看器模态窗口的CSS z-index属性的值。zIndexInline：类型：Number，默认值：0。定义图片查看器在内联模式中CSS z-index属性的值。url：类型：String 或 Function，默认值：'src'。定义原始图片的URL地址。build：类型：Function，默认值：null。""事件的快捷方式。built：类型：Function，默认值：null。""事件的快捷方式。show：类型：Function，默认值：null。""事件的快捷方式。shown：类型：Function，默认值：null。""事件的快捷方式。hide：类型：Function，默认值：null。""事件的快捷方式。hidden：类型：Function，默认值：null。""事件的快捷方式。方法由于该图片查看器插件使用的是异步加载图片的方式，所以你需要在shown(模态窗口模式)或built(内联模式)之后才能调用下面的方法，除了模态窗口模式的show方法和destroy方法之外。$().viewer({ shown: function () { $().viewer('method', argument1, , argument2, ..., argumentN); }}$().viewer({ built: function () { $().viewer('method', argument1, , argument2, ..., argumentN); }} 复制代码show()：显示图片查看器。只在模态窗口模式中有效。hide()：隐藏图片查看器。只在模态窗口模式中有效。view([index])：index (optional)： 类型：Number 默认值：0 在查看的图片的index通过图片的index来查看某张图片。$().viewer('view', 1); 复制代码prev()：查看前一张图片。next()：查看下一张图片。move(offsetX[, offsetY])：移动图片。offsetX： 类型：Number 默认值：0 水平方向上移动的距离，单位像素。offsetY(optional)： 类型：Number 垂直方向上移动的距离，单位像素。 如果没有提供，默认值是offsetX。$().viewer('move', 1);$().viewer('move', -1, 0); $().viewer('move', 1, 0); $().viewer('move', 0, -1); $().viewer('move', 0, 1); 复制代码zoom(ratio[, hasTooltip])：缩放图片。ratio：类型：NumberZoom in(放大)：需要一个正数(ratio > 0)。Zoom out(缩小)：需要一个负数(ratio < 0)hasTooltip (optional)： 类型：Boolean默认值：false显示tooltip。$().viewer('zoom', 0.1);$().viewer('zoom', -0.1); 复制代码zoomTo(ratio[, hasTooltip])：缩放图片到指定的比例。ratio：类型：Number需要一个正数(ratio > 0)hasTooltip (optional)：类型：Boolean默认值：false显示tooltip。$().viewer('zoomTo', 0); $().viewer('zoomTo', 1); 复制代码rotate(degree)：旋转图片。degree：类型：Number向右旋转需要一个正数(ratio > 0)向左旋转需要一个负数(ratio < 0)该方法需要浏览器支持CSS3 2D Transforms(IE9+)。$().viewer('rotate', 90);$().viewer('rotate', -90); 复制代码rotateTo(degree)：将图片旋转到指定的角度。degree： 类型：Number 该方法需要浏览器支持CSS3 2D Transforms(IE9+)。$().viewer('rotateTo', 0); $().viewer('rotateTo', 360); 复制代码scale(scaleX[, scaleY])：翻转图片。scaleX：类型：Number默认值：1图片横坐标方向上的缩放比例。当值为1时不做任何事情。scaleY：(optional类型：Number图片纵坐标方向上的缩放比例。如果未指定，默认值为scaleX。该方法需要浏览器支持CSS3 2D Transforms(IE9+)。$().viewer('scale', -1); $().viewer('scale', -1, 1); $().viewer('scale', 1, -1); 复制代码scaleX(scaleX)：水平翻转图片。scaleX：类型：Number默认值：1图片横坐标方向上的缩放比例。当值为1时不做任何事情。该方法需要浏览器支持CSS3 2D Transforms(IE9+)。$().viewer('scaleX', -1); 复制代码scaleY(scaleY)：垂直翻转。scaleY：类型：Number默认值：1图片纵坐标方向上的缩放比例。当值为1时不做任何事情。该方法需要浏览器支持CSS3 2D Transforms(IE9+)。$().viewer('scaleY', -1); 复制代码play()：播放图片。stop()：停止播放。full()：进入模态窗口模式。仅在内联模式中有效。exit()：退出模态窗口模式。仅在内联模式中有效。tooltip()：以百分比显示当前图片的比例。需要tooltip参数设置为true。toggle()：在原始尺寸和当前尺寸之间切换图片尺寸。reset()：重置图片到元素状态。destroy()：销毁图片查看器实例。事件：当图片查看器实例开始创建时触发。：当图片查看器实例被创建之后触发。：当图片查看器元素开始显示时触发。仅在模态窗口模式有效。：当图片查看器元素显示之后触发。仅在模态窗口模式有效。：当图片查看器元素开始隐藏时触发。仅在模态窗口模式有效。：当图片查看器元素隐藏之后触发。仅在模态窗口模式有效。No conflict如果你使用了和这个图片查看器具有相同名称空间的其它插件，可以通过$.方法来恢复它。<script src=""></script><script src=""></script><script> $.(); </script> 复制代码浏览器兼容Chrome (latest 2)Firefox (latest 2)Internet Explorer 8+Opera (latest 2)Safari (latest 2)本文版权属于jQuery之家
- 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
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 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
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
下载地址：/detail/cometwo/9415928
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="dist/" /> <script type="text/javascript" src="assets/js/"></script> <script type="text/javascript" src="dist/"></script> <script type="text/javascript" src="assets/js/"></script> <style type="text/css"> #test { padding: 5px; border: 1px solid green; height: 326px; } #test .docs-pictures { margin: 0; padding: 0; list-style: none; display: block; } #test .docs-pictures li { float: left; margin: 0 -1px -1px 0; border: 1px solid red; overflow: hidden; } #test .docs-pictures li img { width: 316px; } #imgs { width: 800px; height: 326px; border: 1px solid blue; position: relative; margin: -1px 0px -1px 0; } #imgs img { position: relative; width: 316px; display: block; float: left; border: 1px solid black; } </style> </head> <body> <div id="imgs"> <img data-original="assets/img/" src="assets/img/" /> <img data-original="assets/img/" src="assets/img/" /> </div> <div id="test"> <ul class="docs-pictures"> <li><img src="assets/img/" /></li> <li><img data-original="assets/img/" src="assets/img/thumbnails/"></li> <li><img data-original="assets/img/" src="assets/img/thumbnails/"></li> <li><img data-original="assets/img/" src="assets/img/thumbnails/"></li> <li><img data-original="assets/img/" src="assets/img/thumbnails/"></li> </ul> </div> <div id="imgs"> <img data-original="assets/img/" src="assets/img/" /> <img data-original="assets/img/" src="assets/img/" /> </div> </body></html>
- 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
- 67
- 68
- 69
- 70
- 71
- 72
还有一款重量级支持移动端的重量级插件/api/?url=/demo/20140807-1
请放到服务器上看，否则直接打开无法关闭，下载地址：/detail/cometwo/9401563
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>最牛B的仿QQ图片查看</title> <script src="jquery-photo-gallery/"></script> <script src="jquery-photo-gallery/"></script></head><style> html,body{ width : 100%; height : 100%; margin:0; overflow: hidden; } img{ max-width: 300px; max-height: 200px; }</style><body><h2>单击图片显示大图</h2><div class="gallerys"> <img class="gallery-pic" src="img/" onclick="$.openPhotoGallery(this)" /> <img class="gallery-pic" src="img/" onclick="$.openPhotoGallery(this)" /> <img class="gallery-pic" src="img/" onclick="$.openPhotoGallery(this)" /> <img class="gallery-pic" src="img/" onclick="$.openPhotoGallery(this)" /></div></body></html>
- 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
来一款轻量级的图片查看插件，原文地址/huanlei/p/
<!doctype html><html lang="en"><head> <meta charset="gbk"> <title>画廊</title> <style> .gallery-overlay {width:100%;height:100%;position:fixed;_top:absolute;top:0;left:0;z-index:99;filter:progid:.gradient(enabled='true',startColorstr='#B2000000', endColorstr='#B2000000');background-color:rgba(0,0,0,.7);} :root .gallery-overlay {filter:none;} .gallery-close, .gallery-prev, .gallery-next {position:absolute;color:#fff;text-decoration:none;} .gallery-prev, .gallery-next {top:40%;font:bold 80px/80px simsun;} .gallery-prev {left:50px;} .gallery-next {right:50px;} .gallery-close {width:82px;height:77px;top:0;right:0;background:url(/i/333689/201404/181538254946336.png) no-repeat;text-indent:-9999em;} .gallery-photo {width:100%;height:100%;position:absolute;top:50px;vertical-align:middle;text-align:center;} .gallery-photo span {height:100%;display:inline-block;vertical-align:middle;} .gallery-photo img {max-width:100%;max-height:100%;vertical-align:middle;cursor:pointer;} .gallery-thumb {width:100%;height:56px;position:absolute;bottom:50px;text-align:center;font-size:0;} .gallery-thumb a {width:50px;height:50px;overflow:hidden;margin:0 2px;display:inline-block;*zoom:1;border:3px solid transparent;opacity:.6;filter:alpha(opacity:60);} .gallery-thumb img {max-width:100px;max-height:100px;min-width:50px;min-height:50px;border:none;} .gallery-thumb .selected {border-color:#f60;opacity:1;filter:alpha(opacity:100);} </style></head><body style="height:2000px;"><h1>画廊</h1><p class="img"> <a href="/i/333689/201403/"><img src="/i/333689/201403/" alt=""></a> <a href="/i/333689/201403/"><img src="/i/333689/201403/" alt=""></a> <a href="/i/333689/201403/"><img src="/i/333689/201403/" alt=""></a> <a href="/i/333689/201403/"><img src="/i/333689/201403/" alt=""></a> <a href="/i/333689/201403/"><img src="/i/333689/201403/" alt=""></a></p><script src="/jquery-1.11."></script><script>;(function($) { $.({ gallery: function() { $(this).on("click", function() { var self = $(this), link = ().find("a"), bd = $("body"); html = "\ <div class='gallery-overlay'>\ <div class='gallery-photo'><span></span><img src='"+ ("href") +"'></div>\ <div class='gallery-thumb'></div>\ <a class='gallery-prev' href='javascript:;' title='上一个'><</a>\ <a class='gallery-next' href='javascript:;' title='下一个'>></a>\ <a class='gallery-close' href='javascript:;' title='关闭'>×</a>\ </div>\ "; ("overflow-y", "hidden").append(html); var overlay = $(".gallery-overlay"), photo = $(".gallery-photo"), photoImg = ("img"), thumb = $(".gallery-thumb"), prev = $(".gallery-prev"), next = $(".gallery-next"), close = $(".gallery-close"), str = ""; function toResize() { var height = $(window).height(); (height); ({"height": height - 200}); ({"max-height": height - 200}); } toResize(); $(window).resize(function() { toResize(); }); (function() { var href = $(this).attr("href"), src = $(this).find("img").attr("src"), act = "<a href='"+ href +"'><img src='"+ src +"'/></a>"; str += act; }); (str); var thumbLink = ("a"), len = - 1, index = (this); function switchPhoto(index) { var _this = (index); _this.addClass("selected").siblings().removeClass("selected"); ("img").attr("src", _this.attr("href")); } switchPhoto(index); ("click", "a", function() { index = (this); switchPhoto(index); return false; }); function switchPrev() { index--; if (index < 0) { index = len; } switchPhoto(index); } function switchNext() { index++; if (index > len) { index = 0; } switchPhoto(index); } ("click", function() { switchPrev(); }); ("click", function() { switchNext(); }); ("click", "img", function() { switchNext(); }); function closeOverlay() { (); ("overflow-y", "auto"); } ("click", function() { closeOverlay(); }); return false; }); } });})(jQuery);</script><script>$(function() { $('.img a').gallery();});</script></body></html>
- 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
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 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
