Bildergalerie-"Software" oder Lösung gesucht

F!5H · 01.03.2007, 19:56

Hi, ich suche für meine kleine HP eine nette Software, die mir es erlaubt einfache Bildergallerien zu erstellen.

Das ganze sollte möglichst einfach gehalten sein.

habe mich schonma ein bisschen umgeschaut.

Am liebsten wäre mir vom Design her dies: http://www.fi5h.de/alu.html
Jedoch sollte das ganze auf HTML oder meinetwegen PHP und auch Java aufbauen.
Das Problem was ich bei HTML habe ist, dass man das Bild nicht dynamisch an die Fenstergröße anpassen kann.

Gibt es dafür irgendeine Lösung/Möglichkeit ?
Es sollte nämlich möglich sein direkt auf die entsprechenden Bilder zu linken, was bei der Flash Lösung niicht möglich ist.

Vielen Dank.

MFG
F!5H

mondrian · 02.03.2007, 11:22

Wenn die Bilder im gleichen Format vorliegen, also gleiches Verhältnis von Höhe zu
Breite, oder vielleicht auch wenn sie wenigstens gleich orientiert sind, z.B. alle
hochkant, geht es vielleicht sogar per Prozentangabe (HTML / CSS), also z.B.
"100%" bezogen auf das Elternelement.

Mit Javascript (clientseitig) geht es, wenn du die Bildgrössen kennst, also entweder
aus einer Liste abfragen oder nach Bedarf ermitteln. Ermitteln scheidet u.U. aus,
weil dafür das betr. Bild erstmal geladen werden muss, um es ausmessen zu können,
möglich ist es aber schon.

Per PHP gibt es Möglichkeiten wie getimagesize(), das dürfte wohl der sauberste Weg
sein. Du könntest aus den Angaben von Breite und Höhe vielleicht jeweils ein
Werte-Paar für maximal Seitenbreite und maximale -höhe berechnen, und dann das
Paar auswählen, welches mit dem anderen Wert noch in der Seite bleibt (also z.B.
neue Bilddbreite kleiner als aktuelle Fenstergröße).

tele · 02.03.2007, 12:23

Moin,

ich hab SPGM auf www.photo-digital-schmidt.de eingesetzt. Lässt sich relativ gut anpassen und in eine Seite einfügen. Klein aber fein halt. Basiert auf PHP.

Gruß

tele

F!5H · 02.03.2007, 20:45

Zitat:

Zitat von mondrian

Per PHP gibt es Möglichkeiten wie getimagesize(), das dürfte wohl der sauberste Weg
sein. Du könntest aus den Angaben von Breite und Höhe vielleicht jeweils ein
Werte-Paar für maximal Seitenbreite und maximale -höhe berechnen, und dann das
Paar auswählen, welches mit dem anderen Wert noch in der Seite bleibt (also z.B.
neue Bilddbreite kleiner als aktuelle Fenstergröße).

Das hört sich nicht schlecht an.

Es soll halt ein Code sein, der ein Bild z.B. automatisch auf 80% der Fenstergröße skaliert (unabhängig von der Ursprungsgröße)
Das wäre am besten...
Es soll halt so sein, dass die Bilder, je nach Bildschirmauflösung, möglichst groß sind. Man soll jedoch nicht scrollen müssen.

Wie sieht das ganze jedoch per php aus...
Habe leider keine Ahnung davon ...
Man müsste dabei ja auch die aktuelle Fenstergröße miteinbeziehen.

MFG
F!5H

Edit: Könnte das hier hinkommen ?
Man muss nur noch die Zielgröße anpassen.
Edit2: Hat eigentlich einen anderen Zweck... gucke mir das morgen nochma in Ruhe an.

Stefan · 02.03.2007, 22:03

Ich hab die Coppermine Photo Gallery am laufen... sehr einfach ^^ --> man muss nix machen...

mondrian · 03.03.2007, 13:35

Zunächst muß die Fenstergröße ermittelt werden, also geht es nicht ohne den
clientseitigen Einsatz von JavaScript.

Die ermittelten Werte müssen dann an den Server übergeben werden, damit sie im
PHP Script berücksichtigt werden können.

Also ein reload oder location.replace der betr. Seite per JavaScript mit angehängten
Werten. Prinzipiell so:

Code:

echo "<script language=\"JavaScript\">location.replace(this.href+\"?width=\"+
window.innerWidth+\"&height=\"+window.innerHeight );</script>"

Da aber sowieso JavaScript benötigt wird, zudem das betr. Bild auch geladen werden
soll, hab ich mal was nur mit JavaScript geschrieben:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15"><!-- kl -->
<title>Bildgrösse anpassen</title>
<style type="text/css">
div{text-align:center;}
img {margin:auto;}
</style>
<script type="text/javascript">
document.write("<style type=\"text/css\">img{visibility:hidden}<\/style>");
var wiw; var wih; var imw; var imh;
function skal(){
imw=document.images[0].width;
imh=document.images[0].height;
if (window.innerWidth)wiw=window.innerWidth;
else if (document.documentElement && document.documentElement.clientWidth != 0)
wiw= document.documentElement.clientWidth;
else if (document.body)wiw= document.body.clientWidth;
if (window.innerHeight)wih=window.innerHeight;
else if (document.documentElement && document.documentElement.clientHeight != 0)
wih= document.documentElement.clientHeight;
else if (document.body)wih= document.body.clientHeight;
if ((wih/wiw)>(imh/imw)) document.images[0].width= wiw/1.5;
else document.images[0].height= wih/1.5;
document.images[0].style.visibility="visible";
}
</script>
</head>
<body>
<h1>Bild skaliert</h1>
<div>
<img src="muster.png" onload="skal()" alt="">
</div>
</body>

Beim ersten Test mit FF2, IE7 und Opera9 sah es schonmal gut aus. Die
entspr. Berechnungen und Vergleiche sind in PHP mit getimagesize eigentlich gleich,
u.U. ist bei PHP der Seitenaufbau gleichmäßiger, wenn die Bildgröße vorher schon
bekannt ist. Dafür muß zumindest einmal die Fenstergröße bestimmt werden, und
dann immer übergeben werden, oder vielleicht noch was mit Cookies.

F!5H · 03.03.2007, 19:36

Cool danke.

Werde ich demnächst mal ausprobieren.
Habe atm no time...

MFG
F!5H

F!5H · 07.03.2007, 16:28

So, hier mal mein Zwischenergenis: http://alu.fi5h.de/bau/index.html

Ich habe das Java-Element in eine eigene Datei gepackt.
Jedoch weiß ich gerade net, wo ich

Code:

document.write("<style type=\"text/css\">img{visibility:hidden}<\/style>");
var wiw; var wih; var imw; var imh;

unterbringen soll.

Wenn ich es einfach so reinschreibe, sieht man zwar hinterher das Bild, welches vergrößert wurde, jedoch sind die Buttons weg.

Wäre nett, wenn du dir das eben nochma anguckst.
Ebenfalls, wenn du noch dazuschreibst, dass sich die Bilder nur verkleinern, nicht vergrößern.

Hier eine HTML Seite: http://alu.fi5h.de/bau/slides/IMG_2645.html
und das dazugehörige Java-Script: http://alu.fi5h.de/bau/res/skalieren.js

Sieht halt noch ein bissl doof aus, wenn man die "Verkleinerung" des Bildes live miterlebt.

MFG
F!5H

mondrian · 07.04.2007, 15:16

...hatte gar nicht gesehen dass du noch was gepostet hast.

Zitat:

Zitat von F!5H

Ich habe das Java-Element in eine eigene Datei gepackt.
Jedoch weiß ich gerade net, wo ich

Code:

document.write("<style type=\"text/css\">img{visibility:hidden}<\/style>");
var wiw; var wih; var imw; var imh;

unterbringen soll.

Wenn ich es einfach so reinschreibe, sieht man zwar hinterher das Bild, welches vergrößert wurde, jedoch sind die Buttons weg.

Es geht ja wohl um ein Bild mit class="image", welches entspr. per CSS angesprochen
werden kann (ausser wenn die Bezeichnung der Klasse mit "image" reserviert wäre,
falls es also nicht klappt müßtest du das Wort im HTML usw. ersetzen, aber vielleicht
ist es ja ok).
Also den Code nach der Anpassung img.image idealerweise wieder ins externe Script:

Code:

document.write("<style type=\"text/css\">img.image{visibility:hidden}<\/style>");
var wiw; var wih; var imw; var imh;

Zitat:

Zitat von F!5H

Ebenfalls, wenn du noch dazuschreibst, dass sich die Bilder nur verkleinern, nicht vergrößern.

Hier eine HTML Seite: http://alu.fi5h.de/bau/slides/IMG_2645.html
und das dazugehörige Java-Script: http://alu.fi5h.de/bau/res/skalieren.js

Sieht halt noch ein bissl doof aus, wenn man die "Verkleinerung" des Bildes live miterlebt.

Also das kurze Aufblitzen und Verschwinden des Scrollbalkens stört dich, oder
meinst du etwas anderes?

F!5H · 08.04.2007, 20:37

Hmm danke, dass du nochmal was schreibst.
Aber eigentlich habe ich's inzwischen schon soweit, dass mit das alles gefällt.

Einzig alleine das mit dem Scrollbalken tritt noch bei Opera auf... IE und Firefox is nix davon zu sehen.

MFG
F!5H

mondrian · 12.04.2007, 15:15

Dann kannst du es ja wohl so lassen.

Ansonsten könntest du versuchen den Scrollbalken per CSS im Stylesheet zu vehindern:
body {overflow:hidden}
U.U. auch "html" statt "body", oder beides so: html, body {overflow:hidden}

Hab auch nicht mit deinem Code getestet ob es läuft und wie nachteilig es u.U. sein
mag. Also ob es Situationen gibt (z.B. Besucher mit sehr kleinem Bildschirm), in
denen die Scrollbarkeit fehlt.
Falls du es versuchen willst, würde ich das betr. Stylesheet per JavaScript erzeugen
lassen, also mit dem anderen Code zusammen:

Code:

 document.write("<style type=\"text/css\">body{overflow:hidden;}img.image{visibility:hidden}<\/style>");