jquery magnify图片放大查看器插件



127 505 169



特效描述:jquery magnify 图片放大查看器插件,jquery.magnify.js是一款模拟 Windows 图片查看器软件,图片放大查看插件。Magnify 实现了 Windows 照片查看器的几乎所有功能,比如模态窗口的拖动、调整大小、最大化,图片的缩放、平移,键盘控制等图片放大查看代码。

代码结构

1. 引入CSS

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="docs/css/jquery.magnify.css" rel="stylesheet">
<link href="docs/css/snack.css" rel="stylesheet">
<link href="docs/css/snack-helper.css" rel="stylesheet">
<link href="docs/css/docs.css" rel="stylesheet">

2. 引入JS

<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/prettify.min.js"></script>
<script src="docs/js/jquery.magnify.js"></script>

3. HTML代码

    <div class="container">
        <div class="p-20 bg-inverted text-white text-center m-l--15 m-r--15">
            <h1 class="m-t-15 m-b-10">Magnify</h1>
            <p>Magnify is a jQuery plugin to view images just like in Windows.</p>
        </div>
        <h2 class="b-b-1 p-b-10 p-t-10 m-t-30" id="examples">Examples</h2>
        <p>All the pictures come from Flickr website, copyright to the original author.</p>
        <div class="image-set">
            <a data-magnify="gallery" data-src="" data-caption="Slipping Away by Jerry Fryer" data-group="a" href="img/31812080833_297acfbbd9_z.jpg">
                <img src="img/x1.jpg" alt="">
            </a>
            <a data-magnify="gallery" data-src="" data-caption="Mi Fuego by albert dros" data-group="a" href="img/33589584740_b0fbdcd4aa_z.jpg">
                <img src="img/x2.jpg" alt="">
            </a>
            <a data-magnify="gallery" data-src="" data-caption="Winter Fairytale by Achim Thomae" data-group="a" href="img/31340603494_fb7228020d_z.jpg">
                <img src="img/x3.jpg" alt="">
            </a>
        </div>
        <h2 class="b-b-1 p-b-10 p-t-10 m-t-30" id="usage">Usage</h2>
        <p>The usage of magnify is very simple.</p>
        <h4>1.Include files</h4>
        <pre class="prettyprint">
&lt;link href=&quot;/path/to/magnify.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;script src=&quot;/path/to/jquery.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;/path/to/jquery.magnify.js&quot;&gt;&lt;/script&gt;
</pre>
        <p>The icons in magnify use font-awesome default, you can customize them in options. If you use default options, you should link font-awesome css.</p>
        <pre class="prettyprint">
&lt;link href=&quot;https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css&quot; rel=&quot;stylesheet&quot;&gt;
</pre>
        <h4>2.Html structure</h4>
        <p>The default structure as below:</p>
        <pre class="prettyprint">
&lt;a data-magnify=&quot;gallery&quot; href=&quot;big-1.jpg&quot;&gt;
  &lt;img src=&quot;small-1.jpg&quot;&gt;
&lt;/a&gt;
&lt;a data-magnify=&quot;gallery&quot; href=&quot;big-2.jpg&quot;&gt;
  &lt;img src=&quot;small-2.jpg&quot;&gt;
&lt;/a&gt;
&lt;a data-magnify=&quot;gallery&quot; href=&quot;big-3.jpg&quot;&gt;
  &lt;img src=&quot;small-3.jpg&quot;&gt;
&lt;/a&gt;
</pre>
        <p>or</p>
        <pre class="prettyprint">
&lt;img data-magnify=&quot;gallery&quot; data-src=&quot;big-1.jpg&quot; src=&quot;small-1.jpg&quot;&gt;
&lt;img data-magnify=&quot;gallery&quot; data-src=&quot;big-2.jpg&quot; src=&quot;small-2.jpg&quot;&gt;
&lt;img data-magnify=&quot;gallery&quot; data-src=&quot;big-3.jpg&quot; src=&quot;small-3.jpg&quot;&gt;
</pre>
        <p>All structures above have optional attributes as below:</p>
        <ul>
            <li>Add a
                <code>data-src</code> attribute to link big image if you do not want to use a <code>&lt;a&gt;</code> tag. If you use it in a <code>&lt;a&gt;</code> tag, it will override the image link in <code>href</code> attribute.</li>
            <li>Add a
                <code>data-caption</code> attribute if you want to show a caption. If you are not using this attribute, it will show the image name in the url when you set the <code>title</code> option <code>true</code>.</li>
            <li>Add a
                <code>data-group</code> attribute if you want to set the images in groups.
            </li>
        </ul>
        <h4>3.Call plugin</h4>
        <p>If you add a <code>data-magnify</code> attribute, you can write none of js.</p>
        <p>Of course, you can use selector to call the plugin as following code:</p>
        <pre class="prettyprint">
$('[data-magnify=gallery]').magnify(options);
</pre>
        <h2 class="b-b-1 p-b-10 p-t-10 m-t-30" id="options">Options</h2>
        <div class="table-overflow">
            <table class="table bordered">
                <thead>
                    <tr>
                        <th class="text-uppercase">Name</th>
                        <th class="text-uppercase">Type</th>
                        <th class="text-uppercase">Default</th>
                        <th class="text-uppercase">Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>draggable</td>
                        <td>boolean</td>
                        <td>
                            <code>true</code>
                        </td>
                        <td>If ture, it allow modal dragging</td>
                    </tr>
                    <tr>
                        <td>resizable</td>
                        <td>boolean</td>
                        <td>
                            <code>true</code>
                        </td>
                        <td>If ture, it allow modal resizing.</td>
                    </tr>
                    <tr>
                        <td>movable</td>
                        <td>boolean</td>
                        <td>
                            <code>true</code>
                        </td>
                        <td>If ture, it allow image moving.</td>
                    </tr>
                    <tr>
                        <td>keyboard</td>
                        <td>boolean</td>
                        <td>
                            <code>true</code>
                        </td>
                        <td>If ture, it allow keyboard control. It is similar to Windows viewer.
                            <p><code>←</code> prev image</p>
                            <p><code>→</code> next image</p>
                            <p><code>+</code> zoom in image</p>
                            <p><code>-</code> zoom out image</p>
                            <p><code>ctrl + alt + 0</code> image autual size</p>
                            <p><code>ctrl + ,</code> rotate image left</p>
                            <p><code>ctrl + .</code> rotate image right</p>
                        </td>
                    </tr>
                    <tr>
                        <td>title</td>
                        <td>boolean</td>
                        <td>
                            <code>true</code>
                        </td>
                        <td>If ture, it will show image title on header.</td>
                    </tr>
                    <tr>
                        <td>fixedModalSize</td>
                        <td>boolean</td>
                        <td>
                            <code>false</code>
                        </td>
                        <td>Init modal size will expand with image size.</td>
                    </tr>
                    <tr>
                        <td>modalWidth</td>
                        <td>number</td>
                        <td>
                            <code>320</code>
                        </td>
                        <td>Set init modal width. The option is only available when you set <code>fixedModalSize</code> true</td>
                    </tr>
                    <tr>
                        <td>modalHeight</td>
                        <td>number</td>
                        <td>
                            <code>320</code>
                        </td>
                        <td>Set init modal height. The option is only available when you set <code>fixedModalSize</code> true</td>
                    </tr>
                    <tr>
                        <td>gapThreshold</td>
                        <td>number</td>
                        <td>
                            <code>0.02</code>
                        </td>
                        <td>There will have a gap if modal too big to beyond the browser.</td>
                    </tr>
                    <tr>
                        <td>ratioThreshold</td>
                        <td>number</td>
                        <td>
                            <code>0.01</code>
                        </td>
                        <td>Image zoom ratio threshold</td>
                    </tr>
                    <tr>
                        <td>minRatio</td>
                        <td>number</td>
                        <td>
                            <code>0.1</code> (10%)</td>
                        <td>The min ratio to show image.</td>
                    </tr>
                    <tr>
                        <td>maxRatio</td>
                        <td>number</td>
                        <td>
                            <code>16</code> (1600%)</td>
                        <td>The max ratio to show image.</td>
                    </tr>
                    <tr>
                        <td colspan="4">icons: {</td>
                    </tr>
                    <tr>
                        <td class="p-l-30">maximize</td>
                        <td>string</td>
                        <td>
                            <code>fa fa-window-maximize</code>
                        </td>
                        <td>The maximize button class</td>
                    </tr>
                    <tr>
                        <td class="p-l-30">close</td>
                        <td>string</td>
                        <td>
                            <code>fa fa-close</code>
                        </td>
                        <td>The close button class</td>
                    </tr>
                    <tr>
                        <td class="p-l-30">zoomIn</td>
                        <td>string</td>
                        <td>
                            <code>fa fa-search-plus</code>
                        </td>
                        <td>The zoomIn button class</td>
                    </tr>
                    <tr>
                        <td class="p-l-30">zoomOut</td>
                        <td>string</td>
                        <td>
                            <code>fa fa-search-minus</code>
                        </td>
                        <td>The zoomOut button class</td>
                    </tr>
                    <tr>
                        <td class="p-l-30">prev</td>
                        <td>string</td>
                        <td>
                            <code>fa fa-arrow-left</code>
                        </td>
                        <td>The prev button class</td>
                    </tr>
                    <tr>
                        <td class="p-l-30">next</td>
                        <td>string</td>
                        <td>
                            <code>fa fa-arrow-right</code>
                        </td>
                        <td>The next button class</td>
                    </tr>
                    <tr>
                        <td class="p-l-30">fullscreen</td>
                        <td>string</td>
                        <td>
                            <code>fa fa-photo</code>
                        </td>
                        <td>The fullscreen button class</td>
                    </tr>
                    <tr>
                        <td class="p-l-30">actualSize</td>
                        <td>string</td>
                        <td>
                            <code>fa fa-arrows-alt</code>
                        </td>
                        <td>The actualSize button class</td>
                    </tr>
                    <tr>
                        <td class="p-l-30">rotateLeft</td>
                        <td>string</td>
                        <td>
                            <code>fa fa-rotate-left</code>
                        </td>
                        <td>The rotateLeft button class</td>
                    </tr>
                    <tr>
                        <td class="p-l-30">rotateRight</td>
                        <td>string</td>
                        <td>
                            <code>fa fa-rotate-right</code>
                        </td>
                        <td>The rotateRight button class</td>
                    </tr>
                    <tr>
                        <td colspan="4">}</td>
                    </tr>
                    <tr>
                        <td>headToolbar</td>
                        <td>array</td>
                        <td>
                            <code>[ <br>
                            'maximize', <br>
                            'close'<br>
                            ]</code>
                        </td>
                        <td>The buttons display in header toolbar.</td>
                    </tr>
                    <tr>
                        <td>footToolbar</td>
                        <td>array</td>
                        <td>
                            <code>[ <br>
                            'zoomIn', <br>
                            'zoomOut', <br>
                            'prev', <br>
                            'fullscreen', <br>
                            'next', <br>
                            'actualSize', <br>
                            'rotateRight' <br>
                            ]</code>
                        </td>
                        <td>The buttons display in footer toolbar.</td>
                    </tr>
                    <tr>
                        <td>fixedContent</td>
                        <td>boolean</td>
                        <td>
                            <code>true</code>
                        </td>
                        <td>If true, the content will be fixed.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script>
    window.prettyPrint && prettyPrint();
    var magnify = $('[data-magnify=gallery]').magnify({
        draggable: true,
        movable: true,
        resizable: true,
        keyboard: true,
        modalWidth: 320,
        modalHeight: 320,
        ratioThreshold: 0.1,
        gapThreshold: 0.02,
        title: true,
        fixedModalSize: false
    });
    </script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 拖动 拖拽 拖动插件 拖拽插件 弹出层拖动 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 放大缩小 变大变小 放大 缩小 变大 变小 缩放 切换按钮 缩放切换 表单 表单美化 表单插件 表单美化插件 图片拖动 图片拖拽 图片放大镜 图片切换 图片选项卡 图标选项卡 lightbox 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到