search

ashleydw / lightbox

A lightbox gallery plugin for Bootstrap
http://ashleydw.github.io/lightbox
MIT License
1.85k stars 1.31k forks source link

Wrapping ekko-lightbox gallery elements #330

Open sbrbot opened 5 years ago

sbrbot commented 5 years ago

In current version of ekko-lightbox elements have to be groupped using data-gallery attribute. There's no wrapper functionality which would be treated as implicit groupping.

For example one can create ekko gallery by groupping elements on the same DOM level using data-gallery="mygallery" attribute. Also one assigns title (data-title) and footer (data-title) attributes to each particular item inside a gallery like:

<a href="image0.jpg" data-toggle="lightbox" data-gallery="myimages" data-title="Hidden image 0">
    <img src="image0.jpg" class="img-fluid">
</a>
<div data-toggle="lightbox" data-gallery="myimages" data-remote="image1.jpg" data-title="Hidden image 1"></div>
<div data-toggle="lightbox" data-gallery="myimages" data-remote="image2.jpg" data-title="Hidden image 2"></div>

I'd like to have ekko-lightbox feature where one would be able to group gallery elements impliciltly with wrapping DIV. Then ekko-lightbox would take title and footer data attributes from group element and show them to all images inside this group (child elements). Only if title and footer element for particular element exist, ekko-lightbox should show them instead of common title and footer attributes.

For example;

<div class="ekko-group" data-toggle="lightbox" data-title="common group title" data-footer="common group footer">
  <a href="image0.jpg">
      <img src="image0.jpg" class="img-fluid">
  </a>
  <div data-remote="image1.jpg"></div>
  <div data-remote="image2.jpg" data-title="particular image title"></div>
</div>

In this case inner elements of ekko-lightbox group belong to one group and one should not reference them with data-gallery attribute. Also all elements inside a group should use common title and footer attributes. Only if particular group element title and/or footer exists, they should be shown.

So i this last example all inner group elements should have the same title "data-title="Hidden image 1", only last one should have "particular image title".