[ERLEDIGT] Fragen zu automatischer Skalierung und Rahmen um Bilder für Galerie

[ldb]

Hallo zusammen,
Ich habe schon wieder eine Frage, ich hoffe dass ihr mir helfen könnt!

Ich möchte eine HTML5-Seite aufbauen, die eine Galerie werden soll. Ich möchte, dass alle Bilder gleich gross sind und dass sie einen Rahmen darum haben. So kann ich die Bilder mit dem CSS-Befehl float:left; automatisch anordnen (oder so stelle ich mir das zumindest vor).
Einen Entwurf von meiner Idee findet ihr hier:

Natürlich sind die Bilder später alle verschieden...

Ich möchte das ganze so umsetzen, dass ich die Verknüpfung zu den Bildern in HTML habe. (also mit dem <img>-Tag). Wenn ich ein neues Thema haben möchte, möchte ich das auch einfach in meinem HTML-Code machen können.

Meine eigentliches Problem ist eigentlich, dass ich nicht weiss, wie ich es schaffe, dass die Bilder auf die richtige Grösse skaliert werden und wie ich es schaffe, dass sie sich nicht über den Rand eines divs hinausbewegen. Ich kann zwar Bilder in Photoshop manuell zuschneiden, wie ich das aber automatisieren kann, weiss ich leider nicht...

Ein Zusatzwunsch für später wäre, dass die Bilder durch anklicken vergrössert werden (ich nehme an, das müsste ich mit JavaScript realisieren).


Ich habe im Moment wirklich gerade keine Ahnung, wie ich an das Problem herangehen soll, deshalb bin ich euch schon jetzt sehr dankbar für eure Antworten!

Ich sollte noch anmerken, dass ich nicht gerade DER HTML/CSS-Profi bin, ich bin also froh um möglichst einfache Lösungen :)

Liebe Grüsse und herzlichen Dank,
Lukas

 

[Cheffchen]

Hallo,

das ist ein reines css problem also ist ein Link zu dein bisher gemacht von vorteil.
Du hast ein div oder so für den Inhalt und wenn jetzt die bider da einfach einfügst mit float:left sind die nebenander und wenn es an den rand vom div kommt wird umgebrochen in die neue Zeile, also wo ist die frage?

ach so skalierung img tag kannst ein breite oder höhe oder beides mitgeben. Aber bitte kein 800px auf 120px so skalieren :O)

Zoom: gibts scripte wie fancybox und co. die sehr einfach ein zu binden sind.

Cheffchen

 

[ldb]

Hallo Cheffchen,
Danke für deine Antwort! Mein eigentliches Problem liegt in diesem Fall wohl eher in der automatischen Beschneidung der Bilder. Diese sollten ja alle die selbe Grösse haben. Danach könnte ich sie einfach mit einem border versehen und mit float:left; anordnen. Das habe ich begriffen, danke!

Gibt es eine Funktion in Photoshop, die alle Bilder automatisch gleich zuschneidet, sodass ich nur noch den bildausschnitt wählen kann? Dabei sollte natürlich auch als 72-dpi-Bild gesichert werden!

Diese Skripte von denen du schreibst werde ich mir mal ansehen.

Eine Frage habe ich noch: wie sollte ich das mit der weissen Trennlinie für die Themen am besten realisieren? Ein div mit weisser Füllung? Oder kann man sowas einfaches auch direkt als Linie im html machen?

Ich danke euch für die Antworten!
Lukas

 

[Sempervivum]

Ein Zusatzwunsch für später wäre, dass die Bilder durch anklicken vergrössert werden (ich nehme an, das müsste ich mit JavaScript realisieren).

Ja, das geht mit Javascript. Das Stichwort heißt Lightbox.

Gibt es eine Funktion in Photoshop, die alle Bilder automatisch gleich zuschneidet, sodass ich nur noch den bildausschnitt wählen kann?

Willst Du einen Ausschnitt wählen, das heißt an den Rändern etwas abschneiden? Oder willst Du nur die Größe ändern, damit sie für deine Galerie passt? Mit Photoshop weiß ich es jetzt nicht, aber ersteres geht mit JPG-Illuminator und Größe ändern im Batch-Modus z. B. mit Irfanview.

 

[ldb]

Hallo Sempervivum,
Danke für den TIpp mit Lightbox. Werde ich mir mal anschauen!

Ich habe bereits ein Programm gefunden, dass ungefähr das macht, was ich will. Es skaliert die Bilder einfach auf die gewünschte Maximalgrösse. Was mir aber lieber wäre, wäre wenn ich wie einen Zuschnittsrahmen mit fixer grösse automatisch generieren lassen könnte, bei dem ich aber die skalierung de Bildes und den Ausschnit manuell wählen kann. Gibt es da auch eine möglichkeit in Photoshop?

Ich danke allen, die mir bis jetzt Tipps gegeben haben, ich habe es fast geschafft (hoffe jedenfalls, dass ich es richtig gemacht habe)

Gruss und gute Nacht,
Lukas