mpNivoSlider: Nivo Slider Image-Gallery Modul

Alles rund um Module und Plugins in CONTENIDO 4.9.
Antworten
xmurrix
Beiträge: 2743
Registriert: Do 21. Okt 2004, 11:08
Wohnort: Augsburg
Kontaktdaten:

mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von xmurrix » Sa 16. Nov 2013, 01:12

BESCHREIBUNG

mpNivoSlider: Nivo Slider Image-Gallery Modul für CONTENIDO CMS 4.9.x

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 dass das Mandantenverzeichnis "cms/" lautet.

1.) Modul
Den Modulordner "mp_nivo_slider" samt aller Inhalte in das Modulverzeichnis des Mandanten "cms/data/modules" kopieren.
Danach sollte man im Backend die Funktion "Module synchronisieren" unter "Style -> Module" ausführen.

2.) 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="data/modules/mp_nivo_slider/vendor/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="data/modules/mp_nivo_slider/vendor/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>
...
Hinweis:
Die Nivo Slider JavaScript-Datei ist schon im Modul-Template eingebunden, nicht im head-Bereich. Da muss man nichts machen, aber bei Bedarf kann man das auch in den head-Bereich auslagern.

Code: Alles auswählen

...
<script src="data/modules/mp_nivo_slider/vendor/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
...

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/data/modules/mp_nivo_slider/vendor/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="data/modules/mp_nivo_slider/vendor/nivo-slider/themes/contenido/contenido.css" type="text/css" media="screen" />
gegen

Code: Alles auswählen

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

Im Modultemplate (cms/data/modules/mp_nivo_slider/template/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ße Anzahl von Bildern im Slider zu verwalten. Je mehr Bilder angezeigt werden sollen, desto lä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-11-15 mpNivoSlider Modul 0.3.0 (für CONTENIDO 4.9.x)
  • Erste Veröffentlichung des mpNivoSlider Moduls für CONTENIDO 4.9.x

DOWNLOAD

Das Modul könnt ihr von der Seite mpNivoSlider (Nivo Slider) Modul für CONTENIDO CMS 4.9.x herunterladen.

Faar
Beiträge: 1448
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von Faar » Sa 16. Nov 2013, 11:48

Danke!
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

uwe-schmitt
Beiträge: 75
Registriert: Di 22. Jul 2003, 09:58
Wohnort: Heidelberg
Kontaktdaten:

Re: mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von uwe-schmitt » Sa 23. Nov 2013, 17:59

Sehr cool… Danke xmurrix…
Gruß Uwe
http://puncto-online.de :: puncto — grafik & marketing :: Werbeagentur in Heidelberg

walsi24
Beiträge: 95
Registriert: Di 25. Okt 2005, 20:48
Kontaktdaten:

Re: mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von walsi24 » Mi 15. Jan 2014, 08:26

hallo zusammen

ich habe das modul bei mir auch im einsatz und bin sehr glücklich damit...
jedoch habe ich jetzt festgestellt, dass bei IE 8 und 10 das Bild zuerst verzogen geladen wird. (Screenshot angehängt)

auf allen anderen browsern habe ich keine probleme... :roll:

jemand eine idee? liegt das eher am script oder allenfalls am css?

vielen dank für eure hilfe!
Dateianhänge
Bildschirmfoto-2014-01-15-um-08.12.46.jpg
(238.16 KiB) Noch nie heruntergeladen
Zuletzt geändert von walsi24 am Mi 15. Jan 2014, 15:44, insgesamt 1-mal geändert.

walsi24
Beiträge: 95
Registriert: Di 25. Okt 2005, 20:48
Kontaktdaten:

Re: mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von walsi24 » Mi 15. Jan 2014, 14:04

konnte es mit der hilfe von murrix lösen...

vielen dank murrix!!! :D :D :D

falls noch jemand das problem hat, hier ist die lösung:

http://support.dev7studios.com/discussi ... /MZ-818479

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

Re: mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von xmurrix » Mi 15. Jan 2014, 21:02

walsi24 hat geschrieben:...konnte es mit der hilfe von murrix lösen...

vielen dank murrix!!!...
Gern geschehen,

ich werde dann versuchen, den Fix auch gleich in die nächste Version des mpNivoSliders zu übernehmen, damit das Problem bei anderen nicht auftaucht.

Danke auch für das Feedback, mir ist das Problem in IE bisher gar nicht aufgefallen.

Gruß
xmurrix

deepabysm
Beiträge: 19
Registriert: Mi 29. Mai 2013, 13:04
Kontaktdaten:

Re: mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von deepabysm » Mo 17. Mär 2014, 22:18

Ich komme mir gerade ziemlich dumm vor, weil ich nicht weiß, wo man die Bildbeschreibungen (Captions) einstellt. Wo finde ich diese Option?

walsi24
Beiträge: 95
Registriert: Di 25. Okt 2005, 20:48
Kontaktdaten:

Re: mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von walsi24 » Mo 17. Mär 2014, 23:02

hallo deepabysm

das macht man soviel ich weiss immer direkt beim bild.
d.h. content -> dateiverwaltung -> upload -> ordner auswählen indem das gewünschte bild ist -> bild auswählen und dann bei beschreibung.
habe noch einen screenshot angehängt...

lg
Bildschirmfoto 2014-03-17 um 22.55.47.png
(95.38 KiB) Noch nie heruntergeladen

deepabysm
Beiträge: 19
Registriert: Mi 29. Mai 2013, 13:04
Kontaktdaten:

Re: mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von deepabysm » Di 18. Mär 2014, 15:13

Perfekt, vielen lieben Dank!

Horst1234
Beiträge: 315
Registriert: Sa 25. Okt 2008, 12:45
Wohnort: Bremen
Kontaktdaten:

Nivo Slider Image-Gallery Modul: Thumbnail-Größe

Beitrag von Horst1234 » Di 27. Jan 2015, 10:19

Hallo,
das Modul ist super cool, erstmal vielen Dank. :D
Dann habe ich noch eine Frage: wie kann man die Größen bei der automatischen Thumbnailerstellung verändern,
bei meinen Galerien werden die sehr klein, diese dann per HTML hochzuziehen, macht sie unscharf.
Gibt's da ne Lösung?
Herzliche Grüße aus Bremen,
Horst


HAT SICH ERLEDIGT: war ein reines css-Problem
Zuletzt geändert von Horst1234 am Mi 13. Mai 2015, 08:51, insgesamt 1-mal geändert.
Webdesign | Contenido: Templateprogrammierung, Einrichtung und Verwaltung | http://www.w2media.de

Horst1234
Beiträge: 315
Registriert: Sa 25. Okt 2008, 12:45
Wohnort: Bremen
Kontaktdaten:

Nivo Slider Image-Gallery Modul: Imagetitle?

Beitrag von Horst1234 » Mi 13. Mai 2015, 08:49

Hallo xmurrix,
wie lautet die Variable, um im Modultemplate statt der Captiondarstellung - die ich nicht brauche - den Beschreibung aus der Bilderdatenbank im title-tag direkt einzulesen?
vielen Dank,
Horst
Webdesign | Contenido: Templateprogrammierung, Einrichtung und Verwaltung | http://www.w2media.de

farina
Beiträge: 216
Registriert: Fr 24. Okt 2003, 13:16
Wohnort: Düren
Kontaktdaten:

Re: mpNivoSlider: Nivo Slider Image-Gallery Modul: Überblendeffekt

Beitrag von farina » Mi 29. Aug 2018, 11:27

Hallo,

ich habe das Modul installiert, wie schon öfter.
Der Bildwechsel klappt, aber die Überblendeffekte werden nicht genommen.
Im Errorlog steht

Code: Alles auswählen

[29-Aug-2018 11:48:32 Europe/Berlin] PHP Warning:  A non-numeric value encountered in /www/xxx/web/contenido/includes/pseudo-cron.inc.php on line 253
Ich weiß aber nicht, ob das etwas damit zu tun hat. Hat jemand einen Rat?

LG
farina

Faar
Beiträge: 1448
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von Faar » Mi 29. Aug 2018, 12:19

Der pseudocron hat vermutlich nichts damit zu tun, die Fehlermeldung besagt lediglich, dass wahrschein ein Charakter-Zeichen in einer Variablen ist statt eine Zahl.
Aber der Nivo-Slider arbeitet ja mit Javascript und dieses wird auch mit Javascript angesteuert, folglich muss es diese kleine Scriptanweisung irgendwo geben, und zwar nachdem das jQuery-Script und das Slider-Script in die Seite eingetragen wurden. Vielleicht sollte es in der main.js sein oder aber es wird vom Modul aus plaziert.
Ob es einen Konflikt im Script gibt, findest du heraus, wenn du die Seite mit gestarteter Konsole aufrufst.
https://developer.mozilla.org/de/docs/Tools/Web_Konsole
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

farina
Beiträge: 216
Registriert: Fr 24. Okt 2003, 13:16
Wohnort: Düren
Kontaktdaten:

Re: mpNivoSlider: Nivo Slider Image-Gallery Modul

Beitrag von farina » Mi 29. Aug 2018, 17:13

Ich habs gelöst.
Es lag an der Formatierung.
Die Bilder im Container des Sliders waren in meiner css-Datei auf 100% gesetzt.

Code: Alles auswählen

#headimg img{
	max-width: 100%;
	height: auto;
}
Nachdem ich das entfernt hatte, war alles gut.

Faar, danke für den Tipp mit der Konsole, da hab ich noch einen anderen Fehler gefunden. :D

LG farina

Antworten