diff options
| -rw-r--r-- | lib/plugins/extension/helper/list.php | 2 | ||||
| -rw-r--r-- | lib/plugins/extension/images/overlay.png | bin | 0 -> 109 bytes | |||
| -rw-r--r-- | lib/plugins/extension/script.js | 34 | ||||
| -rw-r--r-- | lib/plugins/extension/style.less | 29 |
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 Binary files differnew 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 |
