j_slider Steuerung ändern. Nur Punkte?!? (Content-Slider)

[AndiK]

Hallo,

mein bordeigener Content-Slider funktioniert eigentlich prima:

Bildschirmfoto 2013-08-05 um 18.27.10.JPG

Was ich nicht verstehe: Wie kann ich statt der Punkte andere Zeichen als "Slider-Control" verwenden?

lg
Andi

[derRenner]

Hallo,

ich kenne den angesprochenen Slider zwar nicht, aber diese Punkte (Pagination) kannst du in der Regel via CSS direkt ansprechen und stylen.

[AndiK]

Ich spreche vom Contao Content-Slider, der als Element in Contao mitgeliefert wird.

Wie kann ich denn da konkret die Pagination ändern?

[wulf]

das symbol lässt sich nur durch anpassung der swipe.min.js im ordner /assets/swipe/2.0/js/ ändern.
in der swipe.js ab zeile 101

 // dot navigation
    for (var i=0; i<slides.length; i++) {
      var b = document.createElement('b');
      b.innerHTML = '•'; //hier ändern
      b.setAttribute('data-index', i);

[AndiK]

Ahhh! Super! Genau das hatte ich gesucht!
Dankeschöööön!

[AndiK]

Hmm, Änderung habe ich gemacht, aber es tut sich nix.

Wann wird denn das swipe.min.js erzeugt?

Geht das automatisch, oder muss ich da ein Script oder ähnliches von Hand starten?

[wulf]

wo hast du die änderung gemacht ? sie muss in der swipe.min.js erfolgen. alternativ kann man aber auch die swipe.js bearbeiten und selber komprimieren. das ganze ist natürlich nicht update-sicher.

[AndiK]

Ich bin aber auch ein Blindfisch! Ich hab den betreffenden Code einfach nicht in der swipe.min.js gesehen.

Alles gut. Funktioniert einwandfrei!

Nochmals vielen Dank!

lg
Andi

[werbeschmiede]

Hallo, schön dass ich da was zu diesem internen Slider gefunden habe. Kann ich in diesem Skript (swipe.min.js) auch Zeiteinstellungen vornehmen? Mir geht der Übergang viel zu schnell und möchte das gern etwas langsamer machen.
Ich freue mich über eine Antwort!

[Tompaianer]

Du stellst doch Slide-Intervall und Übergangsgeschwindigkeit im Elementtyp "Umschlag Anfang" in den Slider-Einstellungen ein.

[werbeschmiede]

Du stellst doch Slide-Intervall und Übergangsgeschwindigkeit im Elementtyp "Umschlag Anfang" in den Slider-Einstellungen ein.

Also ab und an steh ich soooo auf dem Schlauch - tut mir Leid für diese doofe Frage! Danke dir! :-)

[bird]

Hat sich zufällig schon mal jemand damit beschäftigt, wie man statt der Punkte unterschiedliche Texte in der Navigation ausgeben kann?
b.innerHTML in einer weiteren Schleife per JS ersetzen?

[contao100]

Habe ebenfalls den j_slider im Einsatz. Allerdings würde ich gerne den Data-Index des angezeigten Bildes ausgeben.

Da man per CSS lediglich das .active-Element ansprechen kann, bleibt die Frage wie ich das Template umbauen müsste, so das stets der Index ausgegeben wird.

Vielen Dank!

Als Beispiel folgendes Bild: beispiel.png

[pepesale]

...ist zwar ein ganz alter Thread, aber ich habe auch eine Weile nach einer Lösung gesucht, um anstatt der Bullets fortlaufende Nummern der Bilder unter dem Slider zu zeigen.

Meine Lösung:
Ich habe im Seitenlayout unter "Eigener Javascript-Code" ein paar Zeilen eingefügt:

<script>
window.addEvent('domready', function() {
var nr = 1;
	$$('.slider-menu b').each(function(el) {
		el.set('html', nr++);
	});
});
</script>

Das ist jetzt die Mootools-Variante, mit jQuery sollte es ähnlich gehen.
Ist updatesicher, da ich nicht direkt in der swipe.js Veränderungen vorgenommen habe.

Christoph

[Andreas]

LOL, gute Idee. Hätte ich glaube ich mit CSS :before gemacht. Aber so bist du flexibel weil der Anzahl der Punkte dann keine Grenzen gesetzt sind.

Schau dir mal den neuen JS-Wrapper in Templates von Contao an, die sind extra optimiert, damit man jQuery und MooTools gleichzeitig benutzen kann.

(function() {
  window.addEvent('domready', function() {

    // ...

  });
})();

Alter Thread? Da musst du erstmal die Threads von 2007 sehen

[kleinemann]

Vielen Dank für das kleine Javascript. Hat mir sehr geholfen!
Weiß vielleicht jemand, wie ich anstatt der letzten Zahl ein Wort ausgeben kann? Die Slider-Navigation soll also bei 3 Bildern + 1 Text dann wie folgt aussehen "1 2 3 Info".
Ich kann leider (fast) kein Javascript.

[Samuell]

Dann greif doch Andreas Vorschlag auf und nimm CSS, bzw. das Pseudoelement :before.

[Andreas]

Mit JS (jQuery)

(function($) {
  $(document).ready(function() {

    var
      lastText     = 'info',
      slideButtons = $('.slider-menu b'),
      slideAmount  = slideButtons.length
    ;

    slideButtons.each(function(index) {
      $(this).text(index + 1);
      if(index === slideAmount - 1) {
        $(this).text(lastText);
      }
    });

  });
})(jQuery);

Mit CSS (nur ein Ansatz)

.slider-control b {
  display: inline-block;
  position: relative;
  width: 88px;
  height: 44px;
  overflow: hidden;
  text-indent: -44px;
  background: pink;
}
.slider-control b::before {
  content: '1';
  position: absolute;
  width: 88px;
  height: 44px;
  left: 0;
  top: 0;
  line-height: 1;
  text-indent: 0;
  text-align: center;
  background: peru;
}
.slider-control b:nth-child(2)::before {
  content: '2';
}
.slider-control b:nth-child(3)::before {
  content: '3';
}
.slider-control b:last-child::before {
  content: 'info';
}

[kleinemann]

Wow! Vielen vielen Dank! (Contao-Community - da werden Sie geholfen)

Ich habe das Javascript eingebaut und es funktioniert auf Anhieb! So schnelle Hilfe habe ich echt nicht erwartet. Wann schläfst du eigentlich?
Ich hoffe, daß ich anderen Contao-Usern auch mal so hilfreich zur Seite stehen kann...

Gibt es eigentlich eine einfache Möglichkeit den Übergangseffekt selber zu gestalten, z.B. ein Fade? Oder muß man dafür auch in die Javascript-Schatzkiste greifen? Ich habe bisher keine genauere Dokumentation zu dem Contao-Slider gefunden.

[Andreas]

Ja, stimmt, ich muss auch mal wieder schlafen, fast vergessen.

Der Slider ist der Swipe von Brad Birdsall https://github.com/contao/core/blob/....0/js/swipe.js

Such mal die Entwicklerseite, ob er da vielleicht Optionen für den Slider anbietet. https://github.com/thebird/Swipe

[dawson]

Ich hol das Thema leider nochmal hervor, weil ich an einer ähnlichen Anpassung für den Swipe-Slider hängen bleibe.

Ich würde gerne den kompletten Slider (also das DIV drum herum) unsichtbar machen (via CSS display:none).
In einem anderen DIV (Bereich der Homepage) würde ich dann gerne einen Aufruf zu diesem DIV (Slider) machen und zwar als Lightbox.
Soweit klappt das schon mal. Der Slider öffnet sich in einer Lightbox-Variante.

Jetzt möchte ich in dem DIV, in dem der Link zum Öffnen des Sliders ist aber nicht nur einen Link zum Slider haben sondern je Slide einen Link und als Link-Text einen Namen, der in dem Slide (Contao-Element) enthalten ist verwenden.
Ein Slide besteht aus Name, Vorname, Bild und Info-Text über die Person.
Die Links zur Slider-Lightbox sollen nun folgendermaßen aussehen:

Max Mustermann - Maria Callas - Tom Jones

Jeder Name ein Link auf den Slider, auf den jeweiligen Slide.
Also im Prinzip eine ausgegliederte Variante des Punkte-Menüs mit anderen Text.
Klingt komplex - ist es auch, zumindest für mich, weil ich von jquery wenig Ahnung habe - zumal ich in der swipe.js nicht allzu viel herauslesen kann, welche JS-Funktion so ein Swipe-Navigations-Punkt aufruft.

Vielleicht kann mir hier einer weiter helfen.
Danke schon mal.

[Andreas]

Ich habe in dem Post darüber mal den Link zum Entwickler hinzugefügt, dort findest du die Options und auch einige Funktionen, z.B.

slide(index, duration) slide to set index position (duration: speed of transition in milliseconds)

Ansonsten sieht das für mich eher wie ein Auftrag aus, wenn du es selbst nicht hingebogen bekommst.

[bird]

Hat sich schon mal jemand mit der Callback-Funktion des Sliders (swipe.js) beschäftigt? Ich würde gerne je nach Slide die CSS-Klasse eines DOM-Elements manipulieren.
Der Aufruf soll bspw. erfolgen, sobald Slide x sichtbar wird und danach soll die Klasse wieder entfernt werden.

[Andreas]

Probier doch einfach mal aus

/* JS */
// ...
callback: function(index, elem) {
  if(console && console.debug) {
    console.debug('test');
    console.debug(index, elem);
    console.debug(index);
    console.debug(elem);
    console.debug(getPos(elem));
  }
},
// ... 

F12 für Konsole im Firefox.

[Andreas]

Nochmal, weil getPos() wirklich schwierig ist, da Contao die Klassen immer so aufsetzt
new Swipe();
Mit
mySwipe = Swipe();
geht das einfacher

/* JS */
(function($) {
  $(document).ready(function() {
    $('.ce_sliderStart').each(function(i, cte) {
      var s = $('.content-slider', cte)[0],
          c = s.getAttribute('data-config').split(',');

      // new Swipe(s, {
      mySwipe = new Swipe(s, {

        // Put custom options here
        'auto': parseInt(c[0]),
        'speed': parseInt(c[1]),
        'startSlide': parseInt(c[2]),
        'continuous': parseInt(c[3]),
        'menu': $('.slider-control', cte)[0],

        callback: function(index, elem) {
          if(console && console.debug) {
            //console.clear();
            console.debug(mySwipe.getPos());
          }
        }

      });
    });
  });
})(jQuery); 

[bird]

Vielen Dank Andreas, ich habe im Swipe.js Forum einen ähnlichen Ansazt gefunden.
Man kan sogar direkt den Index-Wert verwenden und muss die aktuelle Slide nicht mittels getPos() ermitteln:

'callback': function(index, elem) {  
              if(index == xy){
                 ...
                  } 

[Andreas]

Ah, super. Dann braucht man getPos() wohl nur, wenn man das von außerhalb beobachten möchte.

Aber schon blöd, diese Instaziierungen ohne Variable, so hat man glaube ich keine Möglichkeit mehr, das Object nochmal anzufassen. Das habe ich schon öfters in Skripts von Contao als ärgerlich empfunden.