From 7f1d691a7c35e889d0847826cff7fbe8e174a362 Mon Sep 17 00:00:00 2001 From: mistic100 Date: Wed, 27 Apr 2011 21:53:35 +0000 Subject: feature:2269 add preview box on batch_manager_unit + add colorbox jquery plugin git-svn-id: http://piwigo.org/svn/trunk@10648 68402e56-0260-453c-a942-63ccdbb3a9ee --- admin/batch_manager_unit.php | 1 + .../themes/default/template/batch_manager_unit.tpl | 10 +++++-- .../default/template/include/colorbox.inc.tpl | 2 ++ admin/themes/default/theme.css | 3 +- themes/default/images/colorbox-controls.png | Bin 0 -> 2928 bytes themes/default/images/colorbox-loading.gif | Bin 0 -> 9427 bytes themes/default/js/plugins/jquery.colorbox.css | 32 +++++++++++++++++++++ themes/default/js/plugins/jquery.colorbox.min.js | 4 +++ themes/default/template/include/colorbox.inc.tpl | 2 ++ 9 files changed, 51 insertions(+), 3 deletions(-) create mode 100644 admin/themes/default/template/include/colorbox.inc.tpl create mode 100644 themes/default/images/colorbox-controls.png create mode 100644 themes/default/images/colorbox-loading.gif create mode 100644 themes/default/js/plugins/jquery.colorbox.css create mode 100644 themes/default/js/plugins/jquery.colorbox.min.js create mode 100644 themes/default/template/include/colorbox.inc.tpl diff --git a/admin/batch_manager_unit.php b/admin/batch_manager_unit.php index 5b139a026..aa28b856e 100644 --- a/admin/batch_manager_unit.php +++ b/admin/batch_manager_unit.php @@ -263,6 +263,7 @@ SELECT array( 'ID' => $row['id'], 'TN_SRC' => $src, + 'FILE_SRC' => $row['path'], 'LEGEND' => !empty($row['name']) ? $row['name'] : get_name_from_file($row['file']), 'U_EDIT' => diff --git a/admin/themes/default/template/batch_manager_unit.tpl b/admin/themes/default/template/batch_manager_unit.tpl index e8b50a85c..9a1dde834 100644 --- a/admin/themes/default/template/batch_manager_unit.tpl +++ b/admin/themes/default/template/batch_manager_unit.tpl @@ -1,6 +1,6 @@ - {include file='include/autosize.inc.tpl'} {include file='include/datepicker.inc.tpl'} +{include file='include/colorbox.inc.tpl'} {combine_script id='jquery.fcbkcomplete' load='async' require='jquery' path='themes/default/js/plugins/jquery.fcbkcomplete.js'} {footer_script require='jquery.fcbkcomplete'} @@ -25,6 +25,8 @@ jQuery(document).ready(function() { maxitems: 100, newel: true }); + + $("a.preview-box").colorbox(); }); {/literal}{/footer_script} @@ -50,7 +52,11 @@ jQuery(document).ready(function() {
{$element.LEGEND} - + + +
+ {'Informations'|@translate} + diff --git a/admin/themes/default/template/include/colorbox.inc.tpl b/admin/themes/default/template/include/colorbox.inc.tpl new file mode 100644 index 000000000..c6dc52138 --- /dev/null +++ b/admin/themes/default/template/include/colorbox.inc.tpl @@ -0,0 +1,2 @@ +{combine_script id='jquery.colorbox' require='jquery' path='themes/default/js/plugins/jquery.colorbox.min.js'} +{combine_css path="themes/default/js/plugins/jquery.colorbox.css"} \ No newline at end of file diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css index 49b0870d3..c0dbf09d7 100644 --- a/admin/themes/default/theme.css +++ b/admin/themes/default/theme.css @@ -215,9 +215,10 @@ LI.menuLi { FORM#catModify TABLE { width: auto; } -FIELDSET.elementEdit A { +FIELDSET.elementEdit .thumb { display: block; float: right; + text-align: center; } TABLE.doubleSelect { diff --git a/themes/default/images/colorbox-controls.png b/themes/default/images/colorbox-controls.png new file mode 100644 index 000000000..a01e054da Binary files /dev/null and b/themes/default/images/colorbox-controls.png differ diff --git a/themes/default/images/colorbox-loading.gif b/themes/default/images/colorbox-loading.gif new file mode 100644 index 000000000..b4695d811 Binary files /dev/null and b/themes/default/images/colorbox-loading.gif differ diff --git a/themes/default/js/plugins/jquery.colorbox.css b/themes/default/js/plugins/jquery.colorbox.css new file mode 100644 index 000000000..07e8c40de --- /dev/null +++ b/themes/default/js/plugins/jquery.colorbox.css @@ -0,0 +1,32 @@ +/* ColorBox Core Style */ +#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} +#cboxOverlay{position:fixed; width:100%; height:100%;} +#cboxMiddleLeft, #cboxBottomLeft{clear:left;} +#cboxContent{position:relative;} +#cboxLoadedContent{overflow:auto;} +#cboxTitle{margin:0;} +#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} +#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} +.cboxPhoto{float:left; margin:auto; border:0; display:block;} +.cboxIframe{width:100%; height:100%; display:block; border:0;} + +/* User Style */ +#cboxWrapper{border-radius:10px; -moz-border-radius:10px: -webkit-border-radius:10px; background:#fff;} +#cboxOverlay{background:#000;} +#colorbox{} + #cboxTopLeft, #cboxTopRight, #cboxBottomLeft, #cboxBottomRight{width:11px; height:11px;} + #cboxMiddleLeft, #cboxMiddleRight{width:11px;} + #cboxTopCenter, #cboxBottomCenter{height:11px;} + #cboxContent{background:#fff; overflow:hidden;} + #cboxError{padding:50px; colorbox-border:1px solid #ccc;} + #cboxLoadedContent{margin-bottom:28px;} + #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#666;} + #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;} + #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;} + #cboxPrevious{position:absolute; bottom:0; left:0; background:url(../../images/colorbox-controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;} + #cboxPrevious.hover{background-position:-50px -25px;} + #cboxNext{position:absolute; bottom:0; left:27px; background:url(../../images/colorbox-controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;} + #cboxNext.hover{background-position:-25px -25px;} + #cboxLoadingGraphic{background:url(../../images/colorbox-loading.gif) no-repeat center center;} + #cboxClose{position:absolute; bottom:0; right:0; background:url(../../images/colorbox-controls.png) no-repeat 0 0; width:25px; height:25px; text-indent:-9999px;} + #cboxClose.hover{background-position:0 -25px;} \ No newline at end of file diff --git a/themes/default/js/plugins/jquery.colorbox.min.js b/themes/default/js/plugins/jquery.colorbox.min.js new file mode 100644 index 000000000..b795ee828 --- /dev/null +++ b/themes/default/js/plugins/jquery.colorbox.min.js @@ -0,0 +1,4 @@ +// ColorBox v1.3.16 - a full featured, light-weight, customizable lightbox based on jQuery 1.3+ +// Copyright (c) 2011 Jack Moore - jack@colorpowered.com +// Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php +(function(a,b,c){function ba(b){if(!T){O=b,Z(a.extend(J,a.data(O,e))),x=a(O),P=0,J.rel!=="nofollow"&&(x=a("."+V).filter(function(){var b=a.data(this,e).rel||this.rel;return b===J.rel}),P=x.index(O),P===-1&&(x=x.add(O),P=x.length-1));if(!R){R=S=!0,q.show();if(J.returnFocus)try{O.blur(),a(O).one(k,function(){try{this.focus()}catch(a){}})}catch(c){}p.css({opacity:+J.opacity,cursor:J.overlayClose?"pointer":"auto"}).show(),J.w=X(J.initialWidth,"x"),J.h=X(J.initialHeight,"y"),U.position(0),n&&y.bind("resize."+o+" scroll."+o,function(){p.css({width:y.width(),height:y.height(),top:y.scrollTop(),left:y.scrollLeft()})}).trigger("resize."+o),$(g,J.onOpen),I.add(C).hide(),H.html(J.close).show()}U.load(!0)}}function _(){var a,b=f+"Slideshow_",c="click."+f,d,e,g;J.slideshow&&x[1]&&(d=function(){E.text(J.slideshowStop).unbind(c).bind(i,function(){if(P"),b.open=!0;f.each(function(){a.data(this,e,a.extend({},a.data(this,e)||d,b)),a(this).addClass(V)}),g=b.open,a.isFunction(g)&&(g=g.call(f)),g&&ba(f[0]);return f},U.init=function(){y=a(c),q=W().attr({id:e,"class":m?f+(n?"IE6":"IE"):""}),p=W("Overlay",n?"position:absolute":"").hide(),r=W("Wrapper"),s=W("Content").append(z=W("LoadedContent","width:0; height:0; overflow:hidden"),B=W("LoadingOverlay").add(W("LoadingGraphic")),C=W("Title"),D=W("Current"),F=W("Next"),G=W("Previous"),E=W("Slideshow").bind(g,_),H=W("Close")),r.append(W().append(W("TopLeft"),t=W("TopCenter"),W("TopRight")),W(!1,"clear:left").append(u=W("MiddleLeft"),s,v=W("MiddleRight")),W(!1,"clear:left").append(W("BottomLeft"),w=W("BottomCenter"),W("BottomRight"))).children().children().css({"float":"left"}),A=W(!1,"position:absolute; width:9999px; visibility:hidden; display:none"),a("body").prepend(p,q.append(r,A)),s.children().hover(function(){a(this).addClass("hover")},function(){a(this).removeClass("hover")}).addClass("hover"),K=t.height()+w.height()+s.outerHeight(!0)-s.height(),L=u.width()+v.width()+s.outerWidth(!0)-s.width(),M=z.outerHeight(!0),N=z.outerWidth(!0),q.css({"padding-bottom":K,"padding-right":L}).hide(),F.click(function(){U.next()}),G.click(function(){U.prev()}),H.click(function(){U.close()}),I=F.add(G).add(D).add(E),s.children().removeClass("hover"),a("."+V).live("click",function(a){a.button!==0&&typeof a.button!="undefined"||a.ctrlKey||a.shiftKey||a.altKey||(a.preventDefault(),ba(this))}),p.click(function(){J.overlayClose&&U.close()}),a(b).bind("keydown."+f,function(a){var b=a.keyCode;R&&J.escKey&&b===27&&(a.preventDefault(),U.close()),R&&J.arrowKey&&x[1]&&(b===37?(a.preventDefault(),G.click()):b===39&&(a.preventDefault(),F.click()))})},U.remove=function(){q.add(p).remove(),a("."+V).die("click").removeData(e).removeClass(V)},U.position=function(a,c){function g(a){t[0].style.width=w[0].style.width=s[0].style.width=a.style.width,B[0].style.height=B[1].style.height=s[0].style.height=u[0].style.height=v[0].style.height=a.style.height}var d,e=Math.max(b.documentElement.clientHeight-J.h-M-K,0)/2+y.scrollTop(),f=Math.max(y.width()-J.w-N-L,0)/2+y.scrollLeft();d=q.width()===J.w+N&&q.height()===J.h+M?0:a,r[0].style.width=r[0].style.height="9999px",q.dequeue().animate({width:J.w+N,height:J.h+M,top:e,left:f},{duration:d,complete:function(){g(this),S=!1,r[0].style.width=J.w+N+L+"px",r[0].style.height=J.h+M+K+"px",c&&c()},step:function(){g(this)}})},U.resize=function(a){if(R){a=a||{},a.width&&(J.w=X(a.width,"x")-N-L),a.innerWidth&&(J.w=X(a.innerWidth,"x")),z.css({width:J.w}),a.height&&(J.h=X(a.height,"y")-M-K),a.innerHeight&&(J.h=X(a.innerHeight,"y"));if(!a.innerHeight&&!a.height){var b=z.wrapInner("
").children();J.h=b.height(),b.replaceWith(b.children())}z.css({height:J.h}),U.position(J.transition==="none"?0:J.speed)}},U.prep=function(b){function h(b){U.position(b,function(){var b,d,g,h,j=x.length,k,n;!R||(n=function(){B.hide(),$(i,J.onComplete)},m&&Q&&z.fadeIn(100),C.html(J.title).add(z).show(),j>1?(typeof J.current=="string"&&D.html(J.current.replace(/\{current\}/,P+1).replace(/\{total\}/,j)).show(),F[J.loop||P")[0].src=h),Y(d)&&(a("")[0].src=d))):I.hide(),J.iframe?(k=a("