Neuigkeiten:

moziloCMS verwendet Cookies. Wenn Sie auf unserer Seite weitersurfen, stimmen Sie der Cookie-Nutzung zu Datenschutzerklärung
moziloCMS Layouts
moziloCMS Plugins

Hauptmenü

Alternative Galerie-Ansicht mit JavaScript

Begonnen von azett, 21. März 2009, 22:06:41

« vorheriges - nächstes »

azett

Übersicht

Dieser Text beschreibt, wie du deinem moziloCMS eine sehr stylishe neue Galerie-Ansicht spendierst. Diese ändert nichts an der Art, wie moziloCMS seine Galerien verwaltet, sondern zeigt die Galeriebilder und deren Beschreibungstexte einfach auf eine andere Weise an.

Beispiel gefällig? Bitte sehr: Das ist die moziloCMS-Standardgalerie - und das die ImageFlow-Galerie.

Und hier noch zwei Beispiele mit anderen Layouts.


Download

CMS_2008-12-11_moziloCMS110_ImageFlow-Galerie.zip

Funktion der Galerieansicht

Innerhalb der Galerie-Ansicht kann man wahlweise mit dem Maus-Scrollrad, den Cursortasten links/rechts oder per Klick auf eines der hinteren Bilder navigieren.
Das mittige ("vorderste") Bild läßt sich mit einem Klick öffnen; ist es größer als das Browserfenster, wird es skaliert dargestellt und kann mit einem Klick auf das Zoom-Icon vergrößert werden.
Geöffnete Bilder lassen sich auf dem Bildschirm verschieben und bleiben auch geöffnet, wenn man weitere Bilder öffnet.
Per Escape-Taste oder Klick auf ein geöffnetes Bild wird dieses wieder geschlossen.


Verwendete Software

Grundlage der Galerie-Funktion ist die JavaScript-Galerie ImageFlow 0.9 (der Autor freut sich über Spenden) in Verbindung mit dem Vorschau-JavaScript HighSlide JS. Diese Kombination wurde für das Zusammenspiel mit moziloCMS angepaßt.


Voraussetzungen

- Webserver mit installiertem moziloCMS 1.10 oder höher
- auf dem Webserver installierte GDlib 2.0.1 oder höher (optional)
- clientseitig aktiviertes JavaScript


Lizenz

ImageFlow ist Freeware und kann kostenlos benutzt werden. ImageFlow darf modifiziert werden, um den eigenen Ansprüchen zu genügen.

HighSlide ist für den Gebrauch auf privaten und Schulwebsiten sowie für nichtkommerzielle Organisationen kostenlos, nicht jedoch für kommerziellen Gebrauch.


Installation

Lade die Datei "galleryimageflow.php" und das Verzeichnis "imageflow" ins Wurzelverzeichnis deines moziloCMS.

In den Dateien "imageflow/template.html" und "imageflow/screen.css" kannst du das Design der Galerie anpassen.
Standardmäßig ist die Galerie im mozilo-Layout; im Verzeichnis "imageflow/layout_schwarz" liegen Dateien für ein schlichtes schwarzes Layout.


Deinstallation

Mit dem Löschen der Datei "galleryimageflow.php" und des Verzeichnisses "imageflow" im Wurzelverzeichnis deines moziloCMS ist die Galeriefunktion rückstandsfrei entfernt.


Aufruf des Scripts

Ruf im Browser die Adresse http://[PfadZumCMS]/galleryimageflow.php?gal=[Galerie] auf.
Ersetze dabei [PfadZumCMS] mit der Adresse, unter der das CMS erreichbar ist, und [Galerie] mit dem Namen des Galerie-Verzeichnisses. Ein Beispielaufruf könnte also so aussehen: http://cms.mozilo.de/galleryimageflow.php?gal=moziloCMS
Achte darauf, daß du Umlaute im Galerienamen kodierst (z.B. -uuml~ statt ü) - am besten schaust du mit deinem FTP-Tool im Verzeichnis "galerien" nach, wie das Galerie-Verzeichnis exakt heißt.


Zusätzliche Parameter

reflect
Dieser Parameter sorgt für einen äußerst coolen Spiegel-Effekt.
Dafür muß die GDlib auf dem Webserver installiert sein (ob das der Fall ist, probierst du am besten aus, indem du das Script mit dem reflect-Parameter aufrufst: Ist die GDlib vorhanden, siehst du den Spiegel-Effekt).
 
Aufruf: galleryimageflow.php?gal=[Galerie]&reflect=1
   
bg
Der reflect-Parameter allein wirkt nur bei schwarzem Seitenhintergrund. Hat deine Website eine andere Hintergrund-farbe, mußt du diese dem Script mit dem bg-Parameter mitteilen.
Der Wert wird als normaler hexadezimaler Farbwert angegeben, also z.B. FFFFFF für weißen Hintergrund wie im Standard-Layout.
Der Parameter "bg" wird nur ausgewertet, wenn "reflect" 1 ist.
   
Aufruf: galleryimageflow.php?gal=[Galerie]&reflect=1&bg=FFFFFF
   
Verwendest du ein Hintergrundbild oder verschiedene Hintergrundfarben, kann der Spiegel-Effekt immer noch etwas unschön sein. Für diesen Fall kannst du "bg" auf transparent setzen.
Achtung: Das hat, je nach Serverleistung, erheblich längere Ladezeiten zur Folge!
   
Aufruf: galleryimageflow.php?gal=[Galerie]&reflect=1&bg=transparent


Aufruf der Galerie aus einer Inhaltsseite

Du kannst die Galerie auf verschiedene Arten aufrufen.
   
Am einfachsten erstellst du einen Link: [link=Meine Galerie|http://meinewebsite.de/galleryimageflow.php?gal=Meine-nbsp~Galerie]

Oder wie wäre es mit einem benutzerdefinierten Syntaxelement? (Details zum Arbeiten mit benutzerdefinierten Syntaxelementen findest du auf cms.mozilo.de.)
In der CMS-Konfiguration ist das schnell angelegt: galerie2 = <a href="galleryimageflow.php?gal={VALUE}" class="gallery" target="_blank">{VALUE}</a> (Wenn der Galeriename Sonderzeichen, z.B. Leerzeichen, enthält, ist der Link zwar nicht mehr ganz sauber - es funktioniert trotzdem.)
   
Und was passiert, wenn ein Besucher der Website überhaupt kein JavaScript aktiviert hat?
Dann sollte er nicht den Link zur JavaScript-Galerie zu sehen bekommen, sondern den zur ganz normalen statischen moziloCMS-Galerie:[html|<noscript>][galerie=Meine Galerie|Meine-nbsp~Galerie]
[html|</noscript><script type="text/javascript">document.write('<a
class="gallery" href="galleryimageflow.php?gal=Meine-nbsp~Galerie"
target="_blank">Meine Galerie</a>');</script>]
(Für die Verwendung bitte noch die Zeilenwechsel entfernen!)

Ein wenig unübersichtlich, aber sehr effektiv: Hat der Besucher JavaScript aktiviert, wird der Teil zwischen "<noscript>" und "</noscript>" ignoriert; per JavaScript wird der Link zur neuen Galerie ins Dokument geschrieben. Hat der Besucher aber z.B. einen Script-Blocker installiert, wird der "noscript"-Teil mit dem Link auf die herkömmliche Galerie ausgewertet, der anschließende JavaScript-Teil aber ignoriert.

Und zum Schluß die Krönung des Ganzen: ImageFlow bei aktiviertem JavaScript, normale Galerie, wenn es deaktiviert ist - zusammengefaßt in einem einzigen Syntaxelement: galerie2 = [html|<noscript>][galerie={DESCRIPTION}|{VALUE}][html|</noscript><script type="text/javascript">document.write('<a href="galleryimageflow.php?gal={VALUE}&reflect=1&bg=ffffff" target="_blank">{DESCRIPTION}</a>');</script>]Aufruf dann in etwa so: [galerie2=Hier gehts zur Galerie|Galeriename]
   
Gibts auch andere Möglichkeiten?
Sicher. Probier ruhig ein bißchen herum, das waren alles nur Anregungen.
   
   
Sonst noch Fragen?

Besuch die Website von ImageFlow oder stell deine Fragen hier im Thread.

Robert112

#1
hallo,

>> Lade die Datei "galleryimageflow.php" und das Verzeichnis "imageflow" ins Wurzelverzeichnis deines moziloCMS.<<

habe ich gemacht habe ne testgalerie erstellt, es ging nur wieder die "alte galerie " wo sich die bilder in einem neuen fenster öffen.

was habe ich falsch gemacht bzw. vergessen ?

-----------------

>> Diese Galerie ist kostenlos für nicht kommerzielle Zwecke. <<

da müsste doch eine Freiwillige Feuerwehr auch darunter fallen oder ?


 +++  Beste Grüße

Robert +++

azett

#2
Zitat von: "Robert112"habe ne testgalerie erstellt, es ging nur wieder die "alte galerie " wo sich die bilder in einem neuen fenster öffen.

was habe ich falsch gemacht bzw. vergessen ?
Ich vermute, du hast das normale "galerie"-Element verwendet. Das verweist aber auch weiterhin auf die gallery.php - erstell mal wie beschrieben das benutzerdefinierte Syntaxelement "galerie2" und verwende es in deiner Inhaltsseite, das ruft dann die galleryimageflow.php auf.

Zitat von: "Robert112"da müsste doch eine Freiwillige Feuerwehr auch darunter fallen oder ?
Keine Rechtsberatung, nur meine Meinung: Eine FFW-Website ist in meinen Augen nicht kommerziell.

Robert112

#3
Hallo,

Ich werde es mal probieren, und dann melde ich mich nochmal.

Zitat von: "Robert112"da müsste doch eine Freiwillige Feuerwehr auch darunter fallen oder ?
Keine Rechtsberatung, nur meine Meinung: Eine FFW-Website ist in meinen Augen nicht kommerziell.

Das denk ich nämlich auch, denn wir verdienen ja kein Geld -> Ehrenamt, und eine FF will sich ja auch nicht bereichern.

Robert112

#4
Hallo

habe den Syntax wie beschrieben hier eingefügt, Bild als Anhang.

...wenn man eine Galerie öffent kommt jedes mal wieder die gallery.php und nicht die
gewünschte galleryimageflow.php...

wer sich es mal angucken möchte : http://simsoncrew.si.ohost.de/cms

Vieleicht könnt ihr mir ja helfen, danke

azett

#5
Was steht in der Inhaltsseite, in der die Galerie verlinkt ist?

Robert112

#6
da steht

[galerie|KatS Dekon P]

wenn ich aber:

[galerieimageflow|KatS Dekon P] schreibe geht garnix,

aber wiederum wenn ich

[galerie2|KatS Dekon P] schreibe kommt:

Template-Datei "imageflow/template.html" fehlt! Bitte kontaktieren Sie den Administrator.

azett

#7
[galerie|Galeriename] wird weiterhin zu einem Link auf die Standard-Galerie (gallery.php), daran ändert sich nix.
Um auf die ImageFlow-Galerie zu verlinken, mußt du auf jeden Fall [galerie2|Galeriename] notieren, denn du hast das Syntaxelement mit dem Link auf die galleryimageflow.php ja als "galerie2" definiert.

Der Meldung "Template-Datei "imageflow/template.html" fehlt!" solltest du mal nachgehen: Hast du das Verzeichnis "imageflow" in dein CMS-Wurzelverzeichnis kopiert? Liegt dort die template.html drin?

Robert112

#8
Hallo,

es geht soweit Vielen Dank !

noch mal die Seite http://simsoncrew.si.ohost.de/cms fals es für die Fehlerbestimmung notwendig ist.

aber ein Problem habe ich noch -> bei Medien -> Fotos -> Einsatz THL 25.03.2009

steht in der inhaltsseite so wie alle andern [galerie2|Einsatz THL 25.03.2009]

kommt : Unbekanntes Galerieverzeichnis "Einsatz-nbsp~THL-nbsp~25.03.2009"!

wenn ich es aber in der inhaltsseite so eingebe : [galerie|Einsatz THL 25.03.2009] da gehts komischer weise.

Beste Grüße
Robert

azett

#9
Das Galerieverzeichnis "Einsatz-nbsp~THL-nbsp~25.03.2009" existiert nicht.

Frezl

#10
Hey!

Ich hab die Imageflow-Gallery getestet und bin begeistert! Allerdings bin ich nicht ganz damit klargekommen, wie und wo ich den noscript-teil einbauen muss. Kann ich das irgendwie direkt ins Template einbauen?

Gruß und Dank,
Frezl
Meine Mozilo-Projekte:

Frezl

#11
Ich habe jetzt mal versucht, das <noscript> in das Syntaxelement einzubauen:

galerie2 = <script type="text/javascript">document.write('<a href="galleryimageflow.php?gal={VALUE}&reflect=1&bg=bfe2ce" class="gallery" target="_blank">{VALUE}</a>');</script><noscript><a href="gallery.php?gal={VALUE}" class="gallery" target="_blank">{VALUE}</a></noscript>
Leider funktioniert das nicht, weil in {VALUE} die Sonderzeichen nicht maskiert werden. Die Imageflow-Gallery schluckt das, die normale Gallery aber nicht...

Wer weiß Rat?

Gruß und Dank,
Frezl

EDIT: Falls es weiterhilft: Ich benutze bei diesem Projekt Version 1.10.5 und werde auch dabei bleiben!
Meine Mozilo-Projekte:

Frezl

#12
Problem gelöst, siehe hier: http://forum.mozilo.de/viewtopic.php?f=12&t=92
Meine Mozilo-Projekte: