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 (III)

Begonnen von azett, 15. Januar 2010, 16:14:21

« vorheriges - nächstes »

azett

Übersicht

An dieser Stelle möchte ich eine weitere hübsche JavaScript-Erweiterung für moziloCMS-Galerien vorstellen. Diese ändert nichts an der Art, wie moziloCMS seine Galerien verwaltet, sondern zeigt die Galeriebilder und deren Beschreibungstexte einfach auf eine andere Weise an.

Download

CMS_2010-01-15_moziloCMS1_11_2_EasySlider+HighSlide-Galerie.zip


Funktion der Galerieansicht

Man kann mit Pfeil-Buttons durch die Galeriebilder navigieren (Screenshot) und das aktuelle Bild per Mausklick in voller Größe betrachten. Dabei wird auch der Beschreibungstext angezeigt (Screenshot). Per Escape-Taste oder Klick auf ein geöffnetes Bild wird dieses wieder geschlossen.


Verwendete Software

Grundlage der Galerie-Funktion ist der JavaScript-Slider Easy Slider 1.7, den ich mit dem Vorschau-JavaScript HighSlide JS aufgepeppt habe. Diese Kombination wurde für das Zusammenspiel mit moziloCMS angepaßt.


Voraussetzungen

- Webserver mit installiertem moziloCMS (getestet mit 1.11.2)
- im moziloCMS eingestellter Übersichtsmodus der Galerie (nur verfügbar, wenn die Grafikbibliothek GDlib auf dem Server installiert ist)
- clientseitig aktiviertes JavaScript


Lizenz

Easy Slider ist unter GPL und MIT lizensiert, kann also auch für kommerzielle Zwecke kostenlos benutzt werden.

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


Installation

  • Lade den Inhalt der entpackten ZIP-Datei ins Wurzelverzeichnis deines moziloCMS.
  • Stell die moziloCMS-Galerie in den Übersichtsmodus (Admin -> CMS-Einstellungen -> Galerie-Einstellungen)
[li]Füge folgenden Code in den <HEAD>-Bereich der gallerytemplate des verwendeten Layouts ein:[/li][/list]        <!-- EasySlider -->
        <script type="text/javascript" src="easyslider/js/jquery.js"></script>
        <script type="text/javascript" src="easyslider/js/easySlider1.7.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){   
                $("#slider").easySlider({
                });
            });   
        </script>
        <link href="easyslider/css/screen.css" rel="stylesheet" type="text/css" media="screen" />
        <!-- /EasySlider -->
        <!-- HighSlide -->
        <script type="text/javascript" src="highslide/highslide.js"></script>
        <link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
        <script type="text/javascript">
        hs.graphicsDir = 'highslide/graphics/';
        hs.wrapperClassName = 'wide-border';
        </script>
        <!-- HighSlide -->
    [/li]


Aufruf des Scripts

Ruf im Browser die Adresse http://[PfadZumCMS]/gallery_easyslider.php?gal=[NameDerGalerie] auf.
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.


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/gallery_easyslider.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: galerie_easyslider = <a href="gallery_easyslider.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="gallery_easyslider.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: Easy Slider bei aktiviertem JavaScript, normale Galerie, wenn es deaktiviert ist - zusammengefaßt in einem einzigen Syntaxelement: galerie_easyslider = [html|<noscript>][galerie={DESCRIPTION}|{VALUE}][html|</noscript><script type="text/javascript">document.write('<a href="gallery_easyslider.php?gal={VALUE}&reflect=1&bg=ffffff" target="_blank">{DESCRIPTION}</a>');</script>]Aufruf dann in etwa so: [galerie_easyslider=Hier gehts zur Galerie|Galeriename]
   
Gibts auch andere Möglichkeiten?
Sicher. Probier ruhig ein bißchen herum, das waren alles nur Anregungen.
   
   


Viel Spaß :)

Pacer

#1
Ich habe versucht die Galerie-Ansicht unter 1.12.beta4 zu installieren. Der Webserver hat die GDlib und ich habe Java aktiviert.
Erst gab es Fehlermeldungen, weil er die Language.php nicht gefunden hat. Nachdem ich in der gallery-easyslider.php die Pfade angepasst habe (cms/) ergänzt, kommt zwar keine Fehlermeldung mehr, aber die alternative Galerie-Ansicht erscheint auch nicht.

Hat das jemand unter 1.12 zu laufen und kann mir einen Tipp geben?

Beste Grüße
pacer