JavaScript Galerie

Cool Master · 17. März 2011

Moin,

ich wollte mal fragen ob es so was ich ich mir das vorstelle gibt:

Und zwar möchte ich eine Galerie in dem mehrere Kleine Bilder mit dem Projekt Name zu sehen sind wie auf meiner super Zeichnung:

~~Anhang anzeigen 225432~~

Sobald ich auf ein Bild oder Projekt Name klicke soll es so aussehen:

~~Anhang anzeigen 225433~~

und die Information über das Projekt darstellen.

Wie gesagt gibt es so etwas schon? Bzw. eine ähnliche Galerie?

+ BELA B. + · 17. März 2011

Hi
Ich weiß nicht ob dir das weiterhilft, aber vl hilfts dir...
http://www.drweb.de/magazin/scripts-fur-fotogalerien-diashows-und-bildprasentationen/
Dort scheint es solche Scripts zu geben...
Was eventuell auch noch einen Blick wert wäre, wäre das hier:
http://dynamicdrive.com/dynamicindex4/index.html

Aber ganz ehrlich, ich würd es selbst machen
Mit Prototyp+scriptaculous :-)

Beste Grüße

Cool Master · 17. März 2011

Als erstes mal danke für die Links. Leider war nicht das passende dabei. Sieht wohl so aus das ich es wohl doch selber machen muss.

Könnte man so etwas auch mit HTML und CSS Umsetzen? Das "Popup" wäre ja eigentlich kein problem das wären ja nur ein paar div container.

+ BELA B. + · 17. März 2011

Welcome Back...

Mit CSS alleine kann das gar nicht gehn... du benötigst etwas PHP (weil ich nehm ja mal an du willst fotos hinzufügen bzw löschen können, alben erstellen etc...), etwas JavaScript (am Besten eben mit Prototyp+scriptaculous) und einwenig html.
So schwer ist dein Vorhaben nicht..

Du willst ja Alben erstellen, und diese Verwalten können oder?
Vorraussetzung ist halt eben, dass du diese Sprachen einwenig berherschst.

Achja und mit ein paar Divs ists nicht getan

Du brauchst eine Datei im php zum verwalten, eine zum ausgeben und ein js um das ganze ausgegebene anzuzeigen wie du es möchtest

CSS nimmt man zum Gestalten

Beste Grüße

Cool Master · 17. März 2011

Hatte nen kleinen typo sollte HTML heißen nicht CSS

Mit den paar DIVs meinte ich folgendes am bsp des "popups":

ein div für den "background"

ein div für das Bild links

ein div für die Projekt Beschreibung

und jeweils ein div für die 3 kleinen Bilder

da ich django-cms nutze kann ich damit direkt den inhalt per "placeholder" reinstellen und ein wenig mit template inheritance arbeiten so das nicht jedes projekt eine eigene vollständige .html seite braucht.

Wenn das so geht (wie ich denke) muss ich mir das noch mal genau anschauen wie ich es am besten umsetzte. Worüber ich mir gerade noch so ein wenig dem Kopf zerbreche ist die Umsetzung der eigentlichen Galerie also das 5x6 Raster.

Black_Panter · 17. März 2011

Schau dir doch mal Gallary Skripte wie: http://minishowcase.net/ an. Bzw. Wühl dich mal bei http://www.smashingmagazine.com/2007/05/18/30-best-solutions-for-image-galleries-slideshows-lightboxes/ durch ob du was passendes findest, auf dem du aufbauen kannst.

+ BELA B. + · 17. März 2011

is klar

aso hab verstanden (zumindest denk ich xD)

schau dir mal an wie du das integrieren kannst.
und zu dem problem mit dem Raster....

Wie wärs mit net Tabelle? bzw im php einfach ne schleife...

Beispiel zwecks dem Raster, funktioniert sogar

PHP:

$bilder = array('b1','b2','b3','b4','b5','b6','b7','b8','b9','b10');    //array mit den bildern....


$i = 0; //counter 1
$x = 0;            //counter2

$picsPerRow = 6;
#$lines = false; //weil zeilen sind jetz ja egal, braucht man nich..

echo "<table width=100% border=1>";

    foreach($bilder as $pic) {
    $x++;
    
    if($i==$picsPerRow) echo "<tr>";
    
    echo "<td id='td_$x' width=\"50\">$pic</td>";
    
    $i ++;
    if($i==$picsPerRow) {
    echo "</tr>";
    $i = 0;
    }
    
    
    
    
    
    
    }

echo "</table>";

@Black_Panter
der zweite link ist fast der gleich wie derjenige, den ich oben gepostet hab ^^ oder?

Black_Panter · 17. März 2011

@Bela B.: kann sein^^ hab mir deinen jetzt nicht angeschaut muss ich gestehen xD

+ BELA B. + · 17. März 2011

macht nichts xD

Suche

JavaScript Galerie

Cool Master

Fleet Admiral

+ BELA B. +

Gast

Cool Master

Fleet Admiral

+ BELA B. +

Gast

Cool Master

Fleet Admiral

Black_Panter

Ensign

+ BELA B. +

Gast

Black_Panter

Ensign

+ BELA B. +

Gast

Ähnliche Themen