[npslider] Ein responsive jQuery Slider für Inhaltselemente

[dtptiger]

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.

Da ich den Inhaltselementslider auch verwende und weg. der Transparenz, klinke ich mich kurz ein und meine:

Da Browser/Betriebssystem Kombinationen mit Transparenzen und anderen CCS 3 Anweisungen zu verschieden umgehen, sind Anweisungen dieser Art für GUI Elemente nicht wirklich sinnvoll.

Gruss dtptiger

[dhe]

Da Browser/Betriebssystem Kombinationen mit Transparenzen und anderen CCS 3 Anweisungen zu verschieden umgehen, sind Anweisungen dieser Art für GUI Elemente nicht wirklich sinnvoll.

Ich sehe das auch so. Mit einer solchen Einstellung macht man glaub mehr Baustellen auf, als welche zu schließen. Ich schau jetzt erstmal nach dem Bug wegen der Navigation.

Gruß

[akira]

OK. Eben, war auch nur so mal eine Idee / Vorschlag

[dhe]

bäm... in der Tat ein Bug. Schau ich mir an...
Gruß

Getan und behoben. 0.1.0 alpha2

Gruß

[derRenner]

Hallo dhe,

den einen Bug behoben, einen anderen "eingebaut"?

seit der Aktualisierung auf alpha2 zeigt der Slider die Bilder nach dem Auffrischen der Seite
nicht mehr an. Wenn ich mich neu auf eine Seite klicke, dann funktioniert der Slider wie
gewohnt. Wenn ich dieselbe Seite aber mit Aktualisieren/Auffrischen/F5 aktualisiere, werden
die Inhaltselemente nicht mehr angezeigt.
Ich habe einen Rahmen rund um den Slider ... somit sieht man nur mehr den Rahmen - dieser
ist aber "zusammengequetscht" auf zweimal die Rahmenbreite, also nur noch Strich zu
sehen.

Ist mir bislang nur im Chrome aufgefallen - Firefox, IE9 und Opera stellen das korrekt dar.

Passiert bei der Animationsart: Überblendeffekt und Vertikel - bei Horizontal funktioniert es weiterhin.

[dhe]

Fehler ist behoben - .htaccess hatte im Paket gefehlt.

Gruß

[derRenner]

*daumenhoch* - funktioniert wieder - DANKE!

[Stefan Brem]

Habe mir gerade den Slider installiert und finde ihn klasse. Ich versuche gerade alle Mootoolserweiterungen durch jQueryerweiterungen zu ersetzen. Dazu habe ich eine Anregung für deinen Solider. Wäre es den möglich eine Funktion hinzuzufügen, ähnlich wie bei NoobSlider, die es ermöglicht die News so konfortabel in den Slider zu integrieren?
Danke für die Erweiterung! Gruß Stefan

[akira]

Supi, Danke. Klappt jetzt bestens. Danke für das schnelle Beheben!

Mir ist nur noch ein kleiner Schönheitsfehler aufgefallen.
Gruss Akira

Bildschirmfoto 2012-11-26 um 12.42.47.png

[ktkt]

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?

Vielen Dank für die Hilfe. Hab den Tickermodus probiert, Pause geändert, Animationsmodi geändert, hat alles nichts gebracht. Ich denke, dass ich da was unglaublich dämliches falsch gemacht hab - aber ich komm nicht drauf. Dabei ist mir der Slider sympatischer als Galleria und mindestens so sympatisch wie slideitmoo

1. Kannst du mal einen Screenshot vom generierten Quellcode posten? Also nachdem das jquery framework und das script greift (geht über firebug oder chrome inspector)kann?

Hilft dir dieser Screenshot weiter?

[dhe]

Hallo ktkt,
ja der Screenshot hilft mit weiter...

2 Sachen können der Auslöser sein:

1. Du hast kein jQuery aktiviert
2. Du hast MooTools am Laufen. Das verträgt sich nicht mit jQuery.

Der generierte Quellcode sollte so aussehen.
npslider.JPG

Gruß

[ktkt]

Hallo ktkt,
ja der Screenshot hilft mit weiter...

2 Sachen können der Auslöser sein:

1. Du hast kein jQuery aktiviert
2. Du hast MooTools am Laufen. Das verträgt sich nicht mit jQuery.

Der generierte Quellcode sollte so aussehen.
npslider.JPG

Gruß

aaah... vielen Dank. Hab mootools und jquery aktiviert, ich werds mal ohne moo testen.

[dhe]

hehe alles klar.

Aber ne gute Idee, den Slider "jQuery noConflict Modus" tauglich zu machen...

[Georgi]

Habe mir gerade den Slider installiert und finde ihn klasse. Ich versuche gerade alle Mootoolserweiterungen durch jQueryerweiterungen zu ersetzen. Dazu habe ich eine Anregung für deinen Solider. Wäre es den möglich eine Funktion hinzuzufügen, ähnlich wie bei NoobSlider, die es ermöglicht die News so konfortabel in den Slider zu integrieren?
Danke für die Erweiterung! Gruß Stefan

Auch ich habe diese Frage, da ich auf der 2.11.6 den newticker einsetze, der aber unter 3.0.0 nicht funktioniert. Ein Newsticker ist für unsere Verbandsseite zwingend, sodass ich nicht mit der 3.0.0 an den Start gehen kann.
Ob es eine Anpassung der bisher eingesetzten Erweiterung gibt, ist mir nicht bekannt und auch nicht ersichtlich.
Gruß Georgi

[matzbatz]

Hallo! Ich habe eine Frage.
Ich habe den Slider installiert (super übrigens!). Habe ihm eine Breite und Höhe gegeben und meine Fotos genau auf diese Werte skaliert! Jedoch ist jetzt auf der linken Seite des Sliders ein Balken und die Fotos dadurch nicht randlos!
Hat jemand eine Idee woran dies liegt?
Zum verdeutlichen ein Foto:
Bildschirmfoto-2012-12-15-um-12.35.jpg

[dhe]

Hi
Erstmal danke für das Lob.

Dein Problem ist ein reines CSS Problem.
Du musst der CSS Klasse .image_container noch ein margin:0; verpassen.
Am besten so

.ce_slider .image_container {margin:0;}

Gruß

[dhe]

Übrigens: Ich habe mir Gedanken zu dem Wunsch der News Erweiterung gemacht und bin zu dem Schluss gekommen, dass ich das nicht umsetzen werde, da man sowas relativ einfach über das Modul Auflistung machen kann und zweitens bei einem sehr großen Newsarchiv (ab 10 Meldungen) der Slider doch relativ groß werden würde. Das widerspricht sich mit meiner Auffassung eines Sliders.

Einzelne News kann man ja per InsertTag {{news::*}} einbetten.

Ich habe den Slider so umgebaut (bzw angepasst), dass er nun im noConflict()-Modus funktioniert.
Der nächste Schritt wird der Einbau der v3 des bxsliders sein, der dann responsive sein wird.

Gruß
dhe

[kischd]

Hallo dhe,
ich habe deinen npslider im Einsatz. Tolle Erweiterung danke dafür.
Dein letztes Update sollte jetzt MooTools zusammen mit jQuery laufen oder?

Ich hab das Update durchgeführt leider, funktioniert meine function.js mit beiden geladenen Biblioteheken nicht.
Gibt es da noch etwas damit ich das beheben kann?

[kischd]

Google machts möglich:
anstatt $ einfach document.id

dann klappts ;-)

[kischd]

Wie kann ich die Navigation mit den Punkten einstellen?
Leider kann ich die Option nicht finden...

[derRenner]

Wie kann ich die Navigation mit den Punkten einstellen?
Leider kann ich die Option nicht finden...

Hallo,

wenn du unter 'Pagination-Einstellungen' das 'Pager einfügen' aktivierst, wird eine Klasse .box-pager hinzugefügt. Dort kannst du die Klassen .pager-link via CSS selbst zu Navigationspunkten formatieren.

[kischd]

Wie erkenne ich am besten die CSS-Klassen? Im Quelltext sind diese ja nicht wirklich angezeigt.
Wenn ich dann auch Position des Pagers: Unterhalb wähle ist die Navigation verschwunden.

[derRenner]

Wie erkenne ich am besten die CSS-Klassen? Im Quelltext sind diese ja nicht wirklich angezeigt.

wenn du mit Firefox als Browser arbeitest, dann kannst du mit der Erweiterung Firebug das Script auslesen, und damit auch die CSS-Stylesheets und die darin enthaltenen CSS-Klassen. Mit Chrome kannst du das z.B. mit dem Firebug-Light oder mit der Konsole (findest du unter Tools - Entwicklertools) auslesen.

Wenn ich dann auch Position des Pagers: Unterhalb wähle ist die Navigation verschwunden.

ich kenne dein Skript nicht, aber evtl. hast du unterhalb keinen Platz (bedingt durch einen Höhenangabe des Sliders), sodass die Pagination sichtbar wäre. Evtl. ist sie "unter" dem darunterstehenden nächsten Element (div).

[kischd]

Firebug kenn ich ;-)

aber ich seh doch von npslider nur

<script>
jQuery(document).ready(function(){
jQuery('#npslider-1').bxSlider({
controls: false,
pager: true,
pagerType: 'full',
pagerLocation: 'bottom',
pagerShortSeparator: '',
// DEFAULTS AT BOTTOM FOR IE Bug
infiniteLoop: true,
startingSlide: 0,
randomStart: false,
hideControlOnEnd: false,
auto: true,
pause: 3000,
autoHover: false,
mode: 'fade',
speed: 1000 });
});
</script>

[derRenner]

scheint so, als wärst du im Reiter 'Skript'
=> wechsle mal auf den Reiter 'HTML' und klick dich da bis zum .ce_npslider durch (siehe Anhang)
Markierst du durch Klick auf die Zeile die gewünschte Zeile, kannst du rechts dann die entsprechenden Styles sehen bzw. abändern. So kannst du auch 'live' sehen, was sich tut, wenn du Änderungen vornimmst.

npslider_fbug.jpg

[kischd]

Danke wieder etwas dazugelernt

[kischd]

Auf der Beispielseite wird der Slider prozentual verkleinert wenn das Fenster verkleinert wird.
Bei mir bleibt da immer alles gleich groß.
Kommt das über ne Einstellung oder nur über CCS?

[dhe]

Auf der Beispielseite von bxslider ist schon die neue Version des Sliders eingebaut, die responsive (passt sich dem Fenster an) ist.
Ich bin auch schon dran, die neuste Version einzubauen.

Gruß

[kischd]

Dankeschön. Dachte schon es liegt an mir

[dhe]

Hallo Leute,
ich wollte nur mitteilen, dass ich zwar an der neusten Version des npslider dran bin, aber z.Zt. nicht die nötigen Ressourcen frei habe, um weiterzumachen.
Ich hoffe aber, in den nächsten Wochen weitermachen zu können

Gruß

[meone]

Vorher liefs. Nu Update auf Contao 3.0.3 gemacht. (npslider 0.1.0 alpha2 Build 9)

Und erstmal sah alles anders aus. Da fiel mir auf das auf einmal im Quellcode .bx-wrapper und .bx-window nicht mehr vorhanden waren (ich gehe mal nicht davon aus, das ich die vorher nur für mich reingemacht hatte), also manuell im Template hinzugefügt.

Aber was das Problem ist... die Pfeile fehlen. Obwohl ich Sie angeklickt habe. Ich kann sozusagen nicht sliden (((

Idee?
Danke.

[dhe]

Da fiel mir auf das auf einmal im Quellcode .bx-wrapper und .bx-window nicht mehr vorhanden waren (ich gehe mal nicht davon aus, das ich die vorher nur für mich reingemacht hatte), also manuell im Template hinzugefügt.

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?

[meone]

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?

Hm okay... habe die Divs aus dem Template dann erstmal wieder entfernt. Dann scheint mit dem JS etwas nicht zu stimmen. Denn wie gesagt bei mir kommen die Divs nicht. Und sowohl die Pfeile aus auch die Pagination kommt nicht.

Aber vorher ging alles? Ich nutze auch mootools auf der Seite, aber das stelle zuvor auch kein Problem dar, erst seit dem Update.

[derRenner]

Hallo,

grad mal geguckt/getestet
Contao 3.0.3
[npslider] 0.1.0 alpha2 build9

sowohl die Pagination (pager) als auch die Steuerelemente werden angezeigt und können ausgeführt werden.

[meone]

Hallo,

grad mal geguckt/getestet
Contao 3.0.3
[npslider] 0.1.0 alpha2 build9

sowohl die Pagination (pager) als auch die Steuerelemente werden angezeigt und können ausgeführt werden.

Danke für deinen Versuch. Habe den Fehler auch nun gefunden. Nach dem Update stand bei mir unter "Pause" & "Geschwindigkeit" nichts mehr (wurde irgendwie gelöscht oO). Und das führte zu einem JS Fehler... Zahlen eingetragen und es ging... .

[kubjo]

Habe ein paar Fragen zur Verwendung des Sliders:

1.) Kann ich auch ein Modul des Sliders erstellen?
2.) Wie kann ich einen ganzen Ordner Bilder einfügen?

Grüße aus Ludwigsburg
Jochen Kubik

[dhe]

Hallo Jochen,
also:

1. Nein, als eigenes Modul geht das nicht, da der Slider ja Inhaltselemente zwischen seinem Start und Stop Element erkennen muss.
   Lösung:
   Am besten deinen Slider und deine Inhaltselemente in einen separaten Artikel packen. Danach ein Modul vom Typ "Eigener HTMl-Code" erstellen und {{insert_article::ARTIKEL_ID}} einfügen. Dann hast du ein Modul
2. Ein interessanter Vorschlag, an dem ich auch schon bisschen knabbere. Das Problem ist, dass Contao um die Galerie Liste noch ein Wrapper div (ce_gallery) drum rum packt, dass irritiert das Script noch. Ich schau mal, wie man das lösen kann.

Ich halte euch auf dem Laufenden.

Gruß

[711MEDIA]

Kann es sein das beim laden alle Bilder angezeigt werden?
Sollten nicht alle Bilder bis auf das erste per js oder css auf display:none gesetzt sein?
schön wäre auch eine active-class auf das gerade aktive sliderelement.

[dhe]

schön wäre auch eine active-class auf das gerade aktive sliderelement.

Stimmt, das kann wirklich mal nützlich sein. Ich schau mal, wie ich das reinbekomme. Das wäre dann der Grund für die 0.1.0 stable

Kann es sein das beim laden alle Bilder angezeigt werden?
Sollten nicht alle Bilder bis auf das erste per js oder css auf display:none gesetzt sein?

Hm, versteh ich nicht ganz. Das <div class="bx-window"> bekommt doch ein overflow:hidden; man sieht also eh nichts, was außerhalb dieses Rahmens positioniert ist...
Oder ich liege komplett daneben.

[operatorone]

Hallo zusammen,

ich habe den slider als Ticker laufen und hätte eine Frage dazu. Ist es möglich die Container auf die Breite des tatsächlichen Inhalts anzupassen? Ansonsten hat man mal große und mal kleine Abstände zwischen den einzelnen Elementen.

Viele Grüße,
operatorone