ChungChung
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>


已上紀錄

作者簡介

Chung

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

訪客留言

留下一些足跡證明你來拜訪過我

推薦閱讀

作者其他相關類別故事

HTML5 影音手持裝置適應不良篇

HTML5 影音手持裝置適應不良篇

這天下午跟客戶開完會... 客戶針對專案中手持裝置網站適應性做了需調整的說明..另外還...

行事曆功能導入

行事曆功能導入

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

地圖故事

地圖故事

map 一切都從第一張畫布開始... Innstory裡原先已有寫故事的功能,接著我把...

請選擇選項

執行錯誤

Hi,謝謝你的參與,但無法重複投票哦~

現在就加入innstory,開始紀錄你的故事。

「innstory」是一個儲存故事的地方,我們致力於成為一個有溫度的平台,加深人與人之間的羈絆是我們所努力的方向。
我們深信人與人間的區塊鏈不是只是冷冰冰的運算。現在就加入我們。