Added ImageViewer
authorAlexander Ebert <ebert@woltlab.com>
Mon, 9 Jul 2012 16:58:10 +0000 (18:58 +0200)
committerAlexander Ebert <ebert@woltlab.com>
Mon, 9 Jul 2012 16:58:10 +0000 (18:58 +0200)
Based upon "Slimbox 2" by Christophe Beyls 2007-2010, http://www.digitalia.be/software/slimbox2#get_help, MIT-style license

com.woltlab.wcf/template/imageViewer.tpl [new file with mode: 0644]
wcfsetup/install/files/js/3rdParty/slimbox2.min.js [new file with mode: 0644]
wcfsetup/install/files/js/WCF.ImageViewer.js [new file with mode: 0644]
wcfsetup/install/lang/de.xml

diff --git a/com.woltlab.wcf/template/imageViewer.tpl b/com.woltlab.wcf/template/imageViewer.tpl
new file mode 100644 (file)
index 0000000..8c0e676
--- /dev/null
@@ -0,0 +1,27 @@
+{if !$__imageViewerLoaded|isset}
+       <script type="text/javascript" src="{@$__wcf->getPath()}js/3rdParty/slimbox2.min.js"></script>
+       <script type="text/javascript" src="{@$__wcf->getPath()}js/WCF.ImageViewer.js"></script>
+       <script type="text/javascript">
+               //<![CDATA[
+               $(function() {
+                       WCF.Icon.addObject({
+                               'wcf.icon.arrowLeftColored': '{icon size='M'}arrowLeftColored{/icon}',
+                               'wcf.icon.arrowRightColored': '{icon size='M'}arrowRightColored{/icon}',
+                               'wcf.icon.closeColored': '{icon size='M'}closeColored{/icon}',
+                               'wcf.icon.enlargeColored': '{icon size='M'}enlargeColored{/icon}'
+                       });
+                       WCF.Language.addObject({
+                               'wcf.imageViewer.counter': '{lang}wcf.imageViewer.counter{/lang}',
+                               'wcf.imageViewer.close': '{lang}wcf.imageViewer.close{/lang}',
+                               'wcf.imageViewer.enlarge': '{lang}wcf.imageViewer.enlarge{/lang}',
+                               'wcf.imageViewer.next': '{lang}wcf.imageViewer.next{/lang}',
+                               'wcf.imageViewer.previous': '{lang}wcf.imageViewer.previous{/lang}'
+                       });
+                       
+                       new WCF.ImageViewer();
+               });
+               //]]>
+       </script>
+       
+       {assign var=__imageViewerLoaded value=true}
+{/if}
\ No newline at end of file
diff --git a/wcfsetup/install/files/js/3rdParty/slimbox2.min.js b/wcfsetup/install/files/js/3rdParty/slimbox2.min.js
new file mode 100644 (file)
index 0000000..a3f3cf8
--- /dev/null
@@ -0,0 +1,6 @@
+/*
+       Slimbox v2.04 - The ultimate lightweight Lightbox clone for jQuery
+       (c) 2007-2010 Christophe Beyls <http://www.digitalia.be>
+       MIT-style license.
+*/
+(function(w){var E=w(window),u,f,F=-1,n,x,D,v,y,L,r,m=!window.XMLHttpRequest,s=[],l=document.documentElement,k={},t=new Image(),J=new Image(),H,a,g,p,I,d,G,c,A,K;w(function(){w("body").append(w([H=w('<div id="lbOverlay" />')[0],a=w('<div id="lbCenter" />')[0],G=w('<div id="lbBottomContainer" />')[0]]).css("display","none"));g=w('<div id="lbImage" />').appendTo(a).append(p=w('<div style="position: relative;" />').append([I=w('<a id="lbPrevLink" href="#" />').click(B)[0],d=w('<a id="lbNextLink" href="#" />').click(e)[0]])[0])[0];c=w('<div id="lbBottom" />').appendTo(G).append([w('<a id="lbCloseLink" href="#" />').add(H).click(C)[0],A=w('<div id="lbCaption" />')[0],K=w('<div id="lbNumber" />')[0],w('<div style="clear: both;" />')[0]])[0]});w.slimbox=function(O,N,M){u=w.extend({loop:false,overlayOpacity:0.8,overlayFadeDuration:400,resizeDuration:400,resizeEasing:"swing",initialWidth:250,initialHeight:250,imageFadeDuration:400,captionAnimationDuration:400,counterText:"Image {x} of {y}",closeKeys:[27,88,67],previousKeys:[37,80],nextKeys:[39,78]},M);if(typeof O=="string"){O=[[O,N]];N=0}y=E.scrollTop()+(E.height()/2);L=u.initialWidth;r=u.initialHeight;w(a).css({top:Math.max(0,y-(r/2)),width:L,height:r,marginLeft:-L/2}).show();v=m||(H.currentStyle&&(H.currentStyle.position!="fixed"));if(v){H.style.position="absolute"}w(H).css("opacity",u.overlayOpacity).fadeIn(u.overlayFadeDuration);z();j(1);f=O;u.loop=u.loop&&(f.length>1);return b(N)};w.fn.slimbox=function(M,P,O){P=P||function(Q){return[Q.href,Q.title]};O=O||function(){return true};var N=this;return N.unbind("click").click(function(){var S=this,U=0,T,Q=0,R;T=w.grep(N,function(W,V){return O.call(S,W,V)});for(R=T.length;Q<R;++Q){if(T[Q]==S){U=Q}T[Q]=P(T[Q],Q)}return w.slimbox(T,U,M)})};function z(){var N=E.scrollLeft(),M=E.width();w([a,G]).css("left",N+(M/2));if(v){w(H).css({left:N,top:E.scrollTop(),width:M,height:E.height()})}}function j(M){if(M){w("object").add(m?"select":"embed").each(function(O,P){s[O]=[P,P.style.visibility];P.style.visibility="hidden"})}else{w.each(s,function(O,P){P[0].style.visibility=P[1]});s=[]}var N=M?"bind":"unbind";E[N]("scroll resize",z);w(document)[N]("keydown",o)}function o(O){var N=O.keyCode,M=w.inArray;return(M(N,u.closeKeys)>=0)?C():(M(N,u.nextKeys)>=0)?e():(M(N,u.previousKeys)>=0)?B():false}function B(){return b(x)}function e(){return b(D)}function b(M){if(M>=0){F=M;n=f[F][0];x=(F||(u.loop?f.length:0))-1;D=((F+1)%f.length)||(u.loop?0:-1);q();a.className="lbLoading";k=new Image();k.onload=i;k.src=n}return false}function i(){a.className="";w(g).css({backgroundImage:"url("+n+")",visibility:"hidden",display:""});w(p).width(k.width);w([p,I,d]).height(k.height);w(A).html(f[F][1]||"");w(K).html((((f.length>1)&&u.counterText)||"").replace(/{x}/,F+1).replace(/{y}/,f.length));if(x>=0){t.src=f[x][0]}if(D>=0){J.src=f[D][0]}L=g.offsetWidth;r=g.offsetHeight;var M=Math.max(0,y-(r/2));if(a.offsetHeight!=r){w(a).animate({height:r,top:M},u.resizeDuration,u.resizeEasing)}if(a.offsetWidth!=L){w(a).animate({width:L,marginLeft:-L/2},u.resizeDuration,u.resizeEasing)}w(a).queue(function(){w(G).css({width:L,top:M+r,marginLeft:-L/2,visibility:"hidden",display:""});w(g).css({display:"none",visibility:"",opacity:""}).fadeIn(u.imageFadeDuration,h)})}function h(){if(x>=0){w(I).show()}if(D>=0){w(d).show()}w(c).css("marginTop",-c.offsetHeight).animate({marginTop:0},u.captionAnimationDuration);G.style.visibility=""}function q(){k.onload=null;k.src=t.src=J.src=n;w([a,g,c]).stop(true);w([I,d,g,G]).hide()}function C(){if(F>=0){q();F=x=D=-1;w(a).hide();w(H).stop().fadeOut(u.overlayFadeDuration,j)}return false}})(jQuery);
\ No newline at end of file
diff --git a/wcfsetup/install/files/js/WCF.ImageViewer.js b/wcfsetup/install/files/js/WCF.ImageViewer.js
new file mode 100644 (file)
index 0000000..c1bc383
--- /dev/null
@@ -0,0 +1,46 @@
+/**
+ * ImageViewer for WCF.
+ * Based upon "Slimbox 2" by Christophe Beyls 2007-20120, http://www.digitalia.be/software/slimbox2, MIT-style license.
+ * 
+ * 
+ * @author     Alexander Ebert
+ * @copyright  2001-2012 WoltLab GmbH
+ * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ */
+WCF.ImageViewer = Class.extend({
+       /**
+        * Initializes the ImageViewer for every a-tag with the attribute rel = imageviewer.
+        */
+       init: function() {
+               $('a[rel^=imageviewer]').slimbox({
+                       counterText: WCF.Language.get('wcf.imageViewer.counter'),
+                       loop: true
+               });
+               
+               WCF.DOMNodeInsertedHandler.enable();
+               
+               // navigation buttons
+               $('<span><img src="' + WCF.Icon.get('wcf.icon.arrowLeftColored') + '" alt="" class="icon24 jsTooltip" title="' + WCF.Language.get('wcf.imageViewer.previous') + '" /></span>').appendTo($('#lbPrevLink'));
+               $('<span><img src="' + WCF.Icon.get('wcf.icon.arrowRightColored') + '" alt="" class="icon24 jsTooltip" title="' + WCF.Language.get('wcf.imageViewer.next') + '" /></span>').appendTo($('#lbNextLink'));
+               
+               // close and enlarge icons
+               $('<img src="' + WCF.Icon.get('wcf.icon.deleteColored') + '" alt="" class="icon24 jsTooltip" title="' + WCF.Language.get('wcf.imageViewer.close') + '" />').appendTo($('#lbCloseLink'));
+               var $buttonEnlarge = $('<img src="' + WCF.Icon.get('wcf.icon.enlargeColored') + '" alt="" class="icon24 jsTooltip" title="' + WCF.Language.get('wcf.imageViewer.enlarge') + '" id="lbEnlarge" />').insertAfter($('#lbCloseLink'));
+               
+               WCF.DOMNodeInsertedHandler.disable();
+               
+               // handle enlarge button
+               $buttonEnlarge.click($.proxy(this._enlarge, this));
+       },
+       
+       /**
+        * Redirects to image for full view.
+        */
+       _enlarge: function() {
+               var $url = $('#lbImage').css('backgroundImage');
+               if ($url) {
+                       $url = $url.substring(4, $url.length - 1);
+                       window.location = $url;
+               }
+       }
+});
\ No newline at end of file
index 7870b8c6fe9e73a14bba4b57ed06f417d7344edd..1ba5a5a626ea30f5d9a26839b4c19000972e5c1b 100644 (file)
                <item name="wcf.global.sortOrder.descending"><![CDATA[absteigend]]></item>
                <item name="wcf.global.thousandsSeparator"><![CDATA[.]]></item>
        </category>
+       
+       <category name="wcf.imageViewer">
+               <item name="wcf.imageViewer.close"><![CDATA[Schließen]]></item>
+               <item name="wcf.imageViewer.counter"><![CDATA[{literal}Bild {x} von {y}{/literal}]]></item>
+               <item name="wcf.imageViewer.enlarge"><![CDATA[Bild direkt anzeigen]]></item>
+               <item name="wcf.imageViewer.next"><![CDATA[Nächstes Bild]]></item>
+               <item name="wcf.imageViewer.previous"><![CDATA[Vorheriges Bild]]></item>
+       </category>
                
        <category name="wcf.page">
                <item name="wcf.page.pageNo"><![CDATA[Seite {#$pageNo}]]></item>