jquery magnify图片放大查看器插件



166 660 221



特效描述: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>



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


热门标签: 滚动切换 滑动选项卡切换 拖动 弹出层拖动 选项卡切换 滑动手风琴 窗口提示框 放大缩小 切换按钮 缩放切换 表单 图片拖动 图片放大镜 图片切换 lightbox 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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