javascript - 如何使用 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();
    });