Fotogalerie für Studenten einrichten

[Kingfisher OK]

Servus zusammen,

für meine Mitstudierenden möchte ich eine Fotogalerie einrichten, die ein Bild, den Namen, die Ausbildungsfirma und den Studiengang beinhalten.

Ich habe mir dabei folgendes Vorgestellt:

Eine Oberfläche (Sei es auf HTML-Basis oder lieber als ausführbares Programm) die der Oberfläche von Windows Phone ähnelt - Anklickbare Kacheln die zunächst das Bild enthalten beim darüberfahren den Namen aufblenden lassen, beim anklicken aufgehen und die weiteren Informationen angezeigt werden.

Wahrscheinlich wird das ganze eine kleine Herausforderung, hoffe jedoch auf hilfreiche Tipps bezüglich der Verfügbarkeit bereits fertiger Programme in dieser Richtung.

mfg

Kingfisher OK

 

[Daaron]

Such dir ein HTML5-fähiges CMS deiner Wahl, dass eine Galerie-Funktion hat. Jedem Galerie-Bild weist du dann als Beschreibungstext die restlichen Daten zu. Wenn das CMS alles richtig macht, dann hast du effektiv für jedes Bild in etwa so was hier:

<figure>
<img src="student1.jpg" alt="Hans Wurst 2005">
<figcaption>
<p>Hans Wurst hat 2005 an der Uni Musterhausen als Dipl. Ing. für Fleischwarenherstellung graduiert.</p>
</figcaption>
</figure>

Dann gibste den per CSS grob noch folgendes:

figcaption
{
position: absolut;
display: none;
background-color: rgba(40,40,40,0.8);
padding: 5px;
border-radius: 5px;
color: #fff
}
figure:hover figcaption
{
display:block;
}

 

[kling1]

einfach mal ein jquery gallery plugin deiner wahl benutzen
http://inspirationfeed.com/resources/tools/top-15-handy-jquery-image-gallery-plugins/
vll ist da ja was dabei sonst google
für die metro oberfläche da gibt es metrojs
http://www.drewgreenwell.com/projects/metrojs

 

[Daaron]

Valides HTML5+CSS3 >>>> jegliche JS-Lösungen.... alleine, was die Ladezeiten angeht, aber auch im Hinblick auf Rechenleistung (damit habens Mobilgeräte nicht so)

 

[Crys]

Valides HTML5+CSS3 >>>> jegliche JS-Lösungen

Wieso soll html5+css3 größer sein als JS?
html5+css3 ist immer JS vorzuziehen.

 

[Daaron]

Ähm, genau das wollt ich damit ausdrücken... HTML5+CSS3 ist JS-Lösungen überlegen.

 

[Crys]

So was ... hab von dir auch nichts anders Erwartet
Das ">>>>" ist aber auch sehr eindeutig, habs beim ersten lesen auf "html ist größer (im Quelltext, Trafic, ...) als JS" bezogen ... egal

 

[Daaron]

Das is so, als würde man sagen "Glen Danzig >>>> Justin Bieber". Im Bezug auf die reine Körpergröße kann diese Aussage durchaus als unwahr bezeichnet werden (Glen isn Zwuckel, sogar Corey Tailor is größer), musikalisch gibts an dieser Aussage aber nix zu rütteln.

Wie effektiv HTML5+CSS3 ist sieht man ja wunderschön oben in meinem Beispiel. Auch eine JS-Lösung muss wenigstens Image-Tags in einer "Rahmenstruktur" lagern... Syntaktisch besser ist es, wenn man die Images eben in Figures kapselt und ne Figcaption dazu gibt. Man könnte der gesamten Galerie (die man z.B. als <article> tagt) auch noch einen Beschreibungstext als <aside> mitgeben.
Wenn man sowieso HTML schreiben oder generieren muss, kann mans auch gleich richtig machen und den Rest halt CSS3 überlassen.

 

[Kingfisher OK]

Vielen Dank an euch alle!

Die Lösung von klomann83 mit der Metro Oberfläche war genau das was ich gesucht habe!

Aus Datenschutzgründen kann ich leider kein Link verteilen aber es ist richtig gut geworden =)

viele Grüße