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自動補零!!

其實這個是基礎中的基礎....但我卻老是不願意記起來他的函式用法..@@ 剛剛..又用到了...啊所...

校外教學(木柵動物園)

校外教學(木柵動物園)

期中考週的校外教學,來到了上回去不成的木柵動物園。 炎熱的天,帶著位小蘿蔔頭,一邊觀察一邊完成老師交...

分享到各社群的方式

分享到各社群的方式

每次在寫網站系統時..客戶總會要求希望他們的網站可以有分享到社群網站的功能... 所以把一些常用的方...

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