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


已上紀錄

作者簡介

JuilinChung

我是chung

網路工作者

主業是網站系統開發建置

副業是做夢,寫故事

作品請參考 / teme.biz

做夢請參考 / innstory.com

聯絡 / chung.teme@gmail.com

訪客留言

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

推薦閱讀

作者其他相關類別故事

瀏覽器升級ie9後FCKEditor無法使用對話框解決方法

瀏覽器升級ie9後FCKEditor無法使用對話框解決方法

原文網址:http://ecshop.tw/bbs/archiver/tid.html...

PDO連接Mysql方式 MVC上應用

PDO連接Mysql方式 MVC上應用

pexelsphoto 將連結資料庫的方式加入model function...

JavaScript的獲取日期代碼不足兩位數補0

JavaScript的獲取日期代碼不足兩位數補0

當我們用javascript得到了一個時間後...針對月份及日期的部分只會顯示數字.....

請選擇選項

執行錯誤

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