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函式紀錄

常常忘記,只得紀錄下來...... AddSlashes: 字符串加入斜線。 binhex: 二進位...

行事曆功能導入

行事曆功能導入

cc55 Innstory有行事曆囉! 我試著把Innstory當作是我的筆記本,將生活發生的故事紀...

Welcome To Google

Welcome To Goo...

Top第一天,參訪了Google APAC HQ 第一次來到Google,難掩興奮心情,拼命的拍了一...

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