Bildervorschau: maximale Bildgrösse bestimmen
Chris
- javascript
0 Jones
Hallo
Ich möchte auf meiner Homepage eine Bildervorschau (d.h. eine Art Tumbnails) anbieten. Dafür möchte ich eine maximal Grösse (Breite & Höhe) definieren, die die Bilder in der Vorschau aufweisen dürfen. Falls die Bilder kleiner sind sollen diese in der Originalgrösse angezeigt werden. Kann mir jemand verraten wie ich das am besten anstelle?
Gruss Chris
Sers,
hier ich hab mal etwas zusammengestellt:
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<script language="javascript">
var maxSize=50;
img=new Image();
var bilder = new Array(
"1.gif",
"2.gif",
"3.gif"
);
function showThumbs(){
var str="";
for(var i=0;i<bilder.length;i++){
img.src=bilder[i];
var tobig=(img.width > maxSize || img.height > maxSize)?true:false;
var width=(tobig)?maxSize:img.height;
var height=(tobig)?maxSize:img.height;
str+='<img src="'+img.src+'" width="'+width+'" height="'+height+'">';
}
alert(str);
document.open();
document.write(str);
document.close();
}
</script>
</head>
<body>
<script language="JavaScript">
<!--
showThumbs();
//-->
</script>
</body>
</html>
Jones
----+
Aloha!
function showThumbs(){
var str="";
for(var i=0;i<bilder.length;i++){
img.src=bilder[i];
var tobig=(img.width > maxSize || img.height > maxSize)?true:false;
Dürfte nicht funktionieren, denn das Bild ist so schnell noch nicht geladen. Und das Warten aufs Laden dürfte unterschiedlich lange dauern.
Die beste Idee ist, einfach kleine Versionen der Bilder per Hand oder Programm anzulegen und dabei manuell zu entscheiden, ob Bilder zu klein für die Verkleinerung sind. Und dann alles in eine HTML-Seite einbinden. Hat den Vorteil, dass Ladezeit gespart wird (verkleinerte Bilder sind kleiner als die Originale) und dass die Thumbnails besser aussehen (die Programme können Bilder einfach besser verkleinern, als es Browser können).
- Sven Rautenberg