From 15db3aa08da3cef2039ee903c44008c1af269f81 Mon Sep 17 00:00:00 2001
From: Daniel <Daniel@Daniel-PC.speedport.ip>
Date: Wed, 23 Apr 2014 17:29:40 +0200
Subject: [PATCH] responsive lightbox for quest images

---
 views/html/html.tpl         | 7 +++++++
 views/html/quests/quest.tpl | 4 ++--
 www/css/desktop.css         | 5 +++++
 www/js/imagelightbox.min.js | 6 ++++++
 4 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 www/js/imagelightbox.min.js

diff --git a/views/html/html.tpl b/views/html/html.tpl
index a62f4e11..f60d4d71 100644
--- a/views/html/html.tpl
+++ b/views/html/html.tpl
@@ -16,6 +16,13 @@
 		$("#qtextbox").niceScroll({autohidemode:false,cursorcolor:"#c2beb9"});
 	}
 	);
+	</script>
+	<script src="/js/imagelightbox.min.js"></script>
+	<script>
+    $( function()
+    {
+        $( 'a' ).imageLightbox();
+    });
 	</script>
 	<!--[if lt IE 9]>
 	<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
diff --git a/views/html/quests/quest.tpl b/views/html/quests/quest.tpl
index 6e232bab..d748dc6a 100644
--- a/views/html/quests/quest.tpl
+++ b/views/html/quests/quest.tpl
@@ -15,10 +15,10 @@
 		<?php foreach($questtexts as &$questtext) : ?>
 		<p class="qtext cf">
 			<?php if(array_key_exists('media', $questtext)) : ?>
-			<img src="<?=$linker->link(array('media','seminary',$seminary['url'],$questtext['media']['url']))?>" />
+			<a href="<?=$linker->link(array('media','seminary',$seminary['url'],$media['url']))?>"><img src="<?=$linker->link(array('media','seminary',$seminary['url'],$questtext['media']['url']))?>" /></a>
 			<?php elseif(!is_null($media) && !$mediaShown) : ?>
 			<?php $mediaShown = true; ?>
-			<img src="<?=$linker->link(array('media','seminary',$seminary['url'],$media['url']))?>" />
+			<a href="<?=$linker->link(array('media','seminary',$seminary['url'],$media['url']))?>"><img src="<?=$linker->link(array('media','seminary',$seminary['url'],$media['url']))?>" /></a>
 			<?php endif ?>
 			<?=\hhu\z\Utils::t($questtext['text'])?>
 		</p>
diff --git a/www/css/desktop.css b/www/css/desktop.css
index 78d60373..9759b7a7 100644
--- a/www/css/desktop.css
+++ b/www/css/desktop.css
@@ -117,6 +117,8 @@ aside{display:none}
 .qtext{padding-right:15px}
 .qtext img,.grpqimg{float:right;margin-left:15px;max-width:30%;border-radius:3px}
 
+#imagelightbox{cursor:pointer;position:fixed;z-index:10000;-ms-touch-action:none;touch-action:none;-webkit-box-shadow:0 0 3.125em rgba( 0, 0, 0, .75 ); -moz-box-shadow:0 0 3.125em rgba( 0, 0, 0, .75 );box-shadow:0 0 3.125em rgba( 0, 0, 0, .75 )}
+
 .xpinfo{display:none}
 .xpbar{width:60%;float:left;height:10px;position:relative;background:#eee;border-radius:25px;margin:8px 0 16px}
 .xpbar span{display:block;height:100%;border-radius:20px;background:#bcd75e;position:relative;overflow:hidden}
@@ -132,6 +134,7 @@ input[type="submit"][disabled]{text-shadow:1px 2px #d48c4e;background:#f9ac69;bo
 .admin li a{padding:4px 15px;background:#5cb6bd;border-bottom:2px solid #50a0a6;color:#fff;border-radius:3px}
 .admin li a:hover{background:#62c5cd}
 
+
 /** Login & Registration **/
 
 .logreg{width:auto;display:inline-block;padding:15px 20px;background:#eae8e4;border-radius:3px}
@@ -174,6 +177,7 @@ input[type="submit"][disabled]{text-shadow:1px 2px #d48c4e;background:#f9ac69;bo
 .cglist .xp{float:right}
 .cgqlist li{list-style-type:square;margin-left:25px;padding:2px 15px}
 
+
 /** Charactergroup Profile **/
 
 .gbanner img{margin-top:10px;border-radius:3px}
@@ -239,6 +243,7 @@ input[type="submit"][disabled]{text-shadow:1px 2px #d48c4e;background:#f9ac69;bo
 
 
 /** Quest Types **/
+
 .success,.error{margin-top:15px;padding:5px 15px;border:1px solid #4F8A10;background:#DFF2BF;color:#4F8A10;border-radius:3px}
 .error{border:1px solid #850000;background:#ebd3d3;color:#850000}
 .success p,.error p{margin-bottom:5px}
diff --git a/www/js/imagelightbox.min.js b/www/js/imagelightbox.min.js
new file mode 100644
index 00000000..666b2b7f
--- /dev/null
+++ b/www/js/imagelightbox.min.js
@@ -0,0 +1,6 @@
+/*
+	By Osvaldas Valutis, www.osvaldas.info
+	Available for use under the MIT License
+*/
+
+;(function(e,t,n,r){"use strict";var i=function(){var e=n.body||n.documentElement,e=e.style;if(e.WebkitTransition=="")return"-webkit-";if(e.MozTransition=="")return"-moz-";if(e.OTransition=="")return"-o-";if(e.transition=="")return"";return false},s=i()===false?false:true,o=function(e,t,n){var r={},s=i();r[s+"transform"]="translateX("+t+")";r[s+"transition"]=s+"transform "+n+"s linear";e.css(r)},u="ontouchstart"in t,a=t.navigator.pointerEnabled||t.navigator.msPointerEnabled,f=function(e){if(u)return true;if(!a||typeof e==="undefined"||typeof e.pointerType==="undefined")return false;if(typeof e.MSPOINTER_TYPE_MOUSE!=="undefined"){if(e.MSPOINTER_TYPE_MOUSE!=e.pointerType)return true}else if(e.pointerType!="mouse")return true;return false};e.fn.imageLightbox=function(r){var r=e.extend({selector:'id="imagelightbox"',allowedTypes:"png|jpg|jpeg|gif",animationSpeed:250,preloadNext:true,enableKeyboard:true,quitOnEnd:false,quitOnImgClick:false,quitOnDocClick:true,onStart:false,onEnd:false,onLoadStart:false,onLoadEnd:false},r),i=e([]),l=e(),c=e(),h=0,p=0,d=0,v=false,m=function(t){return e(t).prop("tagName").toLowerCase()=="a"&&(new RegExp(".("+r.allowedTypes+")$","i")).test(e(t).attr("href"))},g=function(){if(!c.length)return false;var n=e(t).width()*.8,r=e(t).height()*.9,i=new Image;i.src=c.attr("src");i.onload=function(){h=i.width;p=i.height;if(h>n||p>r){var s=h/p>n/r?h/n:p/r;h/=s;p/=s}c.css({width:h+"px",height:p+"px",top:(e(t).height()-p)/2+"px",left:(e(t).width()-h)/2+"px"})}},y=function(t){if(v)return false;t=typeof t==="undefined"?false:t=="left"?1:-1;if(c.length){if(t!==false&&(i.length<2||r.quitOnEnd===true&&(t===-1&&i.index(l)==0||t===1&&i.index(l)==i.length-1))){w();return false}var n={opacity:0};if(s)o(c,100*t-d+"px",r.animationSpeed/1e3);else n.left=parseInt(c.css("left"))+100*t+"px";c.animate(n,r.animationSpeed,function(){b()});d=0}v=true;if(r.onLoadStart!==false)r.onLoadStart();setTimeout(function(){c=e("<img "+r.selector+" />").attr("src",l.attr("href")).load(function(){c.appendTo("body");g();var n={opacity:1};c.css("opacity",0);if(s){o(c,-100*t+"px",0);setTimeout(function(){o(c,0+"px",r.animationSpeed/1e3)},50)}else{var u=parseInt(c.css("left"));n.left=u+"px";c.css("left",u-100*t+"px")}c.animate(n,r.animationSpeed,function(){v=false;if(r.onLoadEnd!==false)r.onLoadEnd()});if(r.preloadNext){var a=i.eq(i.index(l)+1);if(!a.length)a=i.eq(0);e("<img />").attr("src",a.attr("href")).load()}}).error(function(){if(r.onLoadEnd!==false)r.onLoadEnd()});var n=0,u=0,p=0;c.on(a?"pointerup MSPointerUp":"click",function(e){e.preventDefault();if(r.quitOnImgClick){w();return false}if(f(e.originalEvent))return true;var t=(e.pageX||e.originalEvent.pageX)-e.target.offsetLeft;l=i.eq(i.index(l)-(h/2>t?1:-1));if(!l.length)l=i.eq(h/2>t?i.length:0);y(h/2>t?"left":"right")}).on("touchstart pointerdown MSPointerDown",function(e){if(!f(e.originalEvent)||r.quitOnImgClick)return true;if(s)p=parseInt(c.css("left"));n=e.originalEvent.pageX||e.originalEvent.touches[0].pageX}).on("touchmove pointermove MSPointerMove",function(e){if(!f(e.originalEvent)||r.quitOnImgClick)return true;e.preventDefault();u=e.originalEvent.pageX||e.originalEvent.touches[0].pageX;d=n-u;if(s)o(c,-d+"px",0);else c.css("left",p-d+"px")}).on("touchend touchcancel pointerup pointercancel MSPointerUp MSPointerCancel",function(e){if(!f(e.originalEvent)||r.quitOnImgClick)return true;if(Math.abs(d)>50){l=i.eq(i.index(l)-(d<0?1:-1));if(!l.length)l=i.eq(d<0?i.length:0);y(d>0?"right":"left")}else{if(s)o(c,0+"px",r.animationSpeed/1e3);else c.animate({left:p+"px"},r.animationSpeed/2)}})},r.animationSpeed+100)},b=function(){if(!c.length)return false;c.remove();c=e()},w=function(){if(!c.length)return false;c.animate({opacity:0},r.animationSpeed,function(){b();v=false;if(r.onEnd!==false)r.onEnd()})};e(t).on("resize",g);if(r.quitOnDocClick){e(n).on(u?"touchend":"click",function(t){if(c.length&&!e(t.target).is(c))w()})}if(r.enableKeyboard){e(n).on("keyup",function(e){if(!c.length)return true;e.preventDefault();if(e.keyCode==27)w();if(e.keyCode==37||e.keyCode==39){l=i.eq(i.index(l)-(e.keyCode==37?1:-1));if(!l.length)l=i.eq(e.keyCode==37?i.length:0);y(e.keyCode==37?"left":"right")}})}e(n).on("click",this.selector,function(t){if(!m(this))return true;t.preventDefault();if(v)return false;v=false;if(r.onStart!==false)r.onStart();l=e(this);y()});this.each(function(){if(!m(this))return true;i=i.add(e(this))});this.switchImageLightbox=function(e){var t=i.eq(e);if(t.length){var n=i.index(l);l=t;y(e<n?"left":"right")}return this};this.quitImageLightbox=function(){w();return this};return this}})(jQuery,window,document);
\ No newline at end of file