Zur Navigation

Bilderschau und Bannerwechsel

1 krieger (Gast)

Ich möchte auf meiner Webseite eine Bilderschau und einen Bannerwechsel einfügen. Dazu nutze ich : <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.cycle.min.js"></script>
Habe mal eine Testseite angelegt: http://s201291267.online.de/bilder-schau.htm
Was muss ich in der "jquery.min.js" und in der "jquery.cycle.min.js" ändern damit die Bilder oder Banner von rechts oder links eingeschoben werden ?
Wie muss ich da vorgehen?

22.11.2016 14:40

2 Jörg Kruse

jquery.min.js und der jquery.cycle.min.js sind Bibliotheken und sollten nicht geändert werden.

Die Art der Transiton ist im <script> Abschnitt definiert:

fx: 'fade',

Statt 'fade' kannst du auch noch diese verwenden:

http://jquery.malsup.com/cycle/browser.html

Um sicher zu stellen, dass die in der Dokumentation aufgeführten Transitionen auch wirklich funktionieren, würde ich eine aktuelle Version installieren:

http://jquery.malsup.com/cycle/download.html

22.11.2016 15:14 | geändert: 22.11.2016 15:14

3 krieger (Gast)

Danke!!!

22.11.2016 19:52

... 3 Monate später ...

4 Krieger (Gast)

Ich möchte auf einer meiner Webseiten noch eine Bilderschau einfügen.
Der Bilder wechsel sollte sich nach 120 sec. abstellen. Was muss in dem Script noch eingefügt werden?
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1}    
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 5000); // Change image every 2 seconds
}
</script>

[Edit Jörg: Kursiv-Block durch Code-Block ersetzt]

17.03.2017 09:12 | geändert von Jörg: 17.03.2017 09:19

5 Jörg Kruse

setTimeout(showSlides, 5000); // Change image every 2 seconds

Der Kommentar passt hier nicht zum Code - ich nehme mal an, das Bild soll alle 5 Sekunden wechseln? das heißt, man hat bei 120 Sekunden 24 Bilderwechsel. Ich würde diese einfach mitzählen und showSlides() nur dann wieder aufrufen, wenn die Anzahl der Bilderwechsel die 24 noch nicht erreicht hat

<script>
var numChanges = 0;
var slideIndex = 0;
showSlides();
function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1}    
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";
    numChanges++;
    if (numChanges < 24) {
        setTimeout(showSlides, 5000); // Change image every 5 seconds
    }
}
</script>

noch ein Bitte:

Code-Abschnitte bitte nicht mit dem Kursiv-Button, sondern mit dem Code-Button markieren. Der Code ist dann besser lesbar, u.a. auch weil Einrückungen dann erhalten bleiben :)

17.03.2017 09:43

6 Krieger (Gast)

Danke

17.03.2017 20:41

8 Jörg Kruse

Zur Konfiguration von Flexslider gibt es eine Dokumentation:

https://github.com/woocommerce/FlexSlider/wiki/FlexSlider-Properties

Man könnte hier für die Property "after" eine Funktion definieren, die die Animationen zählt und nach einer definierten Anzahl den Slide abbricht, also in etwa so:

$(window).load(function() {
  var numChanges = 0;
  $('.flexslider').flexslider({
    animation: "slide",
    start: function(slider) {
      $('body').removeClass('loading');
    },
    after: function(slider) {
      numChanges++;
      if (numChanges >= 20) {
        slider.pause();
      }
    }
  });
});

22.03.2017 09:55

9 Krieger (Gast)

Vielen Dank.
Muss ich das Script hier einfügen oder kann es auf der entsprechenden Seite eingefügt werden?

//FlexSlider: Plugin Function
  $.fn.flexslider = function(options) {
    if (options === undefined) options = {};

    if (typeof options === "object") {
      return this.each(function() {
        var $this = $(this),
            selector = (options.selector) ? options.selector : ".slides > li",
            $slides = $this.find(selector);

      if ( ( $slides.length === 1 && options.allowOneSlide === true ) || $slides.length === 0 ) {
          $slides.fadeIn(400);
          if (options.start) options.start($this);
        } else if ($this.data('flexslider') === undefined) {
          new $.flexslider(this, options);
        }
      });
    } else {
      // Helper strings to quickly perform functions on the slider
      var $slider = $(this).data('flexslider');
      switch (options) {
        case "play": $slider.play(); break;
        case "pause": $slider.pause(); break;
        case "stop": $slider.stop(); break;
        case "next": $slider.flexAnimate($slider.getTarget("next"), true); break;
        case "prev":
        case "previous": $slider.flexAnimate($slider.getTarget("prev"), true); break;
        default: if (typeof options === "number") $slider.flexAnimate(options, true);
      }
    }
  };
})(jQuery);

[Edit Jörg: Code in Code-Block eingefügt]

22.03.2017 13:55 | geändert von Jörg: 22.03.2017 15:49

10 Jörg Kruse

Die Konfiguration eines jquery Plugins erfolgt grundsätzlich über den JavaScript-Code, den man zur Aktivierung in die HTML-Datei eingefügt hat. Du hast den ja auch schon in der HTML-Datei drin stehen, sonst würde der Slider gar nicht laufen. Wenn du den Abschnitt mit meinem Code-Entwurf vergleichst, siehst du, wie du den vorhanden Code erweitern musst. Die Änderungen habe ich der Einfachheit halber sogar markiert :)

22.03.2017 16:07