innstory

colorbox 使用 onclick href 驅動

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>

已上紀錄