Fresco-幫你實現Lightbox暗箱效果

0
52

簡要介紹:

Fresco是一款簡單實用的Lightbox效果,基於jquery。但比較可惜的是,現在除了輕量級以外都要收費,輕量級效果最基礎,但還是可以實現暗箱效果,若要功能比較多,那就可能要花點錢了,今天就跟大家分享不用花錢的輕量級Fresco如何使用吧!

DEMO:http://www.frescojs.com/documentation/usage

(有標註pro是需要花錢的,light的範例大概只有前面幾個)

 

 

download  檔案下載

首先,我們先來下載一下套件,點取下面連結最左邊LIGHT(輕量級),下面有個download,給他用力按下去就對了。基本上裡面就都寫好了,可以直接用,詳細部分我文章下面會介紹。

http://www.frescojs.com/download

 

11

 

search  使用方法

在頁面中引入jQuery . fresco.js . fresco.css文件。

<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="/js/fresco/fresco.js"></script>
<link rel="stylesheet" type="text/css" href="/css/fresco/fresco.css"/>

 

 

computer   HTML代碼

在a標籤內加入 class=”fresco”,這class必加哦,不然會沒效果。

然後a標籤裡面可以放<img> or 純文字都可,但基本都放圖片。

data-fresco-caption這屬性,是會讓圖片下面有類似標題效果。

data-fresco-group這屬性,是會讓圖片有連貫效果,可以點擊箭頭左右切換,同個group命名需要一致。

這兩個屬性可加可不加。

<a href="image.jpg" class="fresco" data-fresco-caption="title1" data-fresco-group="example">Show image1</a>
<a href="image.jpg" class="fresco" data-fresco-caption="title2" data-fresco-group="example">Show image2</a>

 

 

settings  啟動JS

這個不需要,因為只要引用JS就等於已經執行了,有在a標籤內加上對應的class和屬性,就可以。

 

 

 

如此一來便能實現LightBox暗箱效果囉!夠簡單吧?

趕快去試看看吧^^~

 

本文章所屬frankbite,未經授權,不得轉載!如需轉載,煩請通知。

如果你喜歡我們的文章,請 Follow 我們的 Facebook 專頁,會分享許多很棒的文章唷!

%e6%9c%aa%e5%91%bd%e5%90%8d-1_03