Update alt and titles for opening

Author: Kura

README.rst

@@ -193,26 +193,28 @@ Basic CSS for Lightbox
 .. code-block:: css
 
     .lightbox {
-    	display: none;
-    	position: fixed;
-    	z-index: 999;
-    	width: 100%;
-    	height: 100%;
-    	text-align: center;
-    	top: 0;
-    	left: 0;
-    	background: rgba(0, 0, 0, 0.8);
+        display: none;
+        position: fixed;
+        z-index: 999;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0,0,0,0.8);
     }
 
     .lightbox img {
-    	max-width: 98%;
-    	max-height: 90%;
-    	margin-top: 2%;
+        max-width: 98%;
+        max-height: 90%;
+        margin-top: 2%;
     }
 
     .lightbox:target {
-    	outline: none;
-    	display: block;
+        outline: none;
+        display: block;
     }
 
     .lightbox-divider {

__init__.py

@@ -83,22 +83,26 @@ def run(self):
             align = 'left'
 
         if alt is not None:
-            alt_html = ' alt="{}"'.format(alt)
-            title_html = ' title="{}"'.format(alt)
+            alt_text = '{} (click to view large image)'.format(alt)
+        else:
+            alt_text = '(click to view large image)'
 
         if caption is not None:
-            caption_block = '<p class="align-{}">{}</p>'.format(align, caption)
+            caption_block = ('''<p class="align-{}">{} (click to view large '''
+                             '''image)</p>''').format(align, caption)
         else:
-            caption_block = ''
-
-        block = ('''<div class="lightbox-block align-{5}">'''
-                 '''<a href="#{0}"{4}>'''
-                 '''<img src="{1}"{3} class="align-{5}" /></a>'''
-                 '''<a href="#_" class="lightbox" id="{0}" title="Click to close">'''
-                 '''<img alt="Click to close" src="{2}" /></a>{6}</div>'''
+            caption_block = ('''<p class="align-{}">(click to view large '''
+                             '''image)</p>''').format(align)
+
+        block = ('''<div class="lightbox-block align-{4}">'''
+                 '''<a href="#{0}" title="{3}">'''
+                 '''<img src="{1}" alt="{3}" class="align-{4}" /></a>'''
+                 '''<a href="#_" class="lightbox" id="{0}" title="Click to '''
+                 '''close">'''
+                 '''<img alt="Click to close" src="{2}" /></a>{5}</div>'''
                  '''<div class="lightbox-divider">'''
-                 '''</div>''').format(uuid, thumb, large, alt_html, title_html,
-                                      align, caption_block)
+                 '''</div>''').format(uuid, thumb, large, alt_text, align,
+                                      caption_block)
         return [nodes.raw('', block, format='html'), ]
 
 

lightbox.css

@@ -7,6 +7,8 @@
 	text-align: center;
 	top: 0;
 	left: 0;
+    right: 0;
+    bottom: 0;
 	background: rgba(0,0,0,0.8);
 }