Dear all,
I have searched the forum and have not found anything even close related to what I would like to have on my gallery.
The idea is to have a button under every image of the gallery so that the users can crop the image (and save the suggestion in comments) using something like this (look under the image) _http://www.samara-photo.ru/photo/id.35456.html
EDIT
OK... I have done it. Posting the MOD here (Admins, please move it once confirmed as functional with other users. I have this MOD running on version 1.7.7 with many mods implemented on the same site.
Demo here
http://www.fotodvor.com/details.php?image_id=801Notes to consider before installation:
1. This MOD uses <div> to show your images... so you should control your images or table width in the template accordingly (I use default_full theme and it works great for me).
2. There probably are many improvements to this MOD, so guys with the better knowledge of PHP please suggest improvements and corrections (espesially to the issue with {template_url} not showing properly in functions.php (you'll see later on...
3. I have looked at the code from the site mentioned above, so part of the Javascript is probably theirs, part is in the open under the GPL licence.
4. I could not get the Black and White filter to work... maybe someone has a solution to this. Or maybe it's just my browser...
So, let's begin...
[MOD] Image crop suggestions by users incerted into comments
Step 1.
In details.php find:
"prepend_head_title" => $image_name . " - "
));
and REPLACE with:
"prepend_head_title" => $image_name . " - ",
"image_address" => "./".MEDIA_DIR."/".$cat_id."/".$image_row['image_media_file']
));
Step 2.
In header.html find:
{if has_rss}
and add BEFORE:
<script type="text/javascript" src="{template_url}/js/imageCropper.js"></script>
<script type="text/javascript" src="{template_url}/js/functions.js"></script>
Step 3.
In details.html find:
{image}
and REPLACE with:
<div class="center" id="ipad" style="margin: 0px; padding: 20px; background-color: #aaaaaa">
<div id="holdr" style="position: absolute; left: 20px; top: 190px;"><a name="image"></a>
<img style="height: {height}px; width: {width}px;" src="{image_address}" id="im" onDblClick="maxArea(event);"></div>
<br/>
<!-- PhotoTools Pad -->
<style type="text/css">
img {
border: 0;
}
table.instruments {
background: #fff;
}
table.instruments td {
padding: 3px 6px; background: #e3e3e3; color: #2d2d2d; font: bold 11px Tahoma;
}
span.gradient {
padding: 3px 1px 3px 4px; cursor: pointer;
}
</style>
<center id="panel">
<table cellpadding="0" cellspacing="1" class="instruments">
<tr>
<td>Background:</td>
<td>
<span onClick="setBG(this);" class="gradient" style="background-color:#000000;">
</span><span onClick="setBG(this);" class="gradient" style="background-color:#111111;">
</span><span onClick="setBG(this);" class="gradient" style="background-color:#222222;">
</span><span onClick="setBG(this);" class="gradient" style="background-color:#333333;">
</span><span onClick="setBG(this);" class="gradient" style="background-color:#444444;">
</span><span onClick="setBG(this);" class="gradient" style="background-color:#555555;">
</span><span onClick="setBG(this);" class="gradient" style="background-color:#666666;">
</span><span onClick="setBG(this);" class="gradient" style="background-color:#777777;">
</span><span onClick="setBG(this);" class="gradient" style="background-color:#888888;">
</span><span onClick="setBG(this);" class="gradient" style="background-color:#999999;">
</span><span onClick="setBG(this);" class="gradient" style="background-color:#AAAAAA;">
</span><span onClick="setBG(this);" class="gradient" style="background-color:#BBBBBB;">
</span><span onClick="setBG(this);" class="gradient" style="background-color:#CCCCCC;">
</span><span onClick="setBG(this);" class="gradient" style="background-color:#DDDDDD;">
</span><span onClick="setBG(this);" class="gradient" style="background-color:#EEEEEE;">
</span><span onClick="setBG(this);" class="gradient" style="background-color:#FFFFFF;">
</span>
</td>
<td>Image Brightness:</td>
<td>
<span onClick="setBrightness(-10);" class="gradient" style="background-color:#000000;">
</span><span onClick="setBrightness( -9);" class="gradient" style="background-color:#080808;">
</span><span onClick="setBrightness( -8);" class="gradient" style="background-color:#111111;">
</span><span onClick="setBrightness( -7);" class="gradient" style="background-color:#181818;">
</span><span onClick="setBrightness( -6);" class="gradient" style="background-color:#222222;">
</span><span onClick="setBrightness( -5);" class="gradient" style="background-color:#333333;">
</span><span onClick="setBrightness( -4);" class="gradient" style="background-color:#444444;">
</span><span onClick="setBrightness( -3);" class="gradient" style="background-color:#555555;">
</span><span onClick="setBrightness( -2);" class="gradient" style="background-color:#666666;">
</span><span onClick="setBrightness( -1);" class="gradient" style="background-color:#777777;">
</span><span onClick="setBrightness( 0);" class="gradient" style="background-color:#888888;">•
</span><span onClick="setBrightness( 1);" class="gradient" style="background-color:#999999;">
</span><span onClick="setBrightness( 2);" class="gradient" style="background-color:#AAAAAA;">
</span><span onClick="setBrightness( 3);" class="gradient" style="background-color:#BBBBBB;">
</span><span onClick="setBrightness( 4);" class="gradient" style="background-color:#CCCCCC;">
</span><span onClick="setBrightness( 5);" class="gradient" style="background-color:#D4D4D4;">
</span><span onClick="setBrightness( 6);" class="gradient" style="background-color:#DDDDDD;">
</span><span onClick="setBrightness( 7);" class="gradient" style="background-color:#E4E4E4;">
</span><span onClick="setBrightness( 8);" class="gradient" style="background-color:#EEEEEE;">
</span><span onClick="setBrightness( 9);" class="gradient" style="background-color:#F4F4F4;">
</span><span onClick="setBrightness( 10);" class="gradient" style="background-color:#FFFFFF;">
</span>
</td>
<td><a href="javascript:switchCropper();"><img id="b_cr" src="{template_url}/js/icon_crop_off.gif" alt="Crop"></a></td>
<td><a href="javascript:switchBW();"><img id="b_bw" src="{template_url}/js/icon_bw_off.gif" alt="Black and White"></a></td>
<td><a href="javascript:switchGoldS();"><img id="b_gs" src="{template_url}/js/icon_gold_off.gif" alt="Gold Sections"></a></td>
<td><a href="javascript:saveState();"><img id="b_ss" src="{template_url}/js/icon_paste.gif" alt="Incert into comments"></a></td>
</tr>
</table>
</center>
</div>
<form id="fo" name="fo"></form>
<script type="text/javascript" language="javascript">
imageCropper.useForm("fo");
imageCropper.addCroper('im','1','1',null,'fff', 'holdr');
imageCropper.hideMe();
var showCropper = false;
imageCropper.maximizeArea();
imas = dom.gI('im');
var isBW = false;
imas.style.filter = "Gray";
var showGoldS = false;
imageCropper.hideGoldS();
if (imas.filters)
{
imas.filters["Gray"].enabled = isBW;
}
var vOff = 0;
if (imas.width == 0)
{
vOff = 40;
}
if (navigator.userAgent.indexOf('Opera') != -1)
{
vOff = -8;
}
dom.gI('panel').style.marginTop = parseInt(imas.style.height) + 3 + vOff + 'px';
centerImage();
</script>
Step 4.
In file functions.php find function format_text and within it find:
$text = str_replace("\\'", "'", $text);
and ADD after:
//crop suggestion mod - template plug {template_url} does not function here for some reason
$crop_code_ = array("/\[CROP\:(.*?)\]/is" => "<a href=\"javascript:loadState($1)\"><img src=\"templates/default_full/js/icon_load.gif\"></a>");
$text = preg_replace(array_keys($crop_code_), array_values($crop_code_), $text);
//crop suggestion mod
in this case I could not find the solution to use {template_url} so I settled with the code above. Make sure you change the name of the path to your template.
Step 5.
Upload the attached file and unzip it into your active template folder
I hope I did not forget anything and I hope that you will like this MOD )))