Results 1 to 5 of 5

Thread: Using the new data-lightbox attribute

  1. #1
    User
    Join Date
    04-10-11.
    Posts
    162

    Default 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

  2. #2
    User
    Join Date
    06-19-09.
    Posts
    328

    Default Re: Using the new data-lightbox attribute

    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
    Consulenza Contao CMS https://www.intco.it

  3. #3
    User
    Join Date
    04-10-11.
    Posts
    162

    Default Re: Using the new data-lightbox attribute

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

  4. #4
    User
    Join Date
    06-19-09.
    Posts
    328

    Default Re: Using the new data-lightbox attribute

    please let me know so I can update the ckeditor extension
    Consulenza Contao CMS https://www.intco.it

  5. #5
    User
    Join Date
    04-10-11.
    Posts
    162

    Default Re: Using the new data-lightbox attribute

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •