我包括jquery
核心和colorbox
脚本和链接colorbox
样式表太,但当我点击图像,应该是由colorbox显示,我得到一个完全透明的覆盖与一个白色的空白框在中间,而不是点击图像。
我错过了什么吗?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8"/>
<title></title>
<style>
</style>
<link rel="stylesheet" href="colorbox.css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/colorbox/jquery.colorbox-min.js"></script>
<script>
$(function (){
$("img.cover").colorbox({rel: "books"});
});//on doc ready
</script>
</head>
<body>
<img class="cover" src="pic1.jpg" />
</body>
</html>
应该是这样的:
HTML:<a class="cover" href="http://images5.fanpop.com/image/photos/29500000/-Swag-bieber-instagram-puppy-justin-bieber-29500273-500-500.jpg">
<img width="250" src="http://images5.fanpop.com/image/photos/29500000/-Swag-bieber-instagram-puppy-justin-bieber-29500273-500-500.jpg" />
</a>
JS:
$("a.cover").colorbox({rel: "books"});
小提琴:http://jsfiddle.net/matias/6Y7cJ/1/
我还没有将colorbox的images
文件夹放在项目的目录中。所以没有按钮和叠加