HTML Brauche tips wie ich Vereinsbilder auf eine Seite darstellen soll(wie ein fotoalbum?)

Zeboo · 10. Januar 2009

Hallo,

ich möchte eine recht einfache seite machen wo ich immer einige bilder von veranstaltungen und was auch immer hochladen kann. Die frage ist erstmal, wie sollte das am sinnvollsten aussehen? Ich habe hier ein paar zufallsseiten, also es sollte mindestens sowas sein wie HIER , da sind die events auf einzelne seiten verteilt und wenn man auf ein bild klickt wird das vergrößert.

Weiß aber selber garnicht wie das genau gemacht wurde. Wie kann man zb. die bilder per html vergrößern (also so wie auf diese seite, dass da eigentlich kein richtiger browser fenster aufgeht sondern nur das eine bild beim klicken vergrößert erscheint).

Man könnte natürlich auch was mit flash machen, gibt sehr tolle flashseiten, aber gut das traue ich mir überhaupt nicht zu. Sogar meine html kentnisse sind sehr schlecht ^^

Naja ich würde mich auf ein paar tips freuen, möchte das alles nur so übersichtlich und halbwegs stylisch machen wie es nur geht. Das sollte auf keinen fall SO oder SO aussehen.

Eventuell gibt es schon fertiggecodete seiten die ich nehmen sollte und wo man nur kleinigkeiten daran ändern brauche?

Vielen dank!

Gruss

michi12 · 10. Januar 2009

Deine verlinkte Seite benutzt Wordpress und das dafür geschriebene Plug-In nextgen-gallery.
Wenn du dich mit Wordpress anfreunden kannst, kannst du das verwenden.
Allerdings ich finde die verlinkte Seite nicht so gut, da diese die Bilder nicht vorauslädt.

Alternative: Ein anderes CMS nehmen (gibt es ja schon dutzende im Internet, meistens kostenlos) oder eine eigene Homepage schreiben, und dann ein "Lightbox"-Plugin einbinden.

Das bekannteste ist wohl "Lightbox", welches eigentlich alles hat was man braucht (images vorausladen, zwischen images mit Tastatur wechseln, Titel anzeigen usw).
Alternative: Multibox. Damit kannst du auch ganze Filme und vieles mehr in so einer "Lightbox" ansehen. Allerdings ist die nicht so einfach zu handhaben und für Anfänger eher ungeeignet, für Fortgeschrittene aber einen Blick wert, wenn man die weiterem Funktionen braucht.
Ansonsten gibt es natürlich auch wieder dutzende, zur "Original-Lightbox" sehr ähnliche "Clone" im Internet zu finden.

Meine Empfehlung: Schreib deine Seite selbst (dann lernst du noch was) und binde Lightbox ein.
Zweite Empfehlung: ein fertiges CMS mit integrierter Foto-Album-Funktion.

Zeboo · 11. Januar 2009

Hi,

danke ich kannte Lightbox usw. garnicht und werde versuche mich damit anzufreunden. Ich hoffe das wird dann nicht all zu schwierig ^^

michi12 schrieb:
Allerdings ich finde die verlinkte Seite nicht so gut, da diese die Bilder nicht vorauslädt.

Was meinst du damit? Wie sollen die Bilder vorausgeladen werden?

Gruss

michi12 · 11. Januar 2009

Hi,
Wenn was nicht klappt, kannst ja nachfragen

Zeboo schrieb:
Was meinst du damit? Wie sollen die Bilder vorausgeladen werden?

Bilder vorausladen heißt, dass das nächstfolgende Bild in dem "Fotoalbum" bereits geladen wird, während du ein Bild anschaust.
Folge: wenn du auf "nächstes Bild" klickst, ist es bereits geladen und kann sofort abgerufen werden, somit musst du nicht warten, und siehst keinen Ladebalken.
Lightbox macht das automatisch

Musst also nichts mehr machen, das ist bei Lightbox schon dabei.
PS: Das ganze funktioniert mit JavaScript.

Zeboo · 11. Januar 2009

Hi, also lightbox ist super. Doch garnicht sooo sehr schwer. Also jetzt habe ich schonmal was tolles wenn man die bilder anklickt. Aber wie sollte ich die anderen sachen am besten machen?

Also nehmen wir an ich mache eine seite, da sind ganz viele bilder von eine veranstaltung, dann klickt man die an und die werden so schön groß mit lightbox angezeigt.

ABER: Ich würde das jetzt umstänlich machen, dh. extra kleine bilder und extra große bilder erstellen. Dh. ein bild gibt es im kleinformat und im groß. Das kleine wird erstmal nur so auf der seite(mit den anderen geladen) und wenn man draufklickt wird die größere mit lightbox geladen.

Kann man das nicht einfacher machen? Zb. dass ich nur den großen habe was mit lightbox geladen wird und es wird einfach "resized" auf der seite mit den anderen angezeigt(weil dann brauche ich nicht immer 2 typen von 1 bild). Geht das irgendwie? Bzw. ideen? ^^

Gruss

Edit: Ein kleine nebenfrage. Wenn ich das anwenden möchte muss ich auf der entsprechende seite immer das haben:

HTML:

<head>
	
	<title>Lightbox JS v2.0 | Test Page</title>

	<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
	
	<script src="js/prototype.js" type="text/javascript"></script>
	<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
	<script src="js/lightbox.js" type="text/javascript"></script>

	<style type="text/css">
		body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif;	}
	</style>

</head>

Dann kann ich problemlos so oft die bilder nach lightbox laden wie ich nur möchte. Jetzt ist meine frage wie ich das machen soll, wenn ich das auf allen seiten so haben möchte.

Dh. ich habe 10 seiten wo ich das so lightbox mäßig anzeigen möchte, dann muss ich auf allen 10 seiten im header das einfügen? :/

BerniG · 11. Januar 2009

Das Resizing der Bilder kann der Server über gd2 oder imagemagick machen. Ich würde an deiner Stelle nicht das Rad neu erfinden; gibt doch unzählige so Skripte fertig: http://www.google.de/search?hl=de&q=gallery+script+php oder evtl. noch lightbox dazusetzen wenn du das willst: http://www.google.de/search?hl=de&q=gallery+script+php+lightbox Das hier ist ne schöne Übersicht: http://web-kreation.com/index.php/articles/101-free-photo-image-galleries-ajax-flash-php/

Zeboo · 12. Januar 2009

Mist, ich weiß es nicht wie man die bilder die mit lightbox 2.0 geladen werden gespeichert werden können? Wenn das eine bild geladen wird und wenn man reinklickt kann man nur "kopieren" und so unnötige sachen machen. Aber "grafik speichern unter..." geht da nicht. Was könnte ich machen?

Edit: also ich sehe, dass es manchmal geht manchmal nicht ^^ ... sehr seltsam. Ich glaube das kriege ich schon hin

michi12 · 15. Januar 2009

Zebo, bitte stelle solche Fragen hier im Thread, nicht per PN, dann haben mehrer Leute was davon, eventuell wollen das noch mehrere wissen, villeicht (ich geb ja die Hoffnung nie auf) verwendet irgendjemand einmal google und findet so die Lösung.

Hast du PHP auf deinem Server ?
Dann könntest du es ganz einfach mit php und einer for-Schleife realisieren.
*warten auf Antwort*

Mfg, Michi.

Zeboo · 15. Januar 2009

Hi,

also ich dachte da kaum ausser uns diesen thread verfolgt ich das vllt per pn machen kann ^^, aber gut hast recht, vllt will das jemand anders wissen. Damit das alle wissen worums geht:

HTML:
Zitat von Zeboo
Hiho,

erinnerst du dich noch an dem Lightbox Thread ?

Ich habe noch eine kleine frage: Was ist wenn ich zb. 30-40 bilder auf eine seite habe und die mit lightbox anzeigen möchte? Bei einem muss man einfach als beispiel:

HTML:

<a href="bild1.jpg" rel="lightbox"><img src="bild2.jpg" width="100" height="40" alt="" /></a>

Also wenn ich wirklich sehr viele bilder habe, muss ich bei jedem einzelnen das so einfügen? Das wäre bei 40+ bildern ganz schön anstrengend? Hast du irgendwelche tips?

Danke schonmal!

Gruß

Ja ich habe php auf dem server...so wie ich das sehe PHP 4.4.9 - etwas veraltet ^^ - naja leider kann ich mit php garnichts anfangen. Habe damit noch nie was gemacht, aber gut ich nehme mal an da muss ich jetzt durch. Also was sollte ich jetzt genau machen?

Gruss

BerniG · 16. Januar 2009

Ich habs ja schon geschrieben aber wieso willst du das Rad neu erfinden wenn es schon X kostenfreie fertige Bildergalerien gibt, die dank PHP einem die ganze Arbeit abnehmen? Wobei Programmieren lernen natürlich immer eine gute Idee ist.

Zeboo · 16. Januar 2009

Ahso, war ist das jetzt das selbe was michi meinen würde? Ich dachte deine php lösungen seien eine komplette photoalbum. Was ich brauche ist einfach nur eine lösung zu lightbox, dass ich das nicht immer einkopieren muss.

michi12 · 16. Januar 2009

Zeboo schrieb:
Ja ich habe php auf dem server

PHP:

<?php
$bilder = array(	"bild1.jpg" => "thumb1.jpg", +
					"http://www.domain.de/ordner/bild2.jpg" => "http://www.domain.de/ordner/thumb2.jpg" , 
					"ordner2/bild3.gif" => "ordner2/thumb3.gif"
				);
foreach ($bilder as $bild => $thumb) {
	echo '<a href="'.$bild.'" rel="lightbox"><img src="'.$thumb.'" alt="" /></a>'
}
?>

Du gibtes in das Array deine Pfade zu deimen Bild+Thumbnail ein ("bild" => "thumb"), und für jedes (foreach) "Paar" wird der Link ausgegeben.

Btw: es ist von Vorteil Thumbnails zu erstellen, und nicht das Bild einfach per "width, height" zu verkleinern, da Thumbnails ein viel kleineren Traffic erzeugen, denn sonst wird das volle Bild geladen, was viel Traffic erzeugt (und lange zum laden braucht, gerade wenn man noch ISDN oder DSL Light hat).

Den obigen Code kannst du einfach in deinen HTML-Quelltext eingeben, musst halt die datei dann von "html" in ".php" umbenennen.

Noch eine Bemerkung/Anregung zu einer Frage weiter oben:

Dh. ich habe 10 seiten wo ich das so lightbox mäßig anzeigen möchte, dann muss ich auf allen 10 seiten im header das einfügen? :/

Du machst eine Datei "header.php", in die der Header rein kommt.
Nun machst du eine Datei "index.php".

PHP:

<?php
include("header.php");
$seite = $_GET["p"];
switch($seite)
{
    case album:
    $content = "album.php";
    break;
    case about:
    $content = "ueberuns.php";
    break;
    case sonstiges:
    $content = "sonstiges.php";
    break;
    case kontakt:
    $content = "kontakt.php";
    break;
    case impressum:
    $content = "impressum.php";
    break;
    case guestbook:
    $content = "gb.php";
    break;
    default:
    $content = "home.php";
    break;
}
include($content);
?>

Wenn du nun auf deine Seite gehst, kannst du mit "www.deineseite.de/index.php?p=album" das Album aufrufen.
Ist "p" (page) nicht gesetzt, wird "home.php" (default-Wert) eingebunden.

So musst du den Header nur einmal einbinden, da dieser für jede Seite übernommen wird.

Zeboo · 17. Januar 2009

Hi!

Danke für die hilfe. Ich werde mir das ganze php zeug mal genauer angucken (da ich momentan überhaupt keine ahnung davon habe) und versuche das dann sogut es geht einzurichten.

Gruss

Suche

HTML Brauche tips wie ich Vereinsbilder auf eine Seite darstellen soll(wie ein fotoalbum?)

Zeboo

Lt. Commander

michi12

Banned

Zeboo

Lt. Commander

michi12

Banned

Zeboo

Lt. Commander

BerniG

Lieutenant

Zeboo

Lt. Commander

michi12

Banned

Zeboo

Lt. Commander

BerniG

Lieutenant

Zeboo

Lt. Commander

michi12

Banned

Zeboo

Lt. Commander

Ähnliche Themen