[npslider] Ein responsive jQuery Slider für Inhaltselemente

[dhe]

Hi,
nein ist leider nicht möglich, da der Slider eine definitive gleiche bleibende Breite braucht.

Gruß

[pcartist]

Hallo dhe,

vielen Dank für Deine Arbeit an der Erweiterung.

Ich habe den Slider in der Version 0.0.1 alpha2 Build 9 in meiner Contao Installation 2.11.7 eingebaut.
Nun scheint es so, als würden die Steuerelemente und auch der Pager die Content Elemente "wrapper start und wrapper end mitzählen.

Ich habe in meinem Slider insgesamt 8 Contentelemente eingebaut. Der Pager zeigt in der vollständigen Ansicht die Zahlenreihe 1 bis 9 an und in der verkürzten Ansicht am Beginn "0 von 9". Bei den Steuerelementen verhält es sich ähnlich. Den Link für das nächste Element muss man zwei mal auslösen, um den Slider in Bewegung zu versetzen und bei dem letzten Element wird der Link nicht mehr von jQuery abgefangen und man landet auf der Startseite.

Weitere Infos oder einen Link zur Installation gebe ich Dir sehr gerne.


Viele Grüße!

[dhe]

Hm, komisch, kann ich momentan nicht reproduzieren. Sowohl die 0.0.1 als auch die 0.1.0 läuft normal.

Schick mir mal den Link zu der Seite. vll sogar ein Login? :P

Gruß

[Bully]

Hallo zusammen

Ich habe eine Frage zu dieser Erweiterung, die ich super-interessant finde.

Ich möchte die Extension im Header benutzen. Allerdings möchte ich nicht, dass der Slider jedesmal beim Neuladen einer Seite / wechseln zu einer anderen Seite wieder am Anfang anfängt, sondern einfach weiterläuft, sich also nur der Content 'unten drunter' ändert.

Die Erweiterung ist noch nicht installiert, ich möchte das gerne vorab abklären

Ich hoffe, es hat noch keiner gepostet und ich habs beim durchforsten des Threads übersehen, also bitte verzeiht, falls das schon jemand gefragt hat.

Liebe Grüße
Bully

[dhe]

Puh, das ist schwierig.
Also das es genau an der gleichen Position ist, geht nicht. (z.b. der 3 Slide zu 50%)

Das einzige, was ich mir so ad-hoc vorstellen kann, ist der komplette Slide, also als Zahl (z.B. 3).

Was ich mir vorstellen könnte, wäre eine Kombination aus der Callback Funktion (onBeforeSlide oder onAfterSlide), mit der du in ein Cookie den aktuellen Slide als Nummer einträgst und der Möglichkeit, den Startslide vorzugeben.

Dann musst du die Erweiterung inputvar installieren (weiß grad nicht, ob die für 3.0.* schon freigegeben ist) und könntest dann mit {{cookie::COOKIENAME}} den Wert auslesen und in den Einstellungen bei "Startslide" eintragen.

Hm, während ich das so schreibe, denke ich grad, wenn das funktionieren würde, wäre das echt Bombe

Berichte von deinen Ergebnissen.

Gruß

[Bully]

Ich schau mal, ob ich's hingebogen krieg und poste dann die Ergebnisse
Danke in jedem Fall für die Inspiration, da hätte ich selbst gar nicht dran gedacht

Und - einfach nur das 'aktuelle' Bild merken reicht völlig. Geht ja nur drum, dass es net immer bei 0 anfängt.

[Bully]

Hmm, da hab ich leider ein bissl zu früh gebrüllt.

Das Angebot mit dem 'ich probiers mal' ziehe ich zurück, weil schau mal, ich hab das hier gefunden:
https://contao.org/de/extension-list...000009.de.html dk_caroufredsel

Und der macht einfach irgendwie schon genau das, was ich brauche

Trotz allem fand ich deine Idee sehr gut, und wäre ich nicht auf den fredsel gestoßen, hätte ich es wahrscheinlich mehr oder weniger so realisiert, wie du es vorgeschlagen hast.

Liebe Grüße
Bully

[mapfei]

Hm, die beiden div's werden automatisch vom Javascript erzeugt, hat also damit nichts zu tun.

Ich werd mir das mal anschauen, ob bei auf v3.0.3 alles läuft.
Kannst du über die Pagination zu den einzelnen Slides wechseln?

Habe auch heute auf 3.0.3 aktualisiert und habe npslider Version 0.1.0 alpha2 am laufen. Bei mir fehlen jetzt auch die Vor/Zurück-Steuerungselemente. Idee?

Gruß,
mapfei

[derRenner]

Habe auch heute auf 3.0.3 aktualisiert und habe npslider Version 0.1.0 alpha2 am laufen. Bei mir fehlen jetzt auch die Vor/Zurück-Steuerungselemente. Idee?

Gruß,
mapfei

Hallo,

hab grad nochmals geguckt - mit der gleichen Konstellation kann ich bei mir keinen Fehler feststellen.
Aber schau mal hier:
https://community.contao.org/de/show...l=1#post243146
da wurde festgestellt, dass nach dem Update die Felder für Pause und Geschwindigkeit leer waren, und die evtl. den Fehler verursacht haben könnten ...

[dhe]

Hast du auch ein schließendes Slider Element am Schluss eingefügt?

[kischd]

Habe heute mal meine Seite auf dem IE8 angeschaut.

Wenn ich dann auf die Navigation des sliders klicke verschwindet der Inhalt.
An was könnte das liegen?

[dhe]

Puh,
hast du vielleicht einen Link, wo man sich das anschauen könnte?
Das kann beim IE an allem liegen, aber eigentlich funktioniert der Slider mit dem IE ab Version 7.

[derRenner]

Habe heute mal meine Seite auf dem IE8 angeschaut.

Wenn ich dann auf die Navigation des sliders klicke verschwindet der Inhalt.
An was könnte das liegen?

Hallo,

hab grad auch bei meiner Seite geguckt - wobei ich nur den DokumentenmodusIE8 bzw. IE7 aus dem IE9 raus ausprobieren konnte - aber ich kann dieses Verhalten nicht feststellen. Die Klicks auf die Vor- und Zurück-Tasten bringen das Ergebnis, das es bringen soll

[dhe]

Wir haben den Fehler gefunden:
In der CSS Anweisung für .pager-link wurde ein behavior: url('assets/css3pie/1.0.0/PIE.htc'); eingebaut, um CSS3 Funktionen für den IE<9 bereitzustellen.

Der IE rendert aber daraus eigene VML Objekte, die natürlich in den DOM eingebaut werden.
Der Pager zählt die Elemente und hat dadurch doppelt soviele Elemente wie der Slider und somit stimmt die Zuordnung nicht mehr.

fehler-ie-slider.JPG

Tipp an alle: Verwendet solche Zusatzscripte nur im Notfall. Ihr seht, was dadurch entstehen kann. Hat jetzt bestimmt mehrere Stunden gedauert und kann somit viel Geld kosten

Gruß

[Hoch-3]

Guten Abend

Gibt es eine Möglichkeit den Slider in einer Nachrichtenliste laufen zu lassen? In den Nachrichtenartikeln (contao 3.0.3) habe ich einzelne Elemente erfasst. Ein Text und zwischen Slider-Start und Slider-Ende einige Bilder, die neben dem Text geslidet werden sollen (mit vor- und zurückblättern). Geht das überhaupt?

Danke schön schon mal.
Und Gruss aus Zürich

[dhe]

Ich frag noch mal nach: willst du den Slider nutzen, um in einer Nachrichtenliste die einzelnen News Teaser durchlaufen zu lassen oder auf der Detailseite einen Slider einbauen?

[Hoch-3]

Hallo dhe. Danke der Nachfrage.

Was ich möchte ist einzelne Bilder die ich als Elemente einer Nachricht zugeordnet habe, in einem Slider anzeigen lassen.

Falls unklar ausgedrückt hier nochmals etwas ausführlicher:

Ich habe eine Nachrichtenliste. Da werden die Informationen aus dem Kopfelement angegeben.

Im Backend sind pro Nachricht neben den Kopfelement ein Textelement und ein bis unendlich Bildelemente erfasst.

Auf der Detailseite erscheint der Text links (mittels css-Klasse gesteuert) und rechts sollen die Bildelemente durchgeslidet werden. Mit Pfeilen und Navipunkten.

Ich habe schon verschiedene Slider versucht einzubauen, fürchte aber irgendwie, dass das bei Nachrichtenelementen nicht geht.

[dhe]

Also ich hab mal in einer News den Slider einbaut (siehe Screenshot) und auf der Detailseite funktioniert das wunderbar.
Kann dir jetzt nicht genau sagen, wo es in deinem System hakt.

Gruß

[Hoch-3]

Hmmm. Genau so siehts bei mir aus. Die Eingabe der Daten ist eher nicht das Problem, wobei bei den Einstellungen des Sliders noch einiges einzustellen ist.

Das Problem liegt bei der Ausgabe. Wie kann ich den Slider im Modul für die Detailansicht einbinden?

Ich dachte an ein Modul für den Text und ein Modul für die Bilder, aber wie?

[dhe]

Hast du auch eine Seite angelegt, auf der das Modul "Nachrichtenleser" eingebunden ist?
Auf diese (neue) Seite musst du auch in den Einstellungen des Archivs unter "Nachrichten" als Weiterleitungsseite angeben.

Gruß

[dhe]

UPDATE
Nachdem der Slider nun ein halbes Jahr läuft und die Kinderkrankheiten beseitigt sind, habe ich heute (27.2.2013) den Status auf "stable" gesetzt.
Es unterscheidet sich funktional nicht zur alpha.

Roadmap
Die nächste Version wird die 3.0.0 sein, um eine Angleichung an Contao zu schaffen.
In dieser Version werde ich auch die neue Version des bxsliders integrieren, die dann komplett responsive ist.

Gruß

[beckso]

Hi ich habe den npslider in Version 0.1.1 unter Contao 2.11.2 installiert. Soweit klappt auch alles in Chrome und IE, doch komischerweise gibt es Probleme im Firefox.
Im Firefox ist das bx-window (position:relative; overflow:hidden; width:936px nach rechts verschoben. Der umschließende bx-wrapper (width:936px; position:relative sitzt an der richtigen Stelle. Woher kann der Fehler kommen? Ich finde es ungewöhnlich, dass es nur im FF auftaucht ...


EDIT:

Habe es nun über position:absolute; gelöst.

[Ich_kanns]

Hi,
habe npslider Version 0.0.1 alpha2 build 9 installiert.
möchte jetzt 2 sichtbare Slides und 1 bewegtes Slide auf meiner Seite haben.
Wie bekomme ich zwischen den beiden Slides einen gleichbleibenden Abstand hin.
Bei mir verschieben sich leider die Slides immer weiter.

Schon mal danke

[dhe]

Ja, das ist schon etwas tricky,
Da muss man (noch) etwas tricksen.

Die einzelnen Slides dürfen keinen Abstand ({margin: werte}) haben, da sonst die Berechnung der Animation nicht mehr stimmt.

Wie macht man das? Per Mathematik (igitt, ich weiß)

Angenommen deine Bühne ist 200px breit (und X px hoch) und deine Slides 100px breit, dann passen 2 Slides gleichzeitig auf die Bühne.
Damit ein Abstand zwischen den Slides entsteht, müssen der Inhalt eines Slides um den Wert kleiner sein, der als Abstand fungieren soll.

Wenn ich also 10px Abstand haben will, darf der Inhalt nur 90px breit sein.


Warum noch tricksen? Falls ich endlich mal Zeit habe, mich an die neue Version zu machen, kann man den Abstand als Parameter in den Einstellungen festlegen. Ich hoffe, ich komme bald dazu.

Gruß

[Ich_kanns]

Danke,
ich bin begeistert, das die Lösung doch so einfach war.
Freue mich schon auf die neue Version.

[derRenner]

Hallo dhe,

ich denke, es gibt da einen kleinen bug ...
folgende Konstellation:
Bühnenverhalten - 3 sichtbare Slides und Anzahl bewegte Slides 1
Gesamt habe ich 5 Bilder eingebunden, jeweils mit Bildunterschrift
Die Bildunterschrift habe ich wie folgt angesprochen:

#npslider-193 .caption { 
position:absolute; 
top:352px; 
display:block; 
margin-left:140px;
background: url(images_css/bg_RGBfff_05.png) repeat; 
font-size:24px; 
color:#000;
width:auto !important; 
padding:6px 20px 6px 20px; }

Eigentlich klappt ja alles wunderbar - DANKE an dieser Stelle für den Slider!!

Aber jetzt ist mir aufgefallen, dass im IE7 und im IE-Modus des Chrome-Browsers (ist ein PlugIn) die Bilderunterschriften falsch angezeigt werden. Soll heissen, dass die Bilderunterschrift des Bildes 1 im Bild 2 angezeigt wird. Die Bildunterschrift des Bildes 2 in Bild 3 usw.
BILD01 Bildunterschrift 01 ==> Bildunterschrift wird in Bild02 angezeigt
BILD02 Bildunterschrift 02 ==> Bildunterschrift wird in Bild03 angezeigt
....
BILD05 Bildunterschrift 05 ==> Bildunterschrift wird in Bild01 angezeigt

Bei anderen Browsern (auch IE8 und IE9) konnte ich dieses Verhalten nicht feststellen.
Liegt's an meinen CSS-Anweisungen? Oder ist das mit dem Slider in Verbindung zu bringen?


Grüsse
Bernhard

[kubjo]

Eine kurze Frage: Kann man bei diesem slider ein ganzes Verzeichnis als Bildquelle anstatt einzelnen Bildern angeben?

Grüße aus Ludwigsburg
JK

[dhe]

Herrje,
man merkt, dass Wochenende ist

@derRenner: hast du eine Online Demo? Das Verhalten tritt nur im IE7 auf und in keinem richtigen Browser?

@kubjo: Hm, noch nicht, ist aber ne coole Idee, ich werd das in die Roadmap für die 3.0.0 aufnehmen. Dann muss nicht deswegen eine weitere Extension installieren.

[derRenner]

dhe, hast Post!
Also, ich hab's im IE9 im IE7-Modus getestet. Im IE8-Modus sehe ich das Problem nicht.
Und im Chrome-Browser im IE-Tab

Grüsse
Bernhard

[kubjo]

Danke!

Grüße aus Ludwigsburg
JK

[dhe]

Liegt's an meinen CSS-Anweisungen? Oder ist das mit dem Slider in Verbindung zu bringen?

In der Tat ein seltsames Verhalten. Aber absolute Positionierung von Divs in veränderten DOM-Elementen hat den IE schon aus dem Konzept gebracht.

Mein Vorschlag. Versuch mal, dein .caption Div über negativen Margin nach oben zu verschieben, das müsste funktionieren.

#npslider-193 .caption {
display:inline-block;
margin:-50px 0 0 140px;
background: url(images_css/bg_RGBfff_05.png) repeat;
font-size:24px;
color:#000;
padding:6px 20px 6px 20px;
}

Gruß

[derRenner]

Hallo dhe,

DANKE für deine Antwort - leider klappt das Positionieren mit dem margin nicht. Scheint so, als ob sich die caption maximal bis zum Bilderunterrand schieben lässt und dann nicht weiter kann ... Habe auch ein wenig im I-Net gesucht, habe aber leider keine sinnvolle Lösung gefunden - die Beispiele für meinen Fall lösen das eigentlich "alle" mit position:absolute;
Was mir noch aufgefallen ist: im IE7 wird der horizontale screen eeeeeeewig breit - erkennt man dann am Scrollbalken. Bleibt dann auch so breit, wenn ich das caption wegnehme - also vermute ich, dass es doch am Slider liegt, dass hier irgendwas nicht korrekt errechnet wird? Ist aber nur eine Vermutung

Grüsse
Bernhard

[gorti]

Hi

Danke erstmal für die gelungene Contao-Version dieses Sliders.
Gibt es die Möglichkeit den adaptiveHeight-Wert zu definieren. Es wäre sehr toll wenn sich der Slider wie im Bsp. http://bxslider.com/examples/slideshow-adaptive-height
je nach Bildhöhe anpassen würde.

Grüsse
gorti

in 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
• Anpassung der Anzahl gleichzeitiger angezeigter und bewegter Slides im BE möglich

Installation:

1. Auswahl Elementtyp "Slider"
2. Start-Element einfügen
3. Größe 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

Roadmap für Version 3:

• Callback Funktionen wieder entfernen ? -> Bitte eure Meinung dazu
• Responsive Design
• Touch enabled (für Smartphones und Tablets)

[dhe]

Hallo gorti,
ja diese Einstellungsmöglichkeit wird in der neuen Version von npslider mit integriert.

[gorti]

Hallo gorti,
ja diese Einstellungsmöglichkeit wird in der neuen Version von npslider mit integriert.

Cool, gibts schon einen Releasetermin?

Danke nochmals für die Extension!

[dhe]

Nachdem ich jetzt wieder etwas Luft habe, hoffe ich, dass ich am Wochenende ein gutes Stück voran komme, um dann im Laufe der Woche die Version 3 ins ER zu stellen.

Ich habe jetzt meine Vorüberlegungen abgeschlossen und bin zu folgenden Ergebnisse gekommen:

1. Ich verzichte auf eine Migration von v1 auf v3. D.h. die Inhaltselemente müssen nach dem Update neu angelegt werden, da doch ein paar Datenbank spezifische Änderungen vorgenommen werden
2. Der Slider bekommt seine eigene Rubrik in den "Elementtyp" Liste, da...
3. es eigene Inhaltselemente für eine ganze Galerie, News und Events geben soll, die ich aber erst beim nächsten Update ausliefere
4. Ein CSS Preset wird es erst mit dem nächsten Update geben, um ein schnelles Release zu ermöglichen.

Gruß

[Schnippel]

Hi,

suche grad nen passenden Slider, der sowas hier darstellen kann:
(großer Slider im oberen Bereich)

http://www.meister.com/de/home.html

Folgend Details wären ideal:

- Punkte unten links im Bild für die Bildanzahl und welches aktuell angezeigt wird
- die VOR - ZURÜCK Pfeile links und rechts des Sliders
- das aufgehen eines Textblocks, wenn man drüberfährt (wie links unten im Beispiel zu sehn ist)

[dhe]

Hi Schnippel,
die Punkte 1 und 2 sind ohne weiteres Zutun so mit dem npslider möglich.
Bei Punkt 3 musst CSS und Javascript heranziehen.

[gorti]

Perfect! Ich treffe doch immer wieder auf Situationen wo mit hoch- und querformatige Bilder gearbeitet wird.

Grüsse
gorti

Nachdem ich jetzt wieder etwas Luft habe, hoffe ich, dass ich am Wochenende ein gutes Stück voran komme, um dann im Laufe der Woche die Version 3 ins ER zu stellen.

Ich habe jetzt meine Vorüberlegungen abgeschlossen und bin zu folgenden Ergebnisse gekommen:

1. Ich verzichte auf eine Migration von v1 auf v3. D.h. die Inhaltselemente müssen nach dem Update neu angelegt werden, da doch ein paar Datenbank spezifische Änderungen vorgenommen werden
2. Der Slider bekommt seine eigene Rubrik in den "Elementtyp" Liste, da...
3. es eigene Inhaltselemente für eine ganze Galerie, News und Events geben soll, die ich aber erst beim nächsten Update ausliefere
4. Ein CSS Preset wird es erst mit dem nächsten Update geben, um ein schnelles Release zu ermöglichen.

Gruß

[Schnippel]

ich hab kleine Pfeil-PNG`s erstellt und eingebunden.
Sie erscheinen am linken unteren Rand der Slideshow.
Wie kann ich die an die gewünschte Stelle positionieren?
Muß ich dazu "Eigener Container für Steuerungselemente vergeben" verwenden
und dann mittels eigenem CSS positionieren?

Und wie lassen sich beim Pager Punkte einfügen statt der Zahlen?