Skip to content

Instantly share code, notes, and snippets.

@balupton
Created July 18, 2010 10:55
Show Gist options
  • Save balupton/480318 to your computer and use it in GitHub Desktop.
Save balupton/480318 to your computer and use it in GitHub Desktop.
jQuery Lightbox v2 semantics
A combination of both data attribute and CSS classnames:
<a
class="lightbox-image lightbox-image-link"
href="http://www.flickr.com/photos/jonbrown17/2271756525/"
title="View Moody Waters on Flickr"
data-lightbox-image="{title:'Moody Waters',description:'Crawley Boatshed, Perth WA.',author:{text:'jonathanbrown',title:'View jonathanbrowns Profile',url:'http://www.flickr.com/people/jonbrown17/'},large:'http://farm3.static.flickr.com/2411/2271756525_15aba52120_o.jpg',links:[{text:'Other Perth Boatshed Photos',url:'http://www.flickr.com/photos/35776898@N00/galleries/72157624368071194/'}]}"
>
<img class="lightbox-image-thumbnail" src="http://farm3.static.flickr.com/2411/2271756525_ff374888c3_s.jpg" height="75" width="75" />
</a>
Or if you just want to use CSS classnames for maximum semantics:
<a
class="lightbox-image lightbox-image-link"
href="http://www.flickr.com/photos/jonbrown17/2271756525/"
title="View Moody Waters on Flickr"
>
<span class="hide lightbox-image-title">Moody Waters</span>
<span class="hide lightbox-image-description">Crawley Boatshed, Perth WA.</span>
<a class="hide lightbox-image-author" href="http://www.flickr.com/people/jonbrown17/" title="View jonathanbrowns Profile">jonathanbrown</a>
<img class="hide lightbox-image-large" src="http://farm3.static.flickr.com/2411/2271756525_15aba52120_o.jpg" />
<a class="hide lightbox-image-link" href="http://www.flickr.com/photos/35776898@N00/galleries/72157624368071194/">Other Perth Boatshed Photos</a>
<img class="lightbox-image-thumbnail" src="http://farm3.static.flickr.com/2411/2271756525_ff374888c3_s.jpg" height="75" width="75" />
</a>
@balupton
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment