Tested on B2evo 1.8.
Based on "Photo Zoom" from http://randsco.com/index.php/2005/04/23/photo_zoom_b2evo_how_to
I've done this hack.
This hack add a "Zoom" Button in the FileManager and then add the capability to insert an image with the zoom function in your post.
First, add these lines at the end of your CSS file :
/* beg Kimler Photo-Caption Zoom */
.Zright { float:right; margin:5px 0px 2px 10px; }
.Zleft { float: left; margin:5px 10px 2px 0px; }
.Zoom img { border: 1px solid #369; }
.Zoom.t100 img { width:100px; }
.Zoom.t150 img { width:150px; }
.Zoom.t200 img { width:200px; }
.Zoom.t250 img { width:250px; }
.Zoom.t300 img { width:300px; }
.Zoom.t350 img { width:350px; }
.Zoom.t400 img { width:400px; }
.Zoom t450 img { width:450px; }
.Zoom.t500 img { width:500px; }
.Zoom.t550 img { width:550px; }
.Zoom.t600 img { width:600px; }
.Zoom .caption { display:none; }
.Zoom a { padding:0; }
.Zoom a:hover { padding:0; border:none;
margin:0; } /* IE picky here */
.Zoom a:visited { padding:0px;
text-deocoration:none; }
.w100 a:hover img,.w100 a:hover .caption {width:100px}
.w150 a:hover img,.w150 a:hover .caption {width:150px}
.w200 a:hover img,.w200 a:hover .caption {width:200px}
.w250 a:hover img,.w250 a:hover .caption {width:250px}
.w300 a:hover img,.w300 a:hover .caption {width:300px}
.w350 a:hover img,.w350 a:hover .caption {width:350px}
.w400 a:hover img,.w400 a:hover .caption {width:400px}
.w450 a:hover img,.w450 a:hover .caption {width:450px}
.w500 a:hover img,.w500 a:hover .caption {width:500px}
.w550 a:hover img,.w550 a:hover .caption {width:550px}
.w600 a:hover img,.w600 a:hover .caption {width:600px}
.Zoom a:hover img { margin-bottom:5px;}
.Zoom a:hover .caption {
display:block;
background:#eef;
border:1px solid #339;
font-family:verdana,sans-serif;
text-decoration:none;
text-align:justify;
font-size:10pt;
color:#339; }
.Zoom a:hover .inner {
display:block;
padding:5px 8px; }
/* no IEboxModelHack */
/* end Kimler Photo-Caption Zoom */
in the file "blogs\inc\VIEW\files\_files_browse.inc.php", after :
/**
* Insert IMG tags into parent window for selected files:
*/
function insert_tag_for_selected_files()
{
var elems = document.getElementsByName( 'fm_selected[]' );
var snippet = '';
for( i = 0; i < elems.length; i++ )
{
if( elems[i].checked )
{
id = elems[i].id.substring( elems[i].id.lastIndexOf('_')+1, elems[i].id.length );
img_tag_info_field = document.getElementById( 'img_tag_'+id );
snippet += img_tag_info_field.value + ' ';
}
}
if( ! snippet.length )
{
alert( '<?php echo TS_('You must select at least one file!') ?>' );
return false;
}
else
{
if (! (window.focus && window.opener))
{
return true;
}
window.opener.focus();
textarea_replace_selection( window.opener.document.item_checkchanges.itemform_post_content, snippet, window.opener.document );
return true;
}
}
Add :
/**
* Insert ZOOM tags into parent window for selected files:
*/
function insert_zoom_for_selected_files()
{
var elems = document.getElementsByName( 'fm_selected[]' );
var snippet = '';
for( i = 0; i < elems.length; i++ )
{
if( elems[i].checked )
{
id = elems[i].id.substring( elems[i].id.lastIndexOf('_')+1, elems[i].id.length );
img_zoom_info_field = document.getElementById( 'img_zoom_'+id );
snippet += img_zoom_info_field.value + ' ';
}
}
if( ! snippet.length )
{
alert( '<?php echo TS_('You must select at least one file!') ?>' );
return false;
}
else
{
if (! (window.focus && window.opener))
{
return true;
}
window.opener.focus();
textarea_replace_selection( window.opener.document.item_checkchanges.itemform_post_content, snippet, window.opener.document );
return true;
}
}
Find :
if( $mode == 'upload' )
{ // This mode allows to insert img tags into the post...
// Hidden info used by Javascript:
echo '<input type="hidden" name="img_tag_'.$countFiles.'" id="img_tag_'.$countFiles
.'" value="'.format_to_output( $lFile->get_tag(), 'formvalue' ).'" />';
}
Replace by :
if( $mode == 'upload' )
{ // This mode allows to insert img tags into the post...
// Hidden info used by Javascript:
echo '<input type="hidden" name="img_tag_'.$countFiles.'" id="img_tag_'.$countFiles
.'" value="'.format_to_output( $lFile->get_tag(), 'formvalue' ).'" />';
echo '<input type="hidden" name="img_zoom_'.$countFiles.'" id="img_zoom_'.$countFiles
.'" value="'.format_to_output( $lFile->get_zoom(), 'formvalue' ).'" />';
}
Find :
if( $mode == 'upload' )
{ // We are uploading in a popup opened by an edit screen
?>
<input class="ActionButton"
title="<?php echo T_('Insert IMG tags for selected files'); ?>"
name="actionArray[img_tag]"
value="img"
type="submit"
onclick="insert_tag_for_selected_files(); return false;" />
<?php
}
Replace by :
if( $mode == 'upload' )
{ // We are uploading in a popup opened by an edit screen
?>
<input class="ActionButton"
title="<?php echo T_('Insert IMG tags for selected files'); ?>"
name="actionArray[img_tag]"
value="img"
type="submit"
onclick="insert_tag_for_selected_files(); return false;" />
<?php
?>
<input class="ActionButton"
title="Use Zoom Function"
name="Zoom"
value="Zoom"
type="submit"
onclick="insert_zoom_for_selected_files(); return false;" />
<?php
}
Now, in the File Manager, you will have an extra "Zoom" Button
;)
Hi Totof,
Great work, I was looking for something like this. One question though, does this work with PZ3? I can't seem to get it to work.
Thanks,
Jason