Question

我正在尝试将JQuery插件Lightbox http://leandrovieira.com/projects/jquery/lightbox/安装到我的图片库页面，但是图片点击是在容器和背景下面发送一个div而不是出现在主要区域

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles/styles.css">
  <link rel="stylesheet" href="styles/HTML5CSSReset.css">
  <link rel="stylesheet" type="text/css" href="styles/jquery.lightbox-0.4.css" media="screen" />
  <link rel="shortcut icon" href="images/favicon.ico">
  <title>Circle Bar</title>

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.5.min.js"></script>

</head>

<body>
    <div id="ground">
    <div id="container">
    <div id="header">
    </div>
    <div id="nav">
        <ul>
            <li><a href="index.html">Information</a></li>
            <li><a href="calendar.html">Calendar</a></li>
            <li><a href="imageGallery.html">Images</a></li>
            <li><a href="informationContact.html">Contact & Directions</a></li>
        </ul>
    </div>  
    <div id="gallery" class="sidePage"><br><br><br><br><br>
    <ul>
        <li><a href="images/gallery/1.jpg" title="For this example: $('#gallery a').lightBox();"><img src="images/thumbs/1.jpg"></a></li>
        <li><a href="images/gallery/2.jpg" title="For this example: $('#gallery a').lightBox();"><img src="images/thumbs/2.jpg"></a></li>
        <li><a href="images/gallery/3.jpg" title="For this example: $('#gallery a').lightBox();"><img src="images/thumbs/3.jpg"></a></li>
        <li><a href="images/gallery/4.jpg" title="For this example: $('#gallery a').lightBox();"><img src="images/thumbs/4.jpg"></a></li>
        <li><a href="images/gallery/5.jpg" title="For this example: $('#gallery a').lightBox();"><img src="images/thumbs/5.jpg"></a></li>
        <li><a href="images/gallery/6.jpg" title="For this example: $('#gallery a').lightBox();"><img src="images/thumbs/6.jpg"></a></li>
    </ul>
<script type="text/javascript">
$(function() {
    // Use this example, or...
    $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
    // This, or...
    $('#gallery a').lightBox(); // Select all links in object with gallery ID
    // This, or...
    $('a.lightbox').lightBox(); // Select all links with lightbox class
    // This, or...
    $('a').lightBox(); // Select all links in the page
    // ... The possibility are many. Use your creative or choose one in the examples above
});
</script>
    </div>
    </div>
    </div>
    </div>
</body>
</html>

Answer 1

有这个问题

   <link ref="stylesheet" type="text/css" href="/assets/css/gallery.css" title="default" />

有ref而不是rel

<link rel="stylesheet" type="text/css" href="/assets/css/gallery.css" title="default" />

请务必检查您的css是否正确加载。

Lightbox.js将灯箱推到页面底部

1 个答案: