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裡面如何做到基本的SQL injection防禦?

在PHP裡面如何做到基本的S...

資訊安全一直是很頭痛的問題....我一直以來也在尋找最好的方式... 但在尋找的過程中...至少也得...

CentOS 5.2 使用 YUM 將 PHP 5.1.6 更新到 5.2.6

CentOS 5.2 使用 ...

CentOS 5. 版內建的 PHP 版本為 5..,甚至於 5. 版仍舊是 5.. 版本。 基於系...

如何用javascript接收radio button被選取後的值

如何用javascript接...

剛剛竟然犯了最簡單的錯誤~ 而且還是在趕著時間的時候⊙⊙ 我竟然蠢到用接收input 的方式去接收 ...

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