lightGallery version 2 has been released. Please upgrade

# Lightgallery Captions

You can directly pass image caption html via `data-sub-html` attribute or just pass `id` or `class` name of any html object (div) which contain your cation html.

#### Bowness Bay

A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....

#### Sunset Serenity

A gorgeous Sunset tonight captured at Coniston Water....

#### HTML structure

    <div id="caption2" style="display:none">
        <h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>
    </div>
    <div class="caption3" style="display:none">
        <h4>Sunset Serenity</h4><p>A gorgeous Sunset tonight captured at Coniston Water....</p>
    </div>

    <div id="captions">
      <a href="img/img1.jpg" data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>" >
          <img src="img/thumb1.jpg" />
      </a>
      <a href="img/img2.jpg" data-sub-html="#caption2">
          <img src="img/thumb2.jpg" />
      </a>
      <a href="img/img3.jpg" data-sub-html=".caption3">
          <img src="img/thumb3.jpg" />
      </a>
      ...
    </div>

#### Javascript

    $('#captions').lightGallery();

## Caption relative to current element.

- #### Caption1

  Desc1

- #### Caption2

  Desc2

- #### Caption3

  Desc3

- #### Caption4

  Desc4

#### HTML structure

    <div id="relative-caption">
      <a href="img/img1.jpg" data-sub-html=".caption">
          <img src="img/thumb1.jpg" />
          <div class="caption">
            <h4>Caption1</h4><p>Desc1</p>
          </div>
      </a>
      <a href="img/img2.jpg" data-sub-html=".caption">
          <img src="img/thumb2.jpg" />
          <div class="caption">
            <h4>Caption1</h4><p>Desc1</p>
          </div>
      </a>
      ...
    </div>

#### Javascript

    $('#relative-caption').lightGallery({
        subHtmlSelectorRelative: true
    });

## More demos

Thumbnails
Youtube/Vimeo Videos
HTML5 Videos
Transitions
Dynamic
Events
Methods
Iframe
Captions
Responsive
fixed Size
Html Markup
Comment box
Easing
Hash plugin
Share