Diashow erstellen

[NetAktiv]

Hallo,

ich habe basierend auf PHP eine Diashow erstellt, wobei beim Klicken auf ein Bild in der Übersicht eine neue Seite mit dem ausgewählten Bild geöffnet wird und dann kann man dort mit Vorwärts/Rückwärts durch die Bilder navigieren. Ansehen kann man das unter http://col.rainer-rosenberger.de/Isar Meine Lösung öffnet ein neues Window, was nicht so wirklich gut aussieht.

Wesentlich besser gefällt mir beispielweise das Fotoalbum bei http://muehlespiel.ch. Hier sieht es nur aus, als würden die Bilder in ein <div> eingebettet, es ist kein Browserrahmen sichtbar. Der Code dort hinter dem Link lautet:

<a class="modal-button" title="em2011 023 640x480"
href="/index.php?option=com_phocagallery&amp;view=detail&amp;catid=74:em2011&amp;id=2205:em2011-023-640x480&amp;tmpl=component&amp;Itemid=55"
rel="{handler: 'iframe', size: {x: 680, y: 576}, overlayOpacity: 0.7}" >
<img src="/images/phocagallery/EM2011/thumbs/phoca_thumb_m_em2011 023 640x480.jpg"
alt="em2011 023 640x480" /></a>

Kann mir jemand einen Tip geben, wie die da machen (basiert wohl auf Joomla).
Danke, Rainer

 

[threadi]

Laut URL dieser Seite ist es das Modul "com_phocagallery" von Joomla, welches dafür verwendet wird.

 

[NetAktiv]

Nunja, ich will das aber für meine Homepage nachbauen, und dazu müsste ich wissen, WIE die das erreichen. Es gibt auch fertige JavaScript-Module, die man wohl einbinden kann (siehe Shadowbox.js), aber auch dann weiß ich nichts über das WIE. Klar könnte ich mir die Sourcen laden und endlos analysieren, aber eventuell hat das ja jemand schon gemacht und weiß, was da in etwa gemacht wird. Ich habe etwas dagegen, eventuell riesige Bibliotheken einzubauen, nicht zu wissen, was die tun und am ende nur einen Bruchteil zu nutzen.

 

[mermshaus]

onclick-Handler, dann zur Abdunklung ein Element mit Alphatransparenz über den gesamten Viewport legen, in der Mitte zentriert ein anderes Element positionieren, dort das Bild darstellen. Bei Klick auf vorwärts/rückwärts das dargestellte Bild durch ein anderes Bild einer Liste ersetzen.

 

[NetAktiv]

Hallo, ich habe es geschafft, dynamisch ein DIV zu erstellen und in diesem dann durch die Bilderliste (Array) zu navigieren. Zwei Dinge fehlen noch, zu denen ich keine rechte Idee habe:
1) Wie kann ich ein DIV zentrieren. Ich nehme an, ich muss Bildschirmgröße ermitteln und dann selbst berechnen, wo ich das DIV absolut positioniere. Mit CSS-Angaben wie text-allign oder so bin ich nicht weiter gekommen.
2) Zu dem Hinweis "ein Element mit Alphatransparenz über den gesamten Viewport legen" habe ich bisher keine Idee, das alte Dokument strahlt im Hintergrund in voller Schönheit.
Grüße, Rainer

 

[mermshaus]

Versteh das jetzt bitte nicht falsch, aber es gibt schon etliche fertige „Lightbox“-Lösungen im Web. Du verlangst gerade von uns, dir zu sagen, wie die es machen, damit du nicht zu gucken brauchst, wie die es machen, damit du ein Script schreiben kannst, welches es so macht, wie die es machen. Zumindest mein Enthusiasmus dafür kennt Grenzen. ;)

Zu Frage 1: Suche etwa nach „css div horizontal vertical center“. Oder auch Horizontale und vertikale Zentrierung mit CSS

Zu Frage 2: Na ja, absolut positioniertes Element, das sich über die gesamte Viewportgröße erstreckt, das als Hintergrund etwa ein rein schwarzes Bild mit 50 % Alphatransparenz gesetzt hat. Das dunkelt dann in den meisten Browsern den eigentlichen Inhalt ab.

 

[NetAktiv]

Hallo Marc,

zunächst mal herzlichen Dank für die Tipps. Klar macht es auf den ersten Blick keinen Sinn, verfügbares nochmals erfinden zu wollen. Aber zum einen habe ich mich schon immer gefragt, wie das geht, also rein als Lernprojekt für mich ist es eine interessante Aufgabe. Zum anderen habe ich Shadowlight versucht und das hatte für mich zwei gravierende Nachteile.

1) Die Boxgröße wird automatisch an die Bildgröße angepasst. Gibt man die Boxgröße an, dann werden die Bilder an die Boxgröße angepasst. Ich will aber eine feste Boxgröße, in der die Bilder unterschiedlicher Größe zentriert dargestellt werden. Ich habe auch keine Lust, alle Bilder mit einem Rand zu versehen und auf die gleiche Größe zu bringen.

2) Beim Navigieren der Bilder dauert das bei Shadowlight recht lang, auch wenn das Bild schon mehrfach geladen war. Außerdem wird zwischen dem Laden immer eine schwarze Box eingeblendet.

Der Code von Shadowbox ist für mich nicht lesbar. Alle Whitespaces wurden entfernt und sehr viel Namen haben nur 1 oder 2 Buchstaben, um die Downloadzeit zu Minimieren. Da bin ich Tage beschäftigt, bevor ich das verstehe (JavaScript und CSS mach ich nur selten und nur für meine Homepage). Ich könnte nun weiter nach anderen existierenden Lösungen suchen, aber ob ich am Ende schneller fündig werde, als beim Selbstschreiben ist fraglich.

 

[threadi]

Schau dir mal die Greybox an. Die erfüllt deinen Punkt 1 und 2 vollkommen und ist zudem auch sehr flexibel in der Gestaltung.

 

[NetAktiv]

Hallo Threadi,
nun bin ich mit meinem Prototypen auch fertig :-)
http://col.rainer-rosenberger.de/bilder
Mein SlideShow Objekt hat auch jede Menge Properties, die das Verhalten beeinflussen und das Layout wird weitgehend über CSS gesteuert, so dass es leicht an die eigene Seite anpassbar ist.

Greybox hab ich angeschaut und da bekomme ich schon auf deren Homepage beim Schließen der Fenster eine Fehlermeldung
"map" ist undefiniert Zeile: 1072 Zeichen: 9 Code: 0
Schon müsste ich wieder suchen, woran es liegt und anpassen.

Grüße, Rainer