FINAL SOLUTION
I use only the full size pics (original image).I deleted the intermediate pics(no pop up. will show on place).
The image will resize to fit the monitor even if users view your gallery from a small monitor,table or iphone the image will resize and will show full size on click.
This way you can upload very big images and in config set the width to original image to max value.This way coppermine won't crop your images if they are bigger then width set in cofig when you upload them.
1. Open themes/your_theme_name/template.html and add after {JAVASCRIPT}:
<script src="themes/curve/js/resize.js" type="text/javascript"></script>
replace curve with your theme name.
2. Open themes/your_theme_name/theme.php - find theme_html_picture function(if you do not have it in your theme,copy it from themes/sample/theme.php:
replace:
$pic_html = "<img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"\" /><br />" . $LINEBREAK;
with:
$pic_html ="<img src=\"" . $picture_url . "\" {$image_size['geom']} id=\"thepic\" onLoad=\"scaleImg();\" onClick=\"showOnclick()\" border=\"0\" alt=\"\" /><br />" . $LINEBREAK;
3. replace all class=\"image\" from theme_html_picture function with id=\"thepic\"
4.
DOWNLOAD resize.js (I attached it to this post).
Creat a folder named js in your theme folder and upload resize.js.
5.
add to .css file:
#thepic {
cursor: zoom-in;
cursor:-webkit-zoom-in;
border-style:solid;
border-width:1px;
border-color:#000000;
margin:2px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/* pseudo-classes for image links */
a:link #thepic{
border-style:solid;
border-width:1px;
border-color:#000000;
margin:2px;
}
a:visited #thepic{
border-style:solid;
border-width:1px;
border-color:#840084;
margin:2px;
}
a:focus #thepic{
border-style:solid;
border-width:1px;
border-color:#000000;
margin:2px;
}
a:hover #thepic{
border-style:solid;
border-width:1px;
border-color:#0033CC;
margin:2px;
}
a:active #thepic{
border-style:solid;
border-width:1px;
border-color:#000000;
margin:2px;
}
you can change cursor:pointer if you like it more.
IMPORTANT: you can also include the code from resize.js in template.html.
The website loads faster if the code is inline for small js files like resize.js.
To do that:
_open your_theme_name/template.html and add under {JAVASCRIPT}:
<script>
$(document).ready( function() {
PASTE THE RESIZE.JS CODE HERE
});
</script>
_open resize.js with notepad or word pad,copy all the content and paste it the above code.