JS外掛開發之LightBox圖片畫廊

阿新 • • 發佈：2019-01-10

工程目錄結構圖：
這裡寫圖片描述
lightBox.js封裝了寫好的外掛，直接匯入即可，這裡就不在詳細解釋程式碼了，主要介紹一下怎麼運用該外掛，下載地址：http://download.csdn.net/detail/u012612399/9373624
如果要相容IE6的話，需要匯入DD_belatedPNG.js。
html程式碼如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="css/public.css" 
 />
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
        <script type="text/javascript" src="js/lightBox.js" ></script>
        <title></title>
        <script>
            $(function 
(){
                var lightbox = new LightBox({
                    speed:200,
                    maxWidth:900,
                    maxHeight:600
                });
            });

        </script>
    </head>
    <body style="height: 1200px;">

        class="js-lightbox" width="100" height="100"表示這個元素要啟用lightbox<br 
>
        data-role="lightbox" 表示這個元素要啟用lightbox<br>
        data-source="img/2-1.jpg"原圖的地址<br>
        data-group="group-2"標識當前是否屬於一個組別<br>
        data-id="gvfdg"圖片的唯一標識<br>
        data-caption="rew"當前圖片的描述文字<br>

    <h1>1組圖片</h1>   
    <div>
        <img class="js-lightbox" width="100" height="100"
                data-role="lightbox" 
                data-source="img/1-1.jpg"
                src="img/1-1.jpg"
                data-group="group-1"
                data-id="hfuisdhf"
                data-caption="hfiugyuhfa"
                />
        <img class="js-lightbox" width="100" height="100" data-role="lightbox" data-source="img/1-2.jpg" src="img/1-2.jpg" data-group="group-1" data-id="vbdhfg" data-caption="hfiugyuhfa"/>
        <img class="js-lightbox" width="100" height="100" data-role="lightbox" data-source="img/1-3.jpg" src="img/1-3.jpg" data-group="group-1" data-id="jrtfgh" data-caption="hfiugyuhfa"/>

    </div>
    <h1>2組圖片</h1>   
    <div>
        <img class="js-lightbox" width="100" height="100"
                data-role="lightbox" 
                data-source="img/2-1.jpg"
                src="img/2-1.jpg"
                data-group="group-2"
                data-id="vsasde"
                data-caption="htfger"
                />

    </div>


        <!--遮層-->
        <!--<div id="G-lightbox-mask"></div>-->
        <!--彈出層-->
        <!--<div id="G-lightbox-popup">
            <div class="lightbox-pic-view">
                <span class="lightbox-btn lightbox-prev-btn lightbox-prev-btn-show"></span>
                <img class="lightbox-imgage" src="img/2-2.jpg" width="100%"/>
                <span class="lightbox-btn lightbox-next-btn lightbox-next-btn-show"></span>
            </div>
            <div class="lightbox-pic-caption">
                <div class="lightbox-caption-area">
                    <p class="lightbox-pic-desc">圖片標題</p>
                    <span class="lightbox-of-index">當前索引：1 of 4</span>
                </div>
                <span class="lightbox-close-btn"></span>
            </div>
        </div>-->
    </body>
<!--[if IE 6]> 
<script type="text/javascript" src="js/DD_belatedPNG.js" ></script>
<script type="text/javascript">
DD_belatedPNG.fix("#G-lightbox-mask,#G-lightbox-popup .lightbox-pic-view .lightbox-btn,#G-lightbox-popup .lightbox-pic-caption");
</script> 
<![endif]--> 

</html>

JS外掛開發之LightBox圖片畫廊

工程目錄結構圖： lightBox.js封裝了寫好的外掛，直接匯入即可，這裡就不在詳細解釋程式碼了，主要介紹一下怎麼運用該外掛，下載地址：http://download.csdn.net/detail/u012612399/9373624 如果要相容IE

漂亮的LightBox圖片畫廊外掛開發

今天給大家帶來的是LightBox圖片畫廊外掛的實現方法，用jQuery製作出一款簡潔、漂亮的圖片畫廊，下面我們先看一下實現的效果：功能點如下： 1.點選小圖片，彈出對應的大圖片 2.每次點選小圖或者點選切換按鈕切換圖片時，在載入圖片時會有載入動畫效果 3.每張大圖片出

微信公眾號開發之選擇圖片，上傳圖片，下載圖片，顯示圖片

function clickImg(that)｛ wx.chooseImage({ count: 1, needResult: 1, sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓

[Vue CLI 3] 外掛開發之 registerCommand 到底做了什麼

首先，我們看到在 package.json 中有 scripts 的定義： "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint"} 我們

Android開發之實現圖片自動滾動顯示標籤的ViewPager

Android中實現圖片自動滾動的效果非常的常見，我們可以自己動畫去實現功能。但是在Android中提供了一個ViewPager類，實現了滾動效果，在Android的extras目錄下android-support-vx.jar中，x代表版本4,7等等。使用時我

Eclipse外掛開發之jgit下載與更新程式碼

Eclipse外掛開發之jgit下載與更新程式碼 &nb

Eclipse外掛開發之新建嚮導

jquery.fileupload.js外掛使用初探--多圖片上傳預覽

一、前臺程式碼： <!DOCTYPE html> <html> <head> <title>jquery.fileupload.js使用測試</title> <script src="jq

js外掛+UploadFile類實現圖片的批量上傳

檔案上傳無疑是web應用中一個非常常用的功能，下面小編給大家分享一下diyUpload.js+ThinkPHP中的UploadFile類實現圖片的批量上傳。首先，給大家介紹展示一下具體操作頁面： html程式碼如下： <div cl

4.5Bootstrap學習js外掛篇之工具提示

案例受到Jason Frame開發的jQuery.tipsy外掛的啟發，我們才把這個工具提示外掛做的更好，而且此外掛不依賴圖片，只是使用CSS3來實現動畫效果，並使用data屬性儲存標題。將滑鼠懸停到下面的連結上就可以看到工具提示了：程式碼段： <div

jquery.fileupload.js外掛使用初探--單圖片上傳預覽

一、官方外掛下載地址：http://plugins.jquery.com/blueimp-file-upload/ 下載下來後會發現裡面包含了一堆檔案，首先需要弄清楚的是最核心的部分是哪些，根據官方的例子可以知道，一個最簡單的jQuery File Uplo

vue外掛開發之-vue.use()的原始碼分析。

vue是一個漸進式框架，它本身的核心是解決檢視渲染的問題，其它的能力就通過外掛的方式來解決。今天我們來看下vue是如何支援框架的。也就是vue.use這部分的實現。下面我們以vue-router為例來進行說明， import VueRouter from 'vue-router' Vue.use

IntelliJ Idea外掛開發之新增自定義庫(Library)

在一些程式碼工程沒有用ivy,maven這些庫檔案管理工具，jar包要麼和工程檔案放在一起或是存在本地的目錄中然後通過開發工具匯入。還有一種就是庫檔案打包在中介軟體中，開發時需要引入，不方便用ivy,maven進行依賴管理，這時候可能就需要開發一個IntelliJ Idea外

Android開發之網路圖片檢視方法BitmapFactory.decodeStream()學習01

Android實現網路圖片的檢視有好幾種方法，但這本身是一種很耗時的操作，可以通過直接獲取和操作執行緒的方法，自己學習使用了BitmapFactory.decodeStream()在程式碼中自己寫了註釋，大致分為以下幾步： ①設定URL物件和連線 ②設定一下在連線和讀取過

chrome 外掛開發之 ip地址顯示

1. 前言 2. 流程 2.1 編寫manifest.json 主要編寫外掛的一些配置，版本號，名字，用到的圖示，相應的popup.html，跨站請求許可等。 { "manifest_version": 2, "

[js外掛開發教程]實現一個比較完整的開源級選項卡外掛

　　在這篇文章中，我實現了一個基本的選項卡功能：請猛擊後面的連結>> [js外掛開發教程]原生js仿jquery架構擴充套件開發選項卡外掛. 　　還缺少兩個常用的切換(自動切換與透明度漸變)，當然有朋友會說，還有左右，上下等等，這些動畫會放在焦點圖(幻燈片)外掛

iOS開發之根據圖片寬高等比例壓縮圖片

+(CGSize)compressionSizeWithImageWidth:(NSString *)width height:(NSString *)height { CGSize sou

4.3Bootstrap學習js外掛篇之標籤頁

簡單的標籤頁程式碼： <h1 class="page-header">4.3標籤頁</h1> <ul class="nav nav-tabs"> <li class="active"><a href="#"&g

iOS開發之多圖片無縫滾動元件封裝與使用

正兒八經的圖片滾動的Demo我這兒還真沒有，今天呢就封裝一個可以在專案中直接使用的圖片輪播。沒看過其他iOS圖片無限輪播的程式碼，也不瞭解他們的原理，我今天封裝這個圖片無限輪播是借鑑Web前端中的做法，因為之前寫Web前端的時候，實現幻燈片就是這麼做的，今天就在iPhon

Chrome外掛開發之manifest.json

最近做“一鍵儲存網頁為PDF”過程中，對Chrome外掛的開發也有些心得，在這裡分享給大家。在這裡我將我用我外掛作為例子給大家講解，雖然我這篇文章是講manifest.json檔案，不過在這過程中會同時介紹一些相關的東西。整個Chrome外掛開發最核心的就是manifest.js

JS外掛開發之LightBox圖片畫廊

相關推薦