Using the new data-lightbox attribute

Is there any documentation on how I can use the data-lightbox attribute when creating lightboxes?

With the old attribute I was able to have mulitple images on a page and group them into their own lightboxes.

For example if I had 10 images I could have 5 in one lightbox and the other 5 in another lightbox. This was achieved by grouping the lightboxes using rel="lightbox[group1]" and rel="lightbox[group2]"

Does anyone know how can I get the same results with the data-lightbox attribute?

Thanks

Did you try to use the same value, changing only the attribute name?

e.g.

Code:

---

rel="lightbox[group1]" and rel="lightbox[group2]"

---

become

Code:

---

data-lightbox="lightbox[group1]" and rel="lightbox[group2]"

---

I did a quick look at the source and I can say that the first syntax refers to *.xhtml templates and the latter to the *.html5 templates

No, I haven't tried this yet but I'll give it a go. Thanks

please let me know so I can update the ckeditor extension ;)

For anyone else who is interested here is the syntax for using the 'data-lightbox' attribute:

Code:

---

<a href="images/my_image.jpg" data-lightbox="width:800px;height:600px;">
    [img]images/my_image.jpg[/img]
</a>

---

That will produce one 'single' light box 800px x 600px wide.

Code:

---

<a href="images/my_image.jpg" data-lightbox="group:group1;width:800px;height:600px;">
    [img]images/my_image.jpg[/img]
</a>

<a href="images/my_image_2.jpg" data-lightbox="group:group1;width:800px;height:600px;">
    [img]images/my_image_2.jpg[/img]
</a>

<a href="images/my_image_3.jpg" data-lightbox="group:group2;width:800px;height:600px;">
    [img]images/my_image_3.jpg[/img]
</a>

<a href="images/my_image_4.jpg" data-lightbox="group:group2;width:800px;height:600px;">
    [img]images/my_image_4.jpg[/img]
</a>

---

That will produce two 800px x 600px lightbox 'groups' that contain two elements each.