Why limiting to anchor tags?

[rkyoku]

I apologize if it is a dumb question or anything, but why on Earth writing a hard-coded limit to anchor tags for the plugin? Is it for ARIA (or other) related reasons that I am not aware of?

As the links will not be followed, they do not need to be links, they lose their semantic role as links. Therefore, IMHO, the plugin should work for any element having a data-lightbox attribute.

That's what I did by modifying the unminified file on line 88 from:

$('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {

to (yeah I simplified it to its "purest" form):

$('body').on('click', '[data-lightbox]', function(event) {

If you are worried about HTML5 validation errors for putting an href attribute to a non-anchor tag, then you could simply add an option like hrefAttribute so that people could optionally override it to anything (like data-href or data-large-image or whatever they need).

It would add far more flexibility to your plugin.

What concerns me is that I seem to be the only one asking this after eight years (congrats! :) ), which makes me think I might be asking for something stupid... But, well, in any case I modified my version of the plugin so that I don't have to rewrite/pollute all my HTML code and CSS rules in order to use only anchor tags.

Thank you for your input on this! :)

Best,

[lokesh]

@rkyoku no dumb questions! Thanks for asking.

The main reason to encourage using anchor tags is that it is most appropriate HTML tag for the behavior. If you use a <div>, you lose some of the default behavior and have to reconstruct it manually. For example...

1. You can't right-click or shift-click (on a Mac) to open up the image in a new tab
2. You can't focus the element by tabbing
3. You can't enable Lightbox via a keypress
4. The element doesn't articulate it's role for screenreaders

Hope that makes sense. 🍻