Loading...

colorbox 使用 onclick href 驅動

Temperature: 0 °C

ChungChung
author_tools
colorbox 一直都是很優秀的Lightbox外掛...

目前的網站中幾乎或多或少都會用到Lightbox功能...

執行的方式也很簡單,以下是以點選圖片放大Lightbox效果做參考:

/*首先載入必要的CSS及js*/
<link rel="stylesheet" href="./js/colorbox/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./js/colorbox/colorbox/jquery.colorbox.js"></script>

再者載入Javascript

$(".group1").colorbox({rel:'group1', transition:"fade"});

一般來說其實只要使用以下方式就可以達到效果

<a href="影像圖位置" class="group1"><img src="影像圖位置"></a>

如果想用onclick href的方式驅動:

<span onclick="$.colorbox({href:'影像圖位置', rel:'group1', transition:'fade'});"><img src="影像圖位置"></span>


已上紀錄
https://innstory.com/story-colorbox_使用_onclick_href_驅動-349

Prev
 新竹一日慢遊

Next
檳城美食系列半生熟雞蛋加上咖椰麵包 

About the Author

Chung

我是chung
網路工作者
主業是網站系統開發建置
副業是做夢,寫故事
作品請參考/teme.biz
做夢請參考/innstory.com
聯絡/chung.teme@gmail.com

#有人用筆寫日記,有人用歲月寫日記,有人用照片寫日記,而我,用innstory寫日記。

Visitor message

Leave some footprints to prove that you visited me

Recommended reading

Author's other related stories

PHP如何將陣列組合接成字串

PHP如何將陣列組合接成字串

$arr = array(&#;hello&#;,&#;word&#;); echo...

ajax防止重複提交

ajax防止重複提交

會發生重提交的原因,大致上是因為考驗人與系統間的耐性~ AJAX(非同步的...

新舊交替,使用phpmyadm出現1064 error in CREATE TABLE … TYPEMYISAM錯誤

新舊交替,使用phpmyadm出現1064 error in CREATE TABLE … TYPE=MYISAM錯誤

sql 系統移機的過程中,最重要的環節....我想...莫過於是系統的環境了....。...

Please select an option

error

Hi, thank you for your participation, but you cannot vote repeatedly~

Join innstory now and start recording your story.

"Innstory" is a place to store stories. We are committed to becoming a warm platform. Deepening the bonds between people is our direction.
We are convinced that the blockchain between people is not just a cold calculation. Join us now.

Wrong format