Set alt attribute for images (content configurable through the data-lity-desc attribute)

Author: jsor

dist/lity.js

@@ -120,8 +120,9 @@
         return $('<span class="lity-error"/>').append(msg);
     }
 
-    function imageHandler(target) {
-        var img = $('<img src="' + target + '"/>');
+    function imageHandler(target, instance) {
+        var desc = (instance.opener() && instance.opener().data('lity-desc')) || 'Image with no description';
+        var img = $('<img src="' + target + '" alt="' + desc + '"/>');
         var deferred = _deferred();
         var failed = function() {
             deferred.reject(error('Failed loading image'));

dist/lity.min.js

@@ -47,7 +47,7 @@ <h2>Lightweight, accessible and responsive lightbox.</h2>
     <h3>Demos</h3>
 
     <p>
-        <a class="btn" href="https://farm9.staticflickr.com/8642/16455005578_0fdfc6c3da_b.jpg" data-lity>Image</a>
+        <a class="btn" href="https://farm9.staticflickr.com/8642/16455005578_0fdfc6c3da_b.jpg" data-lity data-lity-desc="Photo of a flower">Image</a>
         <a class="btn" href="#inline" data-lity>Inline</a>
         <a class="btn" href="//maps.google.com/maps?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA" data-lity>Google Maps</a>
         <a class="btn" href="//www.youtube.com/watch?v=XSGBVzeBUbk" data-lity>YouTube</a>
@@ -98,7 +98,7 @@ <h4>Declarative</h4>
     <p>Add the <code>data-lity</code> attribute to <code>&lt;a></code> elements for which you want the links to
         be opened in a lightbox:</p>
 
-<pre><code class="language-markup">&lt;a href="https://farm9.staticflickr.com/8642/16455005578_0fdfc6c3da_b.jpg" data-lity>Image&lt;/a>
+<pre><code class="language-markup">&lt;a href="https://farm9.staticflickr.com/8642/16455005578_0fdfc6c3da_b.jpg" data-lity data-lity-desc="Photo of a flower">Image&lt;/a>
 &lt;a href="#inline" data-lity>Inline&lt;/a>
 &lt;a href="//www.youtube.com/watch?v=XSGBVzeBUbk" data-lity>iFrame Youtube&lt;/a>
 &lt;a href="//vimeo.com/1084537" data-lity>iFrame Vimeo&lt;/a>

index.html

@@ -117,8 +117,9 @@
         return $('<span class="lity-error"/>').append(msg);
     }
 
-    function imageHandler(target) {
-        var img = $('<img src="' + target + '"/>');
+    function imageHandler(target, instance) {
+        var desc = (instance.opener() && instance.opener().data('lity-desc')) || 'Image with no description';
+        var img = $('<img src="' + target + '" alt="' + desc + '"/>');
         var deferred = _deferred();
         var failed = function() {
             deferred.reject(error('Failed loading image'));