added a very simplistic lightbox

4 files changed, 64 insertions, 1 deletions

diff --git a/lib/plugins/extension/helper/list.php b/lib/plugins/extension/helper/list.php
index 12db5ea3c..62031a69b 100644
--- a/lib/plugins/extension/helper/list.php
+++ b/lib/plugins/extension/helper/list.php
@@ -181,7 +181,7 @@ class helper_plugin_extension_list extends DokuWiki_Plugin {
      */
     function make_screenshot(helper_plugin_extension_extension $extension) {
         if($extension->getScreenshotURL()) {
-            $img = '<a title="'.hsc($extension->getDisplayName()).'" href="'.hsc($extension->getScreenshotURL()).'" target="_blank">'.
+            $img = '<a title="'.hsc($extension->getDisplayName()).'" href="'.hsc($extension->getScreenshotURL()).'" target="_blank" class="extension_screenshot">'.
                 '<img alt="'.hsc($extension->getDisplayName()).'" width="120" height="70" src="'.hsc($extension->getThumbnailURL()).'" />'.
                 '</a>';
         } elseif($extension->isTemplate()) {
diff --git a/lib/plugins/extension/images/overlay.png b/lib/plugins/extension/images/overlay.png
new file mode 100644
index 000000000..8f92c2fe7
--- /dev/null
+++ b/lib/plugins/extension/images/overlay.png
diff --git a/lib/plugins/extension/script.js b/lib/plugins/extension/script.js
new file mode 100644
index 000000000..f2a6aae50
--- /dev/null
+++ b/lib/plugins/extension/script.js
@@ -0,0 +1,34 @@
+jQuery(function(){
+
+
+    /**
+     * very simple lightbox
+     * @link http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/super-simple-lightbox-with-css-and-jquery/
+     */
+    jQuery('a.extension_screenshot').click(function(e) {
+        e.preventDefault();
+
+        //Get clicked link href
+        var image_href = jQuery(this).attr("href");
+
+        // create lightbox if needed
+        var $lightbox = jQuery('#plugin__extensionlightbox');
+        if(!$lightbox.length){
+            $lightbox = jQuery('<div id="plugin__extensionlightbox"><p>Click to close</p><div></div></div>')
+                .appendTo(jQuery('body'))
+                .hide()
+                .click(function(){
+                    $lightbox.hide();
+                });
+        }
+
+        // fill and show it
+        $lightbox
+            .show()
+            .find('div').html('<img src="' + image_href + '" />');
+
+
+        return false;
+    });
+
+});
\ No newline at end of file
diff --git a/lib/plugins/extension/style.less b/lib/plugins/extension/style.less
index 40fdb6075..cd9eeaa74 100644
--- a/lib/plugins/extension/style.less
+++ b/lib/plugins/extension/style.less
@@ -7,6 +7,35 @@
  * @author  Anika Henke <anika@selfthinker.org>
  */
 
+/**
+ * very simple lightbox
+ * @link http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/super-simple-lightbox-with-css-and-jquery/
+ */
+#plugin__extensionlightbox {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: url(images/overlay.png) repeat;
+    text-align: center;
+    cursor: pointer;
+
+    p {
+        text-align: right;
+        color: #fff;
+        margin-right: 20px;
+        font-size: 12px;
+    }
+
+    img {
+        box-shadow: 0 0 25px #111;
+        -webkit-box-shadow: 0 0 25px #111;
+        -moz-box-shadow: 0 0 25px #111;
+        max-width: 90%;
+        max-height: 90%;
+    }
+}
 
 /*
  * general layout