feature 3138: Add photo zoom when editing a photo

git-svn-id: http://piwigo.org/svn/trunk@29480 68402e56-0260-453c-a942-63ccdbb3a9ee
This commit is contained in:
mistic100 2014-09-11 09:05:00 +00:00
parent f14dcf0f7b
commit 62cdffb50c
4 changed files with 40 additions and 11 deletions

View file

@ -229,6 +229,8 @@ $template->set_filenames(
$admin_url_start = $admin_photo_base_url.'-properties';
$admin_url_start.= isset($_GET['cat_id']) ? '&cat_id='.$_GET['cat_id'] : '';
$src_image = new SrcImage($row);
$template->assign(
array(
'tag_selection' => $tag_selection,
@ -237,7 +239,8 @@ $template->assign(
'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']) ?

View file

@ -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>

View file

@ -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;">

View file

@ -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;
}