如何使用lightbox-0.5在一个页面中添加两个库

Question

如何使用lightbox-0.5在一个页面中添加两个图库  我的代码在the jsfiddle

<div id="thumbnails">
    <ul class="clearfix">

      <li><a  href="http://thumb9.shutterstock.com/display_pic_with_logo/64681/296369042/stock-photo-common-modern-business-skyscrapers-high-rise-buildings-architecture-raising-to-the-sky-sun-296369042.jpg" title="Travancore Opus Highway Apartments" rel="lightbox"><img src="http://thumb9.shutterstock.com/display_pic_with_logo/64681/296369042/stock-photo-common-modern-business-skyscrapers-high-rise-buildings-architecture-raising-to-the-sky-sun-296369042.jpg" alt="turntable"></a></li>
      <li><a href="http://thumb1.shutterstock.com/display_pic_with_logo/64681/296369060/stock-photo-sun-reflecting-in-a-usual-modern-business-skyscraper-high-rise-building-architecture-raising-to-296369060.jpg" title="Travancore Opus Highway Apartments" rel="lightbox"><img src="http://thumb1.shutterstock.com/display_pic_with_logo/64681/296369060/stock-photo-sun-reflecting-in-a-usual-modern-business-skyscraper-high-rise-building-architecture-raising-to-296369060.jpg" alt="turntable"></a></li>
     </ul>
  </div>

请帮助..

Answer 1

您必须为此

编写两个单独的<ul>元素

例如：

    <!-- one set of images -->
<ul class="gallery1">
    <li><a href="image2.jpg" rel="lightbox"><img src="thumb2.jpg"></a></li>     
    <li><a href="image3.jpg" rel="lightbox"><img src="thumb3.jpg"></a></li>     
    <li><a href="image4.jpg" rel="lightbox"><img src="thumb4.jpg"></a></li>     
</ul>
<!-- another set of iamges -->
<ul class="gallery2">
    <li><a href="image2.jpg" rel="lightbox"><img src="thumb2.jpg"></a></li>     
    <li><a href="image3.jpg" rel="lightbox"><img src="thumb3.jpg"></a></li>     
    <li><a href="image4.jpg" rel="lightbox"><img src="thumb4.jpg"></a></li>     
</ul>

编辑：

使用以下javascript。

$(function() {

        $('.gallery1 a[rel*=lightbox]').lightBox();
        $('.gallery2 a[rel*=lightbox]').lightBox();
    });