mpNivoSlider: Nivo Slider Image-Gallery Modul

xmurrix
Beiträge: 2744
Registriert: Do 21. Okt 2004, 11:08
Wohnort: Augsburg
Kontaktdaten:

mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von xmurrix » Mi 28. Sep 2011, 20:55

Hallo Community,

im Folgenden möchte ich das Nivo Slider Modul für CONTENIDO vorstellen.

Nivo Slider (v3.2) ist ein Image-Slider basierend auf jQuery, mit vielen Features wie Effekte, Tastatursteuerung, Verlinkung von Bildern, Themes, diverse Einstellungen, usw.
Benötigt jQuery v1.7+ und unterstützt läuft unter Internet Explorer v7+, Firefox v3+, Google Chrome v4+, Safari v4+, Opera v10+

Die CONTENIDO Modul Version des Nivo Sliders bietet eine Oberfläche zur einfachen Konfiguration sämtlicher Slider-Optionen.
Unterstützt die Bildformate jpg, jpeg, png, und gif. Die Skalierung der Bilder ist von der installierten GD-Library oder ImageMagick abhängig.

Konfigurationsmöglichkeiten des Moduls:
  • Auswahl des Bilderordners innerhalb des upload-Verzeichnisses des Mandanten
  • Verwendung von Bildern auch in Unterordnern
  • Automatisches skalieren der Bilder auf vorgegebene Größenangaben und Cachedauer für skalierte Bilder
  • Sortieren der Bilder
  • Viele Nivo Slider Optionen

INSTALLATION
Die im Modulpackage enthaltenen Dateien/Sourcen sind wie im Folgenden beschrieben zu installieren.
Die Pfade zu den Sourcen (CSS, JS und Templates) können von Projekt zu Projekt unterschiedlich sein und sind bei Bedarf anzupassen.
Bei der Installationsbeschreibung wird davon ausgegangen, dass CONTENIDO in das DocumentRoot-Verzeichnis eines Webservers installiert wurde und das Mandantenverzeichnis "cms/" ist.

1.) cms/includes/*:
  • class.module.mpnivoslider.input.php (Klasse für Nivo Slider Moduleingabe)
  • class.module.mpnivoslider.output.php (Klasse für Nivo Slider Modulausgabe)
  • class.module.mpnivoslider.php (Klasse für Nivo Slider Module)
  • class.uploadmeta.php (GenericDB Klassen für Zugriff auf die Upload-Meta Tabelle)
Sind in das Verzeichnis "cms/includes/" zu kopieren.

2.) cms/js/*:
Enthält die Sourcen (JavaScript, CSS und Bilder) des Nivo Sliders.
Der Ordner "nivo-slider" in das Verzeichnis "cms/js/" zu kopieren.

3.) cms/templates/mpNivoSlider.html:
Das Template für die Ausgabe, ist in das Verzeichnis "cms/templates/" zu kopieren.
Hinweis:
Die Nivo Slider JavaScript-Datei wird im Modul-Template eingebunden, nicht im head-Bereich.

Code: Alles auswählen

...
<script src="js/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
...
4.) Einbinden der JS- und CSS-Dateien:
Die JavaScript- und CSS-Dateien des Moduls sind im head-Bereich des Layouts einzubinden:
Beispiel:

Code: Alles auswählen

...
<head>
    <link rel="stylesheet" href="js/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="js/nivo-slider/themes/contenido/contenido.css" type="text/css" media="screen" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
</head>
...
5.) mpNivoSlider.xml:
XML-Export des mpNivoSlider Moduls, ist über das CONTENIDO-Backend als Modul zu importieren.

7.) mpnivoslider_deutsch.xml:
XML-Export der deutschen Modulübersetzung, ist über das CONTENIDO-Backend als Modulübersetzung zu importieren.

8.) mpnivoslider_english.xml:
XML-Export der englischen Modulübersetzung, ist über das CONTENIDO-Backend als Modulübersetzung zu importieren.


TIPPS&TRICKS
Bildergrößen:
Die Proportionen der Bilder, das Verhältnis zwischen Breite und Höhe der Bilder, im gewählten Bilderordner sollten alle gleich sein.
Das Modul rechnet zwar Bilder auf die angegebenen Bildmaße herunter, aber eine Mischung aus verschiedenen Proportionen (4:3 und 16:9) erzeugt Bilder, die nicht alle die vorhandene Breite und Höhe der Slides füllt.

Anzahl der Thumbnails:
Wenn Anzeige der Thumbnails aktiviert ist, und die Liste der Thumbnails nicht in eine Zeile passen, werden die Thumbnails in mehreren Zeilen dargestellt.

Themes:
Als Standard wird das Theme "contenido" verwendet. Es stehen auch weitere Themes ("bar", "dark", "default" und "light", siehe cms/js/nivo-slider/themes/) zur Verfügung. Zum Konfigurieren eines anderen Themes, z. B. bar, folgendes befolgen:
Im head-Bereich die Zeile

Code: Alles auswählen

    <link rel="stylesheet" href="js/nivo-slider/themes/contenido/contenido.css" type="text/css" media="screen" />
gegen

Code: Alles auswählen

    <link rel="stylesheet" href="js/nivo-slider/themes/bar/bar.css" type="text/css" media="screen" />
ersetzen.

Im Modultemplate (cms/templates/mpNivoSlider.html) die Zeile

Code: Alles auswählen

    <div class="slider-wrapper theme-contenido">
gegen

Code: Alles auswählen

    <div class="slider-wrapper theme-bar">
ersetzen.
Gegebenenfalls CSS-Formate für das neue Theme anpassen/erweitern.

FTP-Upload:
Das Modul liest Bildinformationen aus der Upload Datenbank-Tabelle aus, nicht aus dem Upload Verzeichnis. Wenn Bilder per FTP auf den Server übertragen wurden, sollte das entsprechende Uploadverzeichnis im Backend unter Dateiverwaltung synchronisiert werden, damit die neuen Bilder im Frontend angezeigt werden.

Anzahl der Bilder:
Das Modul ist nicht darauf ausgelegt, eine gro&szlig;e Anzahl von Bildern im Slider zu verwalten. Je mehr Bilder angezeigt werden sollen, desto l&auml;nger dauert die Initialisierung des Sliders.
Maximal 10 Bilder sind ein guter Wert für die obere Grenze.

Verwendung mit anderen JavaScript Frameworks:
Das Nivo Slider Modul basiert auf jQuery und jQuery bietet eigentlich auch die Option "jQuery.noConflict();", um mit anderen JavaScript-Frameworks zusammen zu funktionieren.
Dies klappt nicht in Verbindung mit den Prototype.js Framework, es verursacht Konflikte unter IE und Opera.
Daher ist es ratsam, im Layout nur jQuery einzubinden.


CHANGELOG
2013-03-23 mpNivoSlider Modul 0.3.0 (für CONTENIDO 4.8.x)
  • new: Update auf Nivo Slider v3.2
  • new: Responsive Modus integriert
  • bugfix: Kleine Bilder nicht hochskalieren
2013-03-23 mpNivoSlider Modul 0.2.1 (für CONTENIDO 4.8.x)
  • bugfix: Fehler bei der Ausgabe der Sortierung korrigiert
2012-09-07 mpNivoSlider Modul 0.2 (für CONTENIDO 4.8.x)
  • new: Update auf Nivo Slider v3.1
  • new: Konfiguration für die Qualität von generierten JPEG-Bildern
  • new: json_decode() implementation in PHP falls json_decode nicht verfügbar ist
  • change: jQuery Nivo Slider Plugins im separaten Scope um Probleme mit anderen JS-Frameworks zu vermeiden
  • change: Entfernen diverser Nivo Slider Optionen, siehe Artikel Artikel The Nivo Slider is Responsive!
2011-11-22 mpNivoSlider Modul 0.13rc (für CONTENIDO 4.8.x)
  • new: Erweitert auf mehrfachen Einsatz innerhalb einer Seite
  • bugfix: Sprachabhängige Bildbeschreibung auslesen
  • bugfix: Englische Modulübersetzung korrigiert
2011-09-28 mpNivoSlider Modul 0.1.rc (für CONTENIDO 4.8.x)
  • Erste Veröffentlichung des mpNivoSlider Moduls

DOWNLOAD
Das Modul könnt ihr von meiner Seite unter CONTENIDO Modul - Nivo Slider herunterladen.

Grüße
xmurrix

mtiedemann
Beiträge: 8
Registriert: Fr 16. Feb 2007, 10:35
Kontaktdaten:

Re: mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von mtiedemann » Di 18. Okt 2011, 10:58

Hallo xmurrix,

vielen Dank für das tolle Modul.

Ich würde es gerne mehrfach auf einer Seite einsetzen, jedoch wird nur das erste Modul im Frontend angezeigt.
Im Serverlog erscheinen auch keine Fehler.

Hätten Sie eine Idee?

Grüße
Michael

xmurrix
Beiträge: 2744
Registriert: Do 21. Okt 2004, 11:08
Wohnort: Augsburg
Kontaktdaten:

Re: mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von xmurrix » Di 18. Okt 2011, 21:21

Hallo Michael,

danke sehr für das Feedback.

Das Modul ist aktuell nicht für den mehrfachen Einsatz innerhalb einer Seite gedacht, lässt sich aber folgendermaßen anpassen:

Ersetze den Inhalt der Datei cms/templates/mpNivoSlider.html gegen

Code: Alles auswählen

<div class="modMpNivoSlider{MODULE.CLASSNAME}" style="{MODULE.STYLE}">
    <div class="slider-wrapper theme-default">
        <div class="ribbon"></div>
        <div class="nivoSlider mpNivoSlider_{MODULE.UID}">
            <!-- BEGIN:BLOCK -->
            <img src="{IMG.SRC}" alt="{IMG.ALT}" title="{IMG.TITLE}"{IMG.ATTRIBUTES} /><!-- END:BLOCK -->
        </div>
        {CAPTIONS}
    </div>

    <script type="text/javascript">
    jQuery(window).load(function() {
        jQuery('.mpNivoSlider_{MODULE.UID}').nivoSlider({NIVO.OPTIONS});
    });
    </script>
</div>
Füge in der Datei cms/includes/class.module.mpnivoslider.output.php vor der Zeile 361

Code: Alles auswählen

        $oTemplate->generate('templates/mpNivoSlider.html', 0, 0);
die Zeile

Code: Alles auswählen

        $oTemplate->set('s', 'MODULE.UID', uniqid());
ein.

Danach sollte der Slider mehrfach in einer Seite einsetzbar sein.

Gruß
xmurrix

mtiedemann
Beiträge: 8
Registriert: Fr 16. Feb 2007, 10:35
Kontaktdaten:

Re: mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von mtiedemann » Fr 21. Okt 2011, 09:49

Hallo xmurrix,

vielen Dank für die schnelle Hilfe.

Es funktioniert und nochmals vielen Dank für das tolle Modul.

Grüße

Michael

prepress89
Beiträge: 91
Registriert: Mi 8. Jul 2009, 09:18
Kontaktdaten:

Re: mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von prepress89 » Fr 28. Okt 2011, 10:11

Ein super Slider den es nun für Contenido gibt - respekt! :) Sowas hab ich vor ein paar Monaten noch gesucht...

Danke murrix!

Mfg

MakD42
Beiträge: 103
Registriert: Sa 8. Nov 2003, 19:01
Wohnort: Marburg
Kontaktdaten:

Re: mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von MakD42 » Mi 14. Dez 2011, 16:05

Super teil boahhhh...

habe dennoch ne Frage dazu. Kann ich den "Schatten" für die Bilder ausstellen?
Hab schon die CSS durchgeschaut - aber nix gefunden :roll:

Funzt super!!
MakD 42
______________________
Contenido 4.6.8 & 4.8.15
MySQL 5.1.54
Linux/Apache
Meine Contenidoprojekte: art & weise | StadtMedia | aidea

divox
Beiträge: 38
Registriert: Mi 17. Sep 2008, 14:25
Kontaktdaten:

Re: mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von divox » Mo 9. Jan 2012, 03:03

Geniales Modul ;)

Vielen, vielen Dank.

Hab nur eine Frage, kann man das Modul so weit erweitern das wenn jemand auf die Slideshow mit der Maus klickt, das sich dann irgendeine belibige Seite öffnet?
z.B das man im Modulkonfig ein Link einträgt und dieser wird verwendet..

Spider IT
Beiträge: 1416
Registriert: Fr 3. Dez 2004, 10:15

Re: mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von Spider IT » Mo 9. Jan 2012, 08:21

Leg doch ein verlinktes, absolut positioniertes DIV darüber :)

Gruß
René

divox
Beiträge: 38
Registriert: Mi 17. Sep 2008, 14:25
Kontaktdaten:

Re: mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von divox » Mo 9. Jan 2012, 10:52

klasse idee, danke ;)

werde ich machen.

Oldperl
Beiträge: 4049
Registriert: Do 30. Jun 2005, 22:56
Wohnort: Eltmann, Unterfranken, Bayern
Kontaktdaten:

Re: mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von Oldperl » Mo 16. Jan 2012, 13:35

Ich hät da mal nen Käfer gefunden 8)

um die Bilder auch nach dem Erstellungsdatum absteigend zu sortieren, muß das Array _aOrder in der Datei class.module.mpnivoslider.php (ab Zeile 163) von

Code: Alles auswählen

$this->_aOrder = array(
            'RAND()'         => $this->_i18n['random'],
            'filename:ASC'   => $this->_i18n['filename_asc'],
            'filename:DESC'  => $this->_i18n['filename_desc'],
            'size:ASC'       => $this->_i18n['size_asc'],
            'size:DESC'      => $this->_i18n['filename_desc'],
            'filetype:ASC'   => $this->_i18n['filetype_asc'],
            'filetype:DESC'  => $this->_i18n['filetype_desc'],
            'created:ASC'    => $this->_i18n['created_asc'],
            'created:esc'    => $this->_i18n['created_esc'],
            'idupl:ASC'      => $this->_i18n['id_asc'],
            'idupl:DESC'     => $this->_i18n['id_desc']
        );
durch folgenden Code ersetzt werden

Code: Alles auswählen

$this->_aOrder = array(
            'RAND()'         => $this->_i18n['random'],
            'filename:ASC'   => $this->_i18n['filename_asc'],
            'filename:DESC'  => $this->_i18n['filename_desc'],
            'size:ASC'       => $this->_i18n['size_asc'],
            'size:DESC'      => $this->_i18n['filename_desc'],
            'filetype:ASC'   => $this->_i18n['filetype_asc'],
            'filetype:DESC'  => $this->_i18n['filetype_desc'],
            'created:ASC'    => $this->_i18n['created_asc'],
            'created:DESC'   => $this->_i18n['created_esc'],
            'idupl:ASC'      => $this->_i18n['id_asc'],
            'idupl:DESC'     => $this->_i18n['id_desc']
        );
Dann klappt's auch mit dem Nachbarn äääh Sortieren. :wink:

Gruß aus Franken

Ortwin
CONTENIDO 4.9 Entwickler-Handbuch - Publikation auf medium.com zu meinem angedachten Entwickler-Buch zu CONTENIDO 4.9
ConLite 2.0, alternatives und stabiles Update von Contenido 4.8.x
phpBO Search Advanced - das neue Suchwort-Plugin für CONTENIDO 4.9
Mein Entwickler-Blog

Kickbanignore
Beiträge: 37
Registriert: Mi 20. Jan 2010, 11:13
Kontaktdaten:

Re: mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von Kickbanignore » Mi 25. Jan 2012, 11:27

Hallo

Ich hab das Problem, dass ich das Modul zwar einmalig installieren kann, sprich ich konfiguriere es entsprechend, rufe danach die Seite auf und es zeigt mir wunderschön alle Bilder an. Wenn ich DANN aber weitere Bilder in dieses Verzeichnis hochlade, dass werden diese NICHT angezeigt. Auch wenn ich alle Bilder nochmal komplett lösche und neue uploade werden nur diejenigen auf der Website angezeigt, die davor schon angezeigt wurden. Ich kann also gar keine neuen Bilder hinzufügen. Was mach ich falsch? Muss irgendwas gepurget werden oder so?

Edit: Jetzt hab ich nochmal alles gelöscht, auch den Cache-Ordner und jetzt schaff ichs gar nicht mehr, dass Bilder angezeigt werden. Fehlermeldung ist immer:

Code: Alles auswählen

mpNivoSlider: No images found in defined image folder!

Spider IT
Beiträge: 1416
Registriert: Fr 3. Dez 2004, 10:15

Re: mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von Spider IT » Mi 25. Jan 2012, 11:52

Hallo,

hast du die Bilder über die Dateiverwaltung oder per FTP hochgeladen?
Wenn per FTP, dann musst du in der Dateiverwaltung das Verzeichnis einmal öffnen, damit die neuen Bilder in der Datenbank eingetragen werden.
Ich kenne zwar dieses Modul nicht, aber bis jetzt ist mir noch keins untergekommen, dass sich die Bilder nicht aus der DB hat auflisten lassen.

Gruß
René

Kickbanignore
Beiträge: 37
Registriert: Mi 20. Jan 2010, 11:13
Kontaktdaten:

Re: mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von Kickbanignore » Mi 25. Jan 2012, 12:02

Tatsächlich. Jetzt klappts.

Ich hatte sie natürlich direkt via FTP hochgeladen, darauf muss man erstmal kommen...

Vielen Dank!

Oldperl
Beiträge: 4049
Registriert: Do 30. Jun 2005, 22:56
Wohnort: Eltmann, Unterfranken, Bayern
Kontaktdaten:

Re: mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von Oldperl » Mi 25. Jan 2012, 13:49

Spider IT hat geschrieben:...aber bis jetzt ist mir noch keins untergekommen, dass sich die Bilder nicht aus der DB hat auflisten lassen.
Es gibt auch das eine oder andere Galleriemodul welches sich die Bilder direkt über die Angabe eines Ordners aus diesem holt. Da aber mpNivoSlider zum einen die Dateinamen aus der DB holt, zum anderen aber auch die Metainfos der Bilder z.B. für Captions zu den Bildern nutzt, MUSS das Bild in der DB vorhanden sein. Dieses ist, wie René schon richtig sagte, per FTP nicht gegeben.

Gruß aus Franken

Ortwin
CONTENIDO 4.9 Entwickler-Handbuch - Publikation auf medium.com zu meinem angedachten Entwickler-Buch zu CONTENIDO 4.9
ConLite 2.0, alternatives und stabiles Update von Contenido 4.8.x
phpBO Search Advanced - das neue Suchwort-Plugin für CONTENIDO 4.9
Mein Entwickler-Blog

Kickbanignore
Beiträge: 37
Registriert: Mi 20. Jan 2010, 11:13
Kontaktdaten:

Re: mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von Kickbanignore » Do 26. Jan 2012, 12:28

Hallo,

Ich hab nochmal zwei Dinge:

1.) Irgendwie funktionieren die Angaben "Anzahl der Spalten:" und "Anzahl der Reihen:" nicht. Egal was ich da eingebe, es werden einfach immer soviele Bilder ausgelesen wie ich bei "Maximale Anzahl der Bilder:" angebe.

2.) Das bringt mich auch schon zu Problem 2. Ich habe fast 1000 Bilder, die ich in der Galerie anzeigen möchte. Oben soll also wie jetzt die Bildershow ablaufen und untendran sollen halt soviel Bilder wie unter 1) angegeben angezeigt werden als Navigationshilfe. Das Modul liest jetzt aber einfach ALLE Bilder aus, sprich, es wird nicht mehr wirklich nutzbar, wenn über den ganzen Bildschirm 1000 Bilder im Kleinformat angezeigt werden. Gibt es eine einfache Möglichkeit das entsprechend anzupassen, dass man in der unteren Navigation nur einen kleinen Ausschnitt hat und mittels "Weiter" und "Zurück" dann entsprechend rumnavigieren kann?

Gesperrt