CODEWITHSUNDEEP
javascriptjquery
ansarmon
ansarmon

Reputation: 47

how to add two galleries in one page using lightbox-0.5

How to add two galleries in one page using lightbox-0.5 my codes are in 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>

Pls help..

Upvotes: 0

Views: 64

Answers (1)

Mad
Mad

Reputation: 548

You have to write a two separate <ul> elements for that

For example :

    <!-- 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>

EDIT :

Use below javascript also .

$(function() {

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

Upvotes: 1

Related Questions