feature 3138: Add photo zoom when editing a photo

git-svn-id: http://piwigo.org/svn/trunk@29480 68402e56-0260-453c-a942-63ccdbb3a9ee
Piwigo · Sep 11, 2014 · 62cdffb · 62cdffb
1 parent f14dcf0
commit 62cdffb
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 11 deletions.
diff --git a/admin/picture_modify.php b/admin/picture_modify.php
@@ -229,6 +229,8 @@
 $admin_url_start = $admin_photo_base_url.'-properties';
 $admin_url_start.= isset($_GET['cat_id']) ? '&amp;cat_id='.$_GET['cat_id'] : '';
 
+$src_image = new SrcImage($row);
+
 $template->assign(
   array(
     'tag_selection' => $tag_selection,
@@ -237,7 +239,8 @@
 
     'PATH'=>$row['path'],
 
-    'TN_SRC' => DerivativeImage::thumb_url($row),
+    'TN_SRC' => DerivativeImage::url(IMG_THUMB, $src_image),
+    'FILE_SRC' => DerivativeImage::url(IMG_LARGE, $src_image),
 
     'NAME' =>
       isset($_POST['name']) ?

diff --git a/admin/themes/default/template/batch_manager_unit.tpl b/admin/themes/default/template/batch_manager_unit.tpl
@@ -55,9 +55,8 @@ jQuery("a.preview-box").colorbox();
   <legend>{$element.LEGEND}</legend>
 
   <span class="thumb">
-    <a href="{$element.FILE_SRC}" class="preview-box" title="{$element.LEGEND|@htmlspecialchars}"><img src="{$element.TN_SRC}" alt=""></a>
-    <br/>
-    <a href="{$element.U_EDIT}">{'Edit'|@translate}</a>
+    <a href="{$element.FILE_SRC}" class="preview-box icon-search" title="{$element.LEGEND|@htmlspecialchars}"><img src="{$element.TN_SRC}" alt=""></a>
+    <a href="{$element.U_EDIT}" class="icon-pencil">{'Edit'|@translate}</a>
   </span>
 
   <table>

diff --git a/admin/themes/default/template/picture_modify.tpl b/admin/themes/default/template/picture_modify.tpl
@@ -1,5 +1,6 @@
 {include file='include/autosize.inc.tpl'}
 {include file='include/datepicker.inc.tpl'}
+{include file='include/colorbox.inc.tpl'}
 
 {combine_script id='LocalStorageCache' load='footer' path='admin/themes/default/js/LocalStorageCache.js'}
 
@@ -35,6 +36,9 @@ jQuery(function(){ {* <!-- onLoad needed to wait localization loads --> *}
     cancelButton: '{'Cancel'|translate}'
   });
 });
+
+{* <!-- THUMBNAILS --> *}
+jQuery("a.preview-box").colorbox();
 }());
 {/footer_script}
 
@@ -49,7 +53,7 @@ jQuery(function(){ {* <!-- onLoad needed to wait localization loads --> *}
 
       <tr>
         <td id="albumThumbnail">
-          <img src="{$TN_SRC}" alt="{'Thumbnail'|@translate}" class="Thumbnail">
+          <a href="{$FILE_SRC}" class="preview-box icon-search" title="{$TITLE|htmlspecialchars}"><img src="{$TN_SRC}" alt="{'Thumbnail'|translate}"></a>
         </td>
         <td id="albumLinks" style="width:400px;vertical-align:top;">
           <ul style="padding-left:15px;margin:0;">

diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
@@ -225,12 +225,6 @@ FIELDSET.elementEdit .thumb {
 	display: block;
 	float: right;
 	text-align: center;
-	opacity: 0.6;
-	-webkit-transition:opacity 400ms ease;
-	transition:opacity 400ms ease;
-}
-FIELDSET.elementEdit .thumb:hover {
-	opacity:1;
 }
 
 TABLE.doubleSelect {
@@ -1220,3 +1214,32 @@ a.group_perm {
 .userProperty {width:340px;float:left;margin-bottom:15px;}
 .userActions {float:right;text-align:right;}
 
+.preview-box.icon-search {
+  display:block;
+  position:relative;
+}
+.preview-box.icon-search:before {
+  opacity:0;
+  position:absolute;
+  margin:-22px 0 0 -22px;
+  top:50%;
+  left:50%;
+  font-size:50px;
+  line-height:50px;
+  color:white;
+  z-index:100;
+  text-shadow:0 0 20px rgba(0,0,0,0.4);
+  -webkit-transition:opacity 200ms ease;
+  transition:opacity 200ms ease;
+}
+.preview-box.icon-search:hover:before {
+  opacity:0.9;
+}
+.preview-box.icon-search img {
+  opacity:1;
+  -webkit-transition:opacity 200ms ease;
+  transition:opacity 200ms ease;
+}
+.preview-box.icon-search:hover img {
+  opacity:0.5;
+}