<samp id="0l9hf"></samp>
<td id="0l9hf"><option id="0l9hf"></option></td>

  • JQUERY插件-響應式Photoviewer.js圖片查看器jQuery插件

    Photoviewer.js是一個基于窗口的照片查看器jQuery插件。插件可以生成一組圖像的預覽,并將圖像放置在可以自由拖動,縮放的窗口中,并且內部的圖像可以縮放、旋轉。

    使用方法

    在頁面中引入photoviewer.css、jquery和photoviewer.js文件。

    <link href="dist/photoviewer.css" rel="stylesheet">
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/photoviewer.js"></script>

    初始化插件

    使用photoviewer非常簡單,通過下面的方法來初始化即可。

    // build images array
    var items = [
    {
    src: 'path/to/image1.jpg', // path to image
    caption: 'Image Caption 1' // If you skip it, there will display the original image name(image1)
    },
    {
    src: 'path/to/image2.jpg',
    caption: 'Image Caption 2'
    }
    ];
    
    // define options (if needed)
    var options = {
    // optionName: 'option value'
    // for example:
    index: 0 // this option means you will start at first image
    };
    
    // Initialize the plugin
    var viewer = new PhotoViewer(items, options);

    最后通過一個按鈕來觸發打開photoviewer即可。
    使用超鏈接創建

    HTML DOM結構如下:

    <a data-gallery="manual" href="big-1.jpg">
    <img src="small-1.jpg">
    </a>
    <a data-gallery="manual" href="big-2.jpg">
    <img src="small-2.jpg">
    </a>
    <a data-gallery="manual" href="big-3.jpg">
    <img src="small-3.jpg">
    </a>

    初始化插件:

    $('[data-gallery=manual]').click(function (e) {
    
    e.preventDefault();
    
    var items = [],
    // get index of element clicked
    options = {
    index: $(this).index()
    };
    
    // looping to create images array
    $('[data-gallery=manual]').each(function () {
    let src = $(this).attr('href');
    items.push({
    src: src
    });
    });
    
    new PhotoViewer(items, options);
    
    });

    作為jQuery插件來使用

    HTML DOM結構如下:

    <a data-gallery="manual" href="big-1.jpg">
    <img src="small-1.jpg">
    </a>
    <a data-gallery="manual" href="big-2.jpg">
    <img src="small-2.jpg">
    </a>
    <a data-gallery="manual" href="big-3.jpg">
    <img src="small-3.jpg">
    </a>

    或者:

    <img data-gallery="jquery" data-src="big-1.jpg" src="small-1.jpg">
    <img data-gallery="jquery" data-src="big-2.jpg" src="small-2.jpg">
    <img data-gallery="jquery" data-src="big-3.jpg" src="small-3.jpg">

    初始化插件:

    $('[data-gallery=jquery]').photoviewer(options);

    創建消息通知

    初始化插件:

    new jBox('Notice', {
    content: 'Hurray! A notice!',
    color: 'blue'
    });

    GitHub地址:https://github.com/nzbin/photoviewer

    在線預覽 網盤下載

    查看如下隱藏內容里的“提取碼”:

    關注公眾號關注公眾號
    關注公眾號,發送消息“查看密碼”,輸入系統回復的“查看密碼”,點擊“確定”按鈕,即可看到“提取碼”。

    鄭重聲明:

    1 本資源來源于互聯網,資源的版權歸資源原作者所持有,受《中華人民共和國著作權法》等相關法律保護。

    2 由于無法和原作者取得聯系,所以上傳的部分資源無法先通過原作者的同意就分享給大家了,如本資源侵犯了您(原作者)的權益,請聯系我們(微信號 wenyan90s),我們會立馬刪除您的資源,并向您表達誠摯的歉意!

    3 本站是一個公益型網站,分享資源的目的在于傳播知識,分享知識,收取一點點打賞的辛苦費是用于網站的日常運營開支,并非用于商業用途。

    4 本站資源只提供學習和參考研究使用,使用過后請在第一時間內刪除。本站不承擔資源被單位或個人商用帶來的法律責任。

    發表評論

    電子郵件地址不會被公開。

    Captcha Code

    国产精品午夜福利在线观看,av色片在线观看,男生看的黄色网站在线,黄片a片视频黄色
    <samp id="0l9hf"></samp>
    <td id="0l9hf"><option id="0l9hf"></option></td>