jquery灯箱问题

时间:2011-11-27 23:30:44

标签: jquery lightbox

我第一次在jquery中涉猎,我们需要做一个简单的照片效果。

问题是,我做了教程所说的一切,但没有灯箱效果。

这是我的html doc的头部(没有head标签):

  <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链接到(比尔图像 - 全尺寸)和一个链接,这是在我的CSS中缩小尺寸的照片。

Aaarrgh。

1 个答案:

答案 0 :(得分:0)

假设你没有在某个地方缩小CSS中的缩略图版本,你的img src和hrefs指向相同的图像。灯箱不会增加图像的大小,只是显示它。如果您喜欢使用相同的图像名称(我这样做),请将较小的图像放在与较大图像不同的文件夹中。

示例:

`<a href="images/large/Bill.jpg" class="lightbox"><img src = "images/thumbs/Bill.jpg" rel="lightbox" alt="Lead Singer" title="Band member 1" /></a>`