forum.coppermine-gallery.net
No Support => General discussion (no support!) => Topic started by: Rodinou on September 06, 2004, 05:41:41 pm
-
Hi ... Becoming crazy about the problem of cropped image (by Pic editor : pic by pic ... arghhhhhhh !!!) I have found a solution in CSS :)
Since we can play with margin-left / margin-top ..., when it's possible to overflow a div > hidden ... that's the hack ...
If users want to turn on or off to "normal thumb" or "cropped thumb", a simple admin manipulation to "add" css + div in the code would be perfect ...
So ...
The CSS Code
<style type="text/css" media="screen">
<!--
.cropped {
display : block; // div is like a bloc ...
overflow : hidden; // no scroll available if the pic has some text, for example ... no deformation of the div
width : 70px; // width of your cropped div
height : 70px; // height of your cropped div
float : left; // to "simulate" a table with div, float is the best way
padding : 0px; // changing if you want,
margin : 5px; // changing if you want
}
.cropped img {
margin-left : -10px; // play with this to "calculate" the position left of your "middle" of your pic"
margin-top : -5px; // play with this to calculate" the position top of your "middle of your pic"
border : 0px; // if you want border or not : but it's more funny to play with padding of the .cropped instead playing with border img.
}
-->
</style>
So after ... if you take a gallery example ... (my default theme is Hardwired)
<td valign="top" class="thumbnails" width ="25%" align="center">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<div class="cropped"><a href="displayimage.php?album=907&pos=6"><img src="albums/discotheques/chakra/04-09-04_MaiaK_DavidVendetta/tn_20040904-Chakra_007.jpg" class="image" width="100" height="75" border="0" alt="20040904-Chakra_007.jpg" title="Nom du fichier : 20040904-Chakra_007.jpg
Poids du fichier : 48Ko
Dimensions : 640x480
Ajouté le : Sep 05, 2004"></a>
<span class="thumb_title" style="clear : both">Cécile & David Vendetta – vu 72 fois</span></div>
</td>
</tr>
</table>
</td>
Compatible with Mozilla, Firefox, IE and Opera 7.x ...
-
in application ...
this is the "normal" thumb gallery in my coppermine
http://www.sortons.net/photos/thumbnails.php?album=912
The "Cropped" Same gallery with CSS : no GD or ImageMagick !!!
http://www.sortons.net/photos/gal.php