我是第一次涉足jquery,我们需要做一个简单的照片效果。
问题是,我做了教程上说的每一件事,但没有灯箱效果。
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" charset="utf-8" />
<script src="jquery.js" type="text/javascript"></script>
<script src="js/assignment.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />
<script type="text/javascript">
$(function() {
$("a.lightbox").lightBox();
}) ;
</script>以下是我的链接:
<aside id="comment">
<h2>The Apes!</h2>
<span>Lead Singer</span><span>Drums</span>
<span>Guitar</span><span>Bass</span>
<a href="images/Bill.jpg" class="lightbox"><img src = "images/Bill.jpg" rel="lightbox" alt="Lead Singer" title="Band member 1" /></a>
<a href="images/Ryan.jpg" class="lightbox"><img src = "images/Ryan.jpg" rel="lightbox" alt="Guitar" title="Band member 2" /></a>
<a href="images/Kerry.jpg" class="lightbox"><img src = "images/Kerry.jpg" rel="lightbox" alt="Drums" title="Band member 3" /></a>
<a href="images/Bob.jpg" class="lightbox"><img src = "images/Bob.jpg" rel="lightbox" alt="Bass" title="Band member 4" /></a>
</aside>我遗漏了什么?据我所知,我给了一个图片的href链接( Bill image - fullsize),以及一个链接,这是在我的css中缩小的同一张照片。
啊哈。
发布于 2012-03-17 02:32:17
假设你没有在CSS中缩小缩略图的大小,你的img src和hrefs指向相同的图片。lightbox不会增加图像的大小,它只是显示图像。如果您喜欢使用相同的图像名称(我确实喜欢),请将较小的图像放在与较大图像不同的文件夹中。
示例:
`<a href="images/large/Bill.jpg" class="lightbox"><img src = "images/thumbs/Bill.jpg" rel="lightbox" alt="Lead Singer" title="Band member 1" /></a>`https://stackoverflow.com/questions/8289967
复制相似问题