Mit Irfanview Web Fotoalbum Erstellen

Nachrichten zum Thema: Multimedia-Software

Seite 1 von 1

Mit Irfanview Web Fotoalbum Erstellen Bilder sollen sich an Seite anpassen

#1 Tille2000

Spezialist

Gruppe: aktive Mitglieder
Beiträge: 488
Beigetreten: 13. Dezember 05
Reputation: 0
Geschlecht:Männlich

geschrieben 08. Februar 2010 - 20:03

Hallo,

wie kann ich es einstellen das die Fotos sich automatisch an die Bildschirmgröße anpassen?

Zur Zeit ist es ja so, das die Bilder in der Größe angezeigt werden, in welcher diese auch sind.

Man kann ja die HTML Dateien anpassen, also habe ich versucht das Bild in eine Tabelle zu setzen. Brachte jedoch keinen Erfolg.

Hat jemand eine Idee wie oder was ich einstellen muss, damit er die Größe automatisch skaliert?

Danke schon mal.

EDIT:

Ok, habe es jetzt soweit das sich die breit anpasst, aber leider noch nicht die Höhe. Ich möchte im endeffekt nur, das man nicht mehr scrollen muss.

Hier mal der Code bis jetzt:

<html>
 <head>
 <title>#TITLE#</title>
 <style>body {font-family:Verdana;}</style>
 </head>
 
 <body bgcolor="#FFFFFF">
 <table width="99%" height="99%" border="0" cellspacing="0" cellpadding="0">
   <tr>
	 <td height="30" width="50"><h4><A HREF="#PREV_LINK#" style="text-decoration:none"> prev </a></h4></td>
	 <td align="center"><h4>#IMAGE_NAME#</h4></td>
	 <td width="50"><h4><A HREF="#NEXT_LINK#" style="text-decoration:none"> next </a></h4></td>
   </tr>
   <tr>
	 <td>&nbsp;</td>
	 <td align="center"><IMG SRC=#IMAGE# width="100%"></td>
	 <td>&nbsp;</td>
   </tr>
   <tr>
	 <td height="30">&nbsp;</td>
	 <td align="center" height="30"><FONT face="Verdana, Arial, Helvetica, Sans-Serif" size="-2">#IMAGE_TEXT#</FONT>
 
 
 <h4><A HREF="#BACK_LINK#" style="text-decoration:none"> Thumbnails </a></h4></td>
	 <td>&nbsp;</td>
   </tr>
 </table>
 </body>
 </html>

Wie schaffe ich es jetzt, das die komplette Tabelle auf der Seite angezeigt wird und man nicht mehr scrollen muss?

Dieser Beitrag wurde von Tille2000 bearbeitet: 08. Februar 2010 - 20:46

FirmaClan

Homepage

Nach oben
Nach oben of the page up there ^

#2 def

Spezialist

Gruppe: aktive Mitglieder
Beiträge: 429
Beigetreten: 19. Dezember 06
Reputation: 7
Geschlecht:Männlich

geschrieben 09. Februar 2010 - 22:59

Ob Irfanview das kann, weiß ich nicht. Aber ich hab jetzt mal eine kleine JavaScript-Lösung versucht:

<html>
<head>
<title>#TITLE#</title>
<style>body {font-family:Verdana;}</style>
<script type="text/javascript">
function rescalePicture()
{
	// Höhe & Breite des Bildes ermitteln
	hImg = document.images[0].height;
	wImg = document.images[0].width;
	// Seitenverhältnis: Der größere Wert geteilt durch den kleineren Wert
	if(hImg > wImg)
		ratio = hImg / wImg;
	else
		ratio = wImg / hImg;

	// Höhe & Breite des Anzeigebereichs
	// Höhe berechnet sich aus Fenstergröße abzüglich
	// der Elemente, die darunter und darüber sind
	// Die Tabellenzellen darüber und darunter sind im HTML-Code fest als je 30 notiert, also zusammen 60.
	// Dazu ca. 40 Pixel (je nach Browser), die was-weiß-ich-woher kommen. Hat sich in Tests so ergeben. ;-) Also 100.
	// Und dann noch plus die <h4>-Überschrift, deren Höhe dynamisch per JavaScript ausgelesen wird.
	// Breite berechnet sich aus Fensterbreite minus den fest im HTML festgehaltenen 50+50 = 100 Pixel.
	h4 = document.getElementById("ueberschrift").offsetHeight;
	h = window.innerHeight - 100 - h4;
	w = window.innerWidth - 100;

	// Mindestbreite, die bei maximaler Höhe für das korrekte Seitenverhältnis erforderlich wäre:
	if(hImg > wImg)
		minw = h / ratio;
	else
		minw = h * ratio;
	// Mindesthöhe, die bei maximaler Breite für das korrekte Seitenverhältnis erforderlich wäre:
	if(hImg < wImg)
		minh = w / ratio;
	else
		minh = w * ratio;

	// Im Folgenden lege ich immer nur einen Wert fest, da der Browser dann das Bild automatisch richtig skaliert:
	if(minw <= w)
		document.images[0].height = h;
	else if(minh <= h)
		document.images[0].width = w;
}
</script>
</head>

<body bgcolor="#FFFFFF" onload="rescalePicture()">
<table width="99%" height="99%" border="0" cellspacing="0" cellpadding="0">
   <tr>
     <td height="30" width="50"><h4><A HREF="#PREV_LINK#" style="text-decoration:none"> prev </a></h4></td>
     <td align="center"><h4>#IMAGE_NAME#</h4></td>
     <td width="50"><h4><A HREF="#NEXT_LINK#" style="text-decoration:none"> next </a></h4></td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td align="center"><IMG ID="bild" SRC="mypicture.jpg"></td>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td height="30">&nbsp;</td>
     <td align="center" height="30"><FONT face="Verdana, Arial, Helvetica, Sans-Serif" size="-2">#IMAGE_TEXT#</FONT>


<h4 id="ueberschrift"><A HREF="#BACK_LINK#" style="text-decoration:none"> Thumbnails </a></h4></td>
     <td>&nbsp;</td>
   </tr>
</table>
</body>
</html>

Musst halt mal testen, ob's funktioniert. Bei meinen eigenen Tests ging es im jeweils aktuellen Opera, Firefox und SRWare Iron (entspricht Google Chrome).
Es kann auch sein, dass es viel bessere und/oder einfachere Lösungen gibt.

Edit: Einige Programmierfehler entfernt, die ich bei Tests mit wechselnden Bildern und Fenstergrößen entdeckt habe. Hoffe, jetzt stimmt alles.

Dieser Beitrag wurde von def bearbeitet: 11. Februar 2010 - 16:51

Nach oben
Nach oben of the page up there ^

#3 Spaceball

Alter Hase

Gruppe: aktive Mitglieder
Beiträge: 347
Beigetreten: 16. September 04
Reputation: 0
Wohnort:Welthauptstadt des Marzipans / Königin der Hanse
Interessen:> Motorradfahren<br />> Fotografie<br />> Geocaching<br />

geschrieben 11. Februar 2010 - 18:30

Eventuell das JavaScript in die Vorlage-HTML von IrfanView mit einsetzen.
Dann sollte IV die "Funktion" in allen neu erstellten Alben bieten.

Space

Spaceball

Lord Helmchen: "Durchkämmt die Wüste!"
und seine Truppen nahmen Riesenkämme und kämmten die Wüste.

Lebe lange und in Frieden

Nach oben
Nach oben of the page up there ^

#4 Tille2000

Spezialist

Gruppe: aktive Mitglieder
Beiträge: 488
Beigetreten: 13. Dezember 05
Reputation: 0
Geschlecht:Männlich

geschrieben 15. Februar 2010 - 13:32

Danke, leider ist ein kleiner Fehler bei

<span class="postcolor"><<span style="color: blue;">td</span> align="<span style="color: orange;">center</span>"><<span style="color: blue;">IMG</span> ID="<span style="color: orange;">bild</span>" SRC="<span style="color: orange;">mypicture.jpg</span>"><<span style="color: blue;">/td</span>></span>

drinnen, aber so geht es jetzt.

Danke nochmals.

<html>
 <head>
 <title>#TITLE#</title>
 <style>body {font-family:Verdana;}</style>
 <script type="text/javascript">
 function rescalePicture()
 {
 // Höhe & Breite des Bildes ermitteln
 hImg = document.images[0].height;
 wImg = document.images[0].width;
 // Seitenverhältnis: Der größere Wert geteilt durch den kleineren Wert
 if(hImg > wImg)
 ratio = hImg / wImg;
 else
 ratio = wImg / hImg;
 
 // Höhe & Breite des Anzeigebereichs
 // Höhe berechnet sich aus Fenstergröße abzüglich
 // der Elemente, die darunter und darüber sind
 // Die Tabellenzellen darüber und darunter sind im HTML-Code fest als je 30 notiert, also zusammen 60.
 // Dazu ca. 40 Pixel (je nach Browser), die was-weiß-ich-woher kommen. Hat sich in Tests so ergeben.;-) Also 100.
 // Und dann noch plus die <h4>-Überschrift, deren Höhe dynamisch per JavaScript ausgelesen wird.
 // Breite berechnet sich aus Fensterbreite minus den fest im HTML festgehaltenen 50+50 = 100 Pixel.
 h4 = document.getElementById("ueberschrift").offsetHeight;
 h = window.innerHeight - 100 - h4;
 w = window.innerWidth - 100;
 
 // Mindestbreite, die bei maximaler Höhe für das korrekte Seitenverhältnis erforderlich wäre:
 if(hImg > wImg)
 minw = h / ratio;
 else
 minw = h * ratio;
 // Mindesthöhe, die bei maximaler Breite für das korrekte Seitenverhältnis erforderlich wäre:
 if(hImg < wImg)
 minh = w / ratio;
 else
 minh = w * ratio;
 
 // Im Folgenden lege ich immer nur einen Wert fest, da der Browser dann das Bild automatisch richtig skaliert:
 if(minw <= w)
 document.images[0].height = h;
 else if(minh <= h)
 document.images[0].width = w;
 }
 </script>
 </head>
 
 <body bgcolor="#FFFFFF" onLoad="rescalePicture()">
 <table width="99%" height="99%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td height="30" width="50"><h4><A HREF="#PREV_LINK#" style="text-decoration:none"> prev </a></h4></td>
 <td align="center"><h4>#IMAGE_NAME#</h4></td>
 <td width="50"><h4><A HREF="#NEXT_LINK#" style="text-decoration:none"> next </a></h4></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td align="center"><IMG ID="bild" SRC=#IMAGE#></td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td height="30">&nbsp;</td>
 <td align="center" height="30"><FONT face="Verdana, Arial, Helvetica, Sans-Serif" size="-2">#IMAGE_TEXT#</FONT>
 
 
 <h4 id="ueberschrift"><A HREF="#BACK_LINK#" style="text-decoration:none"> Thumbnails </a></h4></td>
 <td>&nbsp;</td>
 </tr>
 </table>
 </body>
 </html>

EDIT:
Leider funktioniert dies nicht unter den Internet Explorer

Dieser Beitrag wurde von Tille2000 bearbeitet: 15. Februar 2010 - 14:17

FirmaClan

Homepage

Nach oben
Nach oben of the page up there ^

#5 def

Spezialist

Gruppe: aktive Mitglieder
Beiträge: 429
Beigetreten: 19. Dezember 06
Reputation: 7
Geschlecht:Männlich

geschrieben 15. Februar 2010 - 23:21

Zitat (Tille2000: 15.02.2010, 13:32)

Danke, leider ist ein kleiner Fehler bei

<span class="postcolor"><<span style="color: blue;">td</span> align="<span style="color: orange;">center</span>"><<span style="color: blue;">IMG</span> ID="<span style="color: orange;">bild</span>" SRC="<span style="color: orange;">mypicture.jpg</span>"><<span style="color: blue;">/td</span>></span>

drinnen, aber so geht es jetzt.

Keine Ahnung, was du damit meinst. :wine:

Aber du wirst schon wissen, was es bedeutet!

Zitat (Tille2000: 15.02.2010, 13:32)

Leider funktioniert dies nicht unter den Internet Explorer

Autsch! - War ja klar, dass es an dem einzigen Browser, mit dem ich nicht getestet habe, scheitern würde. :cheers:

Hab mir den Kram nochmal angesehen. Es lag daran, dass man, um den Fensterinnenbereich beim IE auszulesen, auf ein anderes Objekt als bei allen anderen (!) Browsern zugreifen muss. Hier also die neue Version, die gemäß meinen Tests zum IE8 (mit eventuell anderen IE-Versionen zu testen, überlasse ich dir...) kompatibel ist: (Mit den anderen Browsern gehts hoffentlich auch noch!)

<html>
<head>
<title>#TITLE#</title>
<style>body {font-family:Verdana;}</style>
<script src="rescale.js" type="text/javascript"></script>
</head>

<body bgcolor="#FFFFFF" onload="rescalePicture()">
<table width="99%" height="99%" border="0" cellspacing="0" cellpadding="0">
   <tr>
     <td height="30" width="50"><h4><A HREF="#PREV#" style="text-decoration:none"> prev </a></h4></td>
     <td align="center"><h4>#IMAGE_NAME#</h4></td>
     <td width="50"><h4><A HREF="#NEXT#" style="text-decoration:none"> next </a></h4></td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td align="center"><IMG ID="bild" SRC="mypicture.jpg"></td>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td height="30">&nbsp;</td>
     <td align="center" height="30"><FONT face="Verdana, Arial, Helvetica, Sans-Serif" size="-2">#IMAGE_TEXT#</FONT>

<h4 id="ueberschrift"><A HREF="#BACK_LINK#" style="text-decoration:none"> Thumbnails </a></h4></td>
     <td>&nbsp;</td>
   </tr>
</table>
</body>
</html>

Hier das JavaScript, das ich mal in eine eigene Datei (rescale.js) ausgelagert habe:

function rescalePicture()
{
	// Höhe & Breite des Bildes ermitteln
	hImg = document.images[0].height;
	wImg = document.images[0].width;
	// Seitenverhältnis: Der größere Wert geteilt durch den kleineren Wert
	if(hImg > wImg)
		ratio = hImg / wImg;
	else
		ratio = wImg / hImg;

	// Höhe & Breite des Anzeigebereichs
	// Höhe berechnet sich aus Fenstergröße abzüglich
	// der Elemente, die darunter und darüber sind
	// Die Tabellenzellen darüber und darunter sind im HTML-Code fest als je 30 notiert, also zusammen 60.
	// Dazu ca. 40 Pixel (je nach Browser), die was-weiß-ich-woher kommen. Hat sich in Tests so ergeben.;-) Also 100.
	// Und dann noch plus die <h4>-Überschrift, deren Höhe dynamisch per JavaScript ausgelesen wird.
	// Breite berechnet sich aus Fensterbreite minus den fest im HTML festgehaltenen 50+50 = 100 Pixel.
	h4 = document.getElementById("ueberschrift").offsetHeight;
	if(document.body.clientHeight)
		h = document.body.clientHeight - 100 - h4;
	else if(document.documentElement.clientHeight)
		h = document.documentElement.clientHeight - 100 - h4;
	else
		h = window.innerHeight - 100 - h4;
	if(document.body.clientWidth)
		w = document.body.clientWidth - 100;
	else if(document.documentElement.clientWidth)
		w = document.documentElement.clientWidth;
	else
		w = window.innerWidth - 100;

	// Mindestbreite, die bei maximaler Höhe für das korrekte Seitenverhältnis erforderlich wäre:
	if(hImg > wImg)
		minw = h / ratio;
	else
		minw = h * ratio;
	// Mindesthöhe, die bei maximaler Breite für das korrekte Seitenverhältnis erforderlich wäre:
	if(hImg < wImg)
		minh = w / ratio;
	else
		minh = w * ratio;

	// Im Folgenden lege ich immer nur einen Wert fest, da der Browser dann das Bild automatisch richtig skaliert:
	// alert("w = " + w + "\nh = " + h + "\nratio = " + ratio + "\nminw = " + minw + "\nminh = " + minh);
	if(minw <= w)
		document.images[0].height = h;
	else if(minh <= h)
		document.images[0].width = w;
}

Sollte es noch Probleme irgendwelcher Art geben, einfach wieder nachfragen... Viel Erfolg & schöne Grüße.

Dieser Beitrag wurde von def bearbeitet: 15. Februar 2010 - 23:38

Nach oben
Nach oben of the page up there ^

Thema verteilen:

Seite 1 von 1

WinFuture-Forum.de: Mit Irfanview Web Fotoalbum Erstellen - WinFuture-Forum.de

Mit Irfanview Web Fotoalbum Erstellen Bilder sollen sich an Seite anpassen

#1 Tille2000

Anzeige

#2 def

#3 Spaceball

#4 Tille2000

#5 def

Thema verteilen:

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0

Beitrag entfernen

Design und Sprache

Sprache:

Ausführungsstatistiken

WinFuture-Forum.de: Mit Irfanview Web Fotoalbum Erstellen - WinFuture-Forum.de

Mit Irfanview Web Fotoalbum Erstellen Bilder sollen sich an Seite anpassen

#1 Tille2000

Anzeige

#2 def

#3 Spaceball

#4 Tille2000

#5 def

Thema verteilen:

1 Besucher lesen dieses Thema Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0

Beitrag entfernen

Design und Sprache

Sprache: Deutsch (DU)

Ausführungsstatistiken

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0

Sprache: