[npslider] Ein responsive jQuery Slider für Inhaltselemente

[dhe]

Ein responsive jQuery Slider für Inhaltselemente mit vielen Einstellungsmöglichkeiten.

npslider ist ein jQuery Slider für sämtliche Inhaltselemente auf Basis von bxSlider (http://www.bxslider.com).
Er bietet eine Reihe von Einstellungsmöglichkeiten und Animationen (u.a. Regulierbare Achsen, Ticker-Modus).

Features:

• Große Anzahl an Optionen, konfigurierbar im Backend.
• Es können mehrere Slider pro Seite eingesetzt werden.
• Einfache Installation
• Regulierbare Achsen
• Ticker Modus
• Touch
• Anpassung der Anzahl gleichzeitiger angezeigter und bewegter Slides im BE möglich

Installation:

1. Auswahl Elementtyp "Slider-Kontrollelement"
2. Start-Element einfügen
3. Einstellungen des Sliders definieren (wichtig)
4. Inhaltselemente einfügen (Gleiche Größe wie Slider)
5. Stop-Element einfügen
6. Im Seitenlayout "jquery" aktivieren (wenn nicht bereits getan)

Wünsche, Anregungen, Kritik gerne hier rein

UPDATE
Die Version 3.0 ist als alpha draussen. Habe sie jetzt einfach mal eingestellt, kann gut sein, dass es noch ein paar Fehler gibt. Bitte ausgiebig testen.
Gruß

[dhe]

Hallo Leute,
habe gerade eben die Verison 0.1.0 alpha1 ins ER hochgeladen.
Diese ist nun für Contao ab der Version 3.
npslider 0.1.0 alpha1

Viel Spaß damit und unbedingt testen.

Gruß

[planepix]

Hallo David,

besten Dank für den Slider und die Contao 3 Kompatibilität.

Feedback:
Unter Contao 3.0.0 Installation ausgeführt.
Keine Ergänzung während der Installation von Datenbanktabellen.

Nach Installation kein Inhaltselement "Slider" verfügbar.

Es fehlt m.E. das Erweitern der Datenbankfelder während der Installation.

[elwega]

Hallo David, Es fehlt m.E. das Erweitern der Datenbankfelder während der Installation.

Ebenfalls Danke für die Erweiterung, Installation verläuft Fehlerfrei, das Fehlen im der Elementtype Auswahl kann ich bestätigen.

[dhe]

Hallo Leute,
vielen, vielen Dank für die Hinweise.
Der Fehler ist inzwischen behoben, ich hatte im ER den falschen Installationspfad angegeben, somit wurde die Installation ins Hauptverzeichnis kopiert.
Erweiterung am besten erst einmal deinstallieren.

D.h. man muss folgende Ordner im Hauptverzeichnis löschen

• classes
• config
• dca
• languages

Desweiteren noch folgende Dateien

• assets/jquery.bxSlider.min.js
• templates/ce_npslider.html5
• templates/ce_npslider.xhtml
• templates/ce_npslider_js.html5
• templates/ce_npslider_js.xhtml

Jetzt ganz normal über das ER die Erweiterung neu installieren.

Sorry für die Umstände.

PS: Memo an mich selbst: Nachts keine Uploads machen

[derRenner]

Hallo & Danke mal für die Erweiterung!

ich habe den npslider jetzt mal soweit eingebunden, sodass dieser mit 3 Bildern horizontal von
rechts nach links slidet - funktioniert auch einwandfrei.

Aber wenn ich die Animation jetzt auf 'Vertikal oben auf unten' einstelle, dann erscheint nur
noch ein etwa 30px hoher Streifen! Gleiches Verhalten wenn ich den Überblendeffekt anwende.

Muss ich bei diesen Einstellungen andere "Häkchen" setzen? Oder ist das ein bug?

[EDIT] dieses Verhalten tritt bei mir nur im Google Chrome auf ... IE9 und FF17 habe ich dieses
Verhalten nicht. Im Browsermodus IE7 und IE8 (vom IE9) scheint dieses Verhalten auch nicht auf [/EDIT]

[elwega]

Erst mal danke für die schnelle Reaktion.
Jetzt sind die Dateistrukturen wieder ok
Ich Teste den Slider gerade und kann das mit dem Chrome bestätigen, da muss man wohl das css ein wenig anpassen.
Wenn ich mehr Ergebnisse habe gibts eine Info.

[dhe]

da muss man wohl das css ein wenig anpassen.

Das stimmt. Der Slider kommt (bisher) als absolute Basic-Variante daher, d.h. Designer müssen per CSS noch ein paar Einstellungen tätigen.
Mit der nächsten Version steuere ich ein CSS bei, das dann eine Default-Style mitliefert

Den Chrome Bug kann ich bestätigen. Schaue ich mir gleich mal an, warum er die Höhe des Sliders nicht aufgreift.

EDIT: Also ich hab das Problem erkannt. Chrome möchte auch gern per CSS mitgeteilt bekommen, wie groß die Childs innerhalb des Sliders sind.

Bugfix
Per CSS die gleiche Höhe wie des Sliders den Inhaltselementen verpassen

.ce_npslider .ce_image {height: 500px; width: 350px}

Ok, das heißt, ich muss die Dimensionen per CSS mitübergeben und nicht wie bisher im Template als Inline CSS übergeben. Kommt dann mit der nächsten Version....

Bitte weitertesten. Danke

Gruß
dhe

[elwega]

Hallo dhe,

Den Chrome Bug kann ich bestätigen. Schaue ich mir gleich mal an, warum er die Höhe des Sliders nicht aufgreift.

ob es ein Bug ist? Auf jeden Fall übernimmt er im Moment noch nicht die eingegebene Höhe im Browser. FF und einige Kollegen ignorieren das und errechnen diese
vermutlich aus der Breite. Wenn man dem bx-wrapper via css die Höhe mitgibt ist es auch im Chrome ok.
ohh -schneller

[dhe]

Hallo Leute,
neuste Version ist im ER.
Google Chrome Bug ist gefixt.

Gruß

[planepix]

Besten Dank David - eingestellte Höhe wird nun auch im Chrome korrekt dargestellt.

[elwega]

Hallo,
folgendes Beispiel habe ich im Test:
bild1, bild2,text1,bild3,text2,bild
das ging auch, bis auf die Eingangs angedeuteten Problemchen.
aber jetzt macht das im css:

.ce_npslider *

den Text unsichtbar.
Die Bilder sliden wunderbar, vom Text sieht man nur die Überschrift.
EDIT: Wenn man das rausnimmt wäre es im FF und IE perfekt, aber dann ist halt wieder das Chromproblem vorhanden.

[dhe]

Hm,
hast du die Höhe des Sliders auch so definiert, dass die Inhaltselemente in die Bühne passen?
Also nicht, dass das deine Inhaltselemente so groß für die Bühne sind.
Ist die Testseite auch online einsehbar? Dann schau ich mir das mal an.

Gruß

[dhe]

Hallo Leute,
eine neue Version ist verfügbar. Damit erscheint jetzt auch der Text bei ce_text Elemente.
Musste die npslider.css Datei anpassen.
Jetzt dürfte es klappen.

Gruß

[planepix]

Sobald ich die Eigenschaft der Höhe des Sliders deaktiviere, wird mir auch der Text im Inhaltselement Text ausgegeben.

.ce_npslider * {

    height: inherit;
    margin: 0;
    padding: 0;
    width: inherit;
}

der Text und die Bilder werden dann korrekt angezeigt wenn man den * weglässt.
Mit * werden zwar die Bilder in der richtigen Höhe ausgegeben, aber horizontal skaliert.

[elwega]

Hallo David,
Dimensionen sind angegeben und zum Test nur 200px x 200px groß.
Nach dem letzten Update sieht es gut aus, auch im Chrom.
Bild und Text ok
Ich teste mal weiter, u.U. bekommst du den Link zur Testseite wenn es nicht rund läuft.

[planepix]

Noch ergänzend:

Wenn ich bei "Steuerungs-Einstellungen" das Einblendne aktiviere und für Beschriftung zurück einfach ein "<" eintrage, wird das beim Speichern gelöscht. Trage ich bei Weiter ein ">" ein, bleibt es nach dem Speichern erhalten.

[dhe]

Hm,
es liegt nicht am Feld, sondern am Zeichen. Ein "<" wird generell herausgefiltert, egal in welchem Textfeld. Puh, da muss ich wohl nochmal ans DCA ran. Ich glaub, da muss ich mal recherchieren.

Gruß

[elwega]

Hallo David,
Thomas hat recht, ausserdem werden die prev/next Links zb. so:

<a class="bx-prev" href="">zurück</a>

interpretiert
das

...h ref="">...

bleibt leer. Weiterhin kann man die Links nicht per css ansprechen, auch nicht wenn man die Formatierung in der npslider.css vornehmen möchte.

[dhe]

so

<a class="bx-prev" href="">zurück</a>

interpretiert

ähm, ja... und? Meinst du wegen Validation?

Weiterhin kann man die Links nicht per css ansprechen

Kann ich nicht reproduzieren. Wenn ich ein CSS einbinde oder sogar per Contao eigenem CSS Editor eine Anweisung einfüge, z.B.

a.bx-prev {color:lime}

klappt das einwandfrei.
npslider-css.JPG

[elwega]

Hallo David, ist ok danke. Weis nicht wieso das eben nicht ging.
Jetzt ist die Formatierung ok sogar mit Abstand

[dhe]

Wenn ich bei "Steuerungs-Einstellungen" das Einblendne aktiviere und für Beschriftung zurück einfach ein "<" eintrage, wird das beim Speichern gelöscht. Trage ich bei Weiter ein ">" ein, bleibt es nach dem Speichern erhalten.

Bug behoben -> Update im ER

[derRenner]

Hallo,

ich habe der .box-window Klasse einen Rahmen verpasst und kann nun Folgendes feststellen:
beim Sliden von rechts nach links entsteht unten ein "Spalt" von wenigen px - ich kanns nicht
korrekt messen, aber ich denke, dass es 2px sind.

bei den anderen Einstellungen, also von oben nach unten bzw. beim Überblenden passiert
dies nicht. Dieser "unschöne" Effekt tritt bei mir im Chrome, IE und FF auf.

Hier sieht man den Spalt (Horizontales sliden):
npslid_r_t_l_01.jpg
Hier sieht man keine Spalt (Vertikales sliden und Überblenden):
npslid_t_t_b_02.jpg

Grüsse

[EDIT] soeben bemerkt, wahrscheinlich vorher nicht korrekt geguckt - beim Überblendeffekt tritt
dieses Verhalten doch im IE und im FF auch auf ... (oben nach unten tritt das nicht auf) [/EDIT]

[derRenner]

noch etwas ist mir soeben im Chrome aufgefallen:

ich verwende fürs rasche ElementeUntersuchen den von Chrome bereitsgestellten
Firebug Lite 1.4.0
Auf der Seite in der ich den npslider einsetze kann ich diesen Firebug Lite nicht
mehr verwenden - auf anderen Seiten schon. Auch auf der Contao-Backend-Seite.
Macht sich insofern bemerkbar, dass die Script-Seite einfach nicht mehr aufklappt.

Dieses Verhalten war aber gestern, also vor deinen Updates, nicht so, denn da habe
ich ihn noch einwandfrei verwenden können.

Im FF kann Firebug ohne Probleme verwendet werden.

[planepix]

Kann ich bestätigen- im Chrome.

[dhe]

beim Sliden von rechts nach links entsteht unten ein "Spalt" von wenigen px

Ui, ein Klassiker, der aber nichts mit dem Slider an sich zu hat, das ist ein Fehler im Box-Modell Rendering.
Um das zu korrigieren, muss man im CSS

img, // Global für alle Bilder -> bietet sich an
.ce_npslider img {display:block;} // Nur für Bilder im Slider

definieren, dann verschwindet auch der Abstand.

Denk dran, dass du beim Hinzufügen eines Borders das Box-Modell beachten musst was Gesamtdimesionen betrifft. Der Border wird zur Breite und Höhe am Ende hinzugezählt... nur so

Was das Problem mit dem Firebug Lite auf sich hat, kann ich dir ehrlich nicht sagen. Ich verwende den Chrome eigenen Inspector, der seit der Version 23 ziemlich gut ist.

Gruß

[derRenner]

bin leider erst wieder jetzt zum Weitertesten gekommen ... dafür aber kann ich Positives
berichten »» der Spalt ist durch den CSS-Eintrag verschwunden. DANKE für den Tipp!

[dhe]

Wunderbar
und danke für's Testen.
Dann mach ich mich jetzt mal an ein [optionales] default.css für den Slider, damit man zumindest mal ein Grundlayout hat.
Wenn das fertig ist, hebe ich den Slider in den beta Status, solang ihr nicht wieder irgendwelche Fehler findet

Gruß

[ktkt]

Hallo David,

hab deinen Slider mal installiert, die vielen Optionen sagen mir zu - leider bin ich offenbar zu blöd.

Contao ist 2.11.6, die Slider-Version die 0.0.1, jQuery ist aktiviert, als zu slidende Elemente hab ich 6 Bilder ausgewählt, es wird mir aber immer nur das erste angezeigt, die Navigationsbuttons sind auch nicht vorhanden, ebensowenig kann man die Pagination sehen. Eventuell ist das ja nur eine simple Einstellung, ich hab dir mal einen Screenshot von den Einstellungen gemacht.
klick

das javascript scheint zu stimmen:

<script type="text/javascript">
$(document).ready(function(){
	$('#npslider-731').bxSlider({		
		controls: true,
		prevText: 'prev',
		nextText: 'next',
		pager: true,
		pagerType: 'short',
		pagerLocation: 'bottom',
		pagerShortSeparator: '/',
		// DEFAULTS AT BOTTOM FOR IE Bug				
		infiniteLoop: true,
		startingSlide: 4,
		randomStart: false,
		hideControlOnEnd: false,
		auto: true,
		pause: 500,	
		autoHover: true,
		mode: 'vertical',
		speed: 1000	});
});
</script>

[planepix]

Ein schliessendes Element Slider-Ende hast du nach den 6 Bildern eingebaut?

[ktkt]

ja:-) Kennt man ja von slideitmoo.

[planepix]

ok
Dachte nur weil im Screenshot und Text nicht erwähnt.

Ich habs nur mit Contao 3 am Testen, da klappt das.

Stehen denn die Daten im Quelltext?

[ktkt]

ok
Dachte nur weil im Screenshot und Text nicht erwähnt.

ja, und du hast recht und solche Fragen sollte man immer gleich am Anfang stellen Wäre ja auch zu schön, wenns daran liegen würde.

Der Quelltext:
Bild öffne dich

[dhe]

Hallo ktkt,
hm, ich gab grad eben mal eine frische Contao 2.11.6 Installation gemacht, npslider 0.0.1 alpha 1 draufgebügelt -> funktioniert alles.

2 Sachen fallen mir ein.

1. Ich habe deine Einstellungen übernommen. 500ms Pause ist echt hart, als zu kurz, das packt der Browser kaum. Bei sowas würde ich den Ticker Modus empfehlen. Test: Schraub die Zahl mal nach oben
2. Hat du schon andere Animationsmodi ausprobiert? Gleicher Effekt?
3. Kannst du mal einen Screenshot vom generierten Quellcode posten? Also nachdem das jquery framework und das script greift (geht über firebug oder chrome inspector)
4. Am ehesten aber glaube ich, dass ein anderes CSS Stylesheet dazwischen funkt und die Positionierung deiner Elemente fixiert. Hast du eventuell eine Vorschauseite, auf der man sich das mal anschauen kann?

Gruß

[olibo]

Hallo dhe,
erst mal danke für die tolle Erweiterung. Funktioniert bei mir auf Anhieb gut in Contao 3.0.0

Ich benutze den Slider als Bildershow auf einer Startseite.

Dabei fällt mir auf, dass er im Endlosmodus (Endlosschleife mit "Automatisch wechseln") am Ende der Bilderfolge ins Weiß überblendet (Hintergrundfarbe) und erst nach der eingestellten Zeitspanne aus dem Nichts wieder das erste Bild einblendet.
Zweitens fände ich es gut, wenn das erste Bild beim Laden der Seite SOFORT dasteht und nicht erst die besagte Wartezeit verstreicht, bevor der erste Fade-In erfolgt. Oder habe ich da eine Einstellmöglichkeit übersehen?

Schöne Grüße,
Oliver

[derRenner]

Hallo @olibo

ich kann dein "Loch" leider nicht nachvollziehen - ich habe auch die 'Endlosschleife' mit 'Automatisch wechseln'
aktiviert und bei mir startet das erste Bild sofort beim Aufruf/nach dem Aktualisieren der Seite.
Ich habe 3 Bilder im Einsatz und nach Beendigung des Dritten Bildes beginnt sofort wieder das Erste Bild - und
das bei allen drei Animations-Varianten.
Hast du bei 'Beginnen mit Slide#" etwas eingetragen? Ich habe hier die '1' drinnen stehen, damit der Slide
mit dem ersten Bild beginnt.

[olibo]

Schönen Abend,
Das Problem (s.o.) entstand bei Benutzung einer Erweiterung namens "simple columns". Ohne diese klappt's wunderbar. Man muss deshalb nicht komplett auf simple columns verzichten, nur für den slider muss man sich halt eine andere Form der Positionierung überlegen.

Ciao,
Olibo

[akira]

Hallo

Zuerst einmal ein riesen Dankeschön für die tolle Funktion, klappt alles echt gut.

Ich habe das Ganze bei mir eingebunden und unter Steuerung-Einstellungen "Navigation am Ende ausblenden" aktiviert (Endlosschleife ist nicht aktiviert). Jetzt sind die Steuerungselemente aber immer da. Ich habe es mit und ohne Grafik probiert. Ist das noch ein Bug oder habe ich was vergessen zu beachten?

Besten Dank für Tipps

[dhe]

Hi akira,
bäm... in der Tat ein Bug. Schau ich mir an...

Gruß

[akira]

Supi, Danke.

Habe noch einen Vorschlag. Was hältst du von einer zusätzlichen Einstellungsmöglichkeit: Anstatt das am Schluss das Steuerelement einfach ausgeblendet wird, könnte man die Transparenz von 0 - 100% einstellen. Bei 0 ist das Steuerelement ganz ausgeblendet, bei 50% wäre eine Halbtransparenz vorhanden und bei 100% ist das Ganze normal ersichtlich. Was meinst du? Ich bräuchte das nicht, aber vielleicht der eine oder andere...

Gruss Akira