by:

This is my first jQuery Plugin and a pre release of my responsive slider. The main reason for programming another javascript slider is for fun. Another reason was the existing slider did not feed my needs.

Goals

  1. Responsive
  2. Works with many pictures (+10000)
  3. Small footprint and easy to integrate
  4. No Flash
  5. Must be awesome (iam working on that)

Demo

  • /images/asia/22.jpg
  • /images/asia/7.jpg
  • /images/asia/27.jpg
  • /images/asia/30.jpg
  • /images/asia/29.jpg

SourceCode

$.fn.slider = function (options) {

  var settings = $.extend({
    interval: 2000,
    showCaption: false,
    dataClass: "imagedata",
    preload: 3
  }, options);

    /*
    todo
    var autoPlayback = true;
    */


  function LoaderImage(url) {
    var self = this;

    this.isLoaded = false;
    this.url = url;
    this.imgObj = new Image();
    this.load = function () {
      self.imgObj.src = self.url;
    }
    this.onLoad = undefined; // callback function

    this.imgObj.onload = function () { // load imgUrl into imgObj and call imgOnLoad when finished
      self.isLoaded = true;
      console.log("imgIsLoaded");
      if (self.onLoad)
        self.onLoad();
    };
  }

  //for every slider object, we attach the slider functionality
  $(this).each(function () {


    var items = [];
    var cnt = 0;
    $(this).find('ul.' + settings.dataClass)
      .children().each(function () {

        var item = new LoaderImage(
          decodeURI($(this).text())
        );

        // TODO: broken preloader
        if (cnt < settings.preload) {
          item.load();
        }

        items.push(item);
        ++cnt;
      });

    //we create a img tag
    var img = $('<img />').attr({
      "class": "img opaque",
      "src": items[0].url
    }).insertAfter($(this).find('ul.' +
      settings.dataClass));

    //we need a second one for overlay/transition effect        
    var oldimg = $('<img />').attr({
      "class": "img opaque",
      "src": items[0].url
    }).insertAfter(img);

    if (settings.showCaption)
      var caption = $('<span />').html(
        items[0].caption).insertAfter(
        img);

    var btnBox = $('<div />').attr({
      "class": "btnBox"
    }).insertBefore($(img));

    $(btnBox).append($('<span />').attr({
      "id": "preBtn",
      "class": "btn"
    }).html("Prev"));

    $(btnBox).append($('<span />').attr({
      "id": "nextBtn",
      "class": "btn"
    }).html("Next"));

    //we start rotation
    var i = 0;

    function gotoNext(back, isClick) {
      back = typeof back !==
        'undefined' ? back : false;
      isClick = typeof isClick !==
        'undefined' ? isClick : false;

      if (back)
      --i;
      else ++i;

      if (i < 0)
        i = cnt - 1;
      else if (i > cnt - 1)
        i = 0;


      var setImageFunc = function () {
        oldimg.removeClass("opaque");
        img.attr({
          "src": items[i].imgObj.src,
          "class": "opaque img"
        });
        var tmp = oldimg;
        oldimg = img;
        img = tmp;


      };

      if (!items[i].isLoaded) {
        items[i].onLoad = function () {
          setImageFunc();
        }
        items[i].load();
      } else {
        setImageFunc();
      }

    }

    var slideint = setInterval(
      function () {
        gotoNext()
      }, settings.interval);

    $($(this).find("#nextBtn")).click(
      function () {
        clearInterval(slideint);
        gotoNext(false);
        slideint = setInterval(
          function () {
            gotoNext()
          }, settings.interval);
      });

    $($(this).find("#preBtn")).click(
      function () {
        clearInterval(slideint);
        gotoNext(true);
        slideint = setInterval(
          function () {
            gotoNext()
          }, settings.interval);
      });
  });
} // end plugin

 

Integration

Please dont integrate my slider at this time, because its still an alpha. I know there is plenty of room for improvements, like pre loading, different animation, key binding etc...

Contribute

Feel free to make suggestions and/or code improvements

Thank You

Jakob Oberhummer and Michael Walloch for feedback and code improvements.

Chanelog

2013/12/08 added preloading, fixed rotation issue, improved transition
2013/10/02 inital release

Happy Hacking

Andreas


Kommentare

by:

Hab grad durch Zufall bemerkt:

Weiter gehen, hier gibt's nichts zu sehen und ein schönes Wochenende

 


Kommentare

by:

Nachdem wir nun dank Snowden wissen, dass die totale Überwachung gut voran schreitet und bald flächendeckend jedem Menschen zur Verfügung steht, habe ich mir Gedanken gemacht, wie man das Image etwas aufpolieren könnte...
So könnte man negativ besetzte Wörter wie Killerdrohne mit "Aufklärungs- und Rettungsroboter kurz A&R Roboter" ersetzen, oder im Alltag eine Bürgerinitiative zur Rettung der deutschen Sprache und Kultur gründen, deren Aufgabe wäre es dann den Mitmenschen zu helfen die richtigen Wörter und das richtige Verhalten zu finden.
Ich würde mich bereit erklären an Schulen und Universitäten den geschichtlichen Verlauf von Schnüffelsoftware richtig zu stellen, evlt könnte man für die harten Fälle auch ein Umerziehungslager in betracht ziehen.

Ziel der Aktion wäre es allen Menschen ein sicherere Gefühl zu geben, natürlich müsste eine gewisse Unsicherheit sichergestellt werden, um eine langfristige Akzeptanz zu gewährleisten.

Scheinbar hat sich David Cameron auch so seine Gedanken gemacht wie man die totale Überwachung Salon fähig machen kann,
er nutzt etwa die Angst unsere Kinder könnten mit Pornographie in kontakt treten als Grundlage, wieso jetzt jede Internet Verbindung aufgezeichnet und analysiert werden muss.
Ich muss schon sagen Hut ab Herr Cameron, ich finde auch sehr beeindrucken in welcher Geschwindigkeit er dieses Vorhaben durchsetzen möchte, schon Anfang 2014 könnte jeder Haushalt in England von dieser Erneuerung "profitieren".

Am Ende stellt sich halt immer die Frage, und die sollte man sich immer stellen wenn man Medien und insbesondere Politiker reden hört:

Wer profitiert davon ?!

Im konkreten Fall könnte man jetzt sagen: Jeder der Kinder hat und Angst davor hat sein Kind könnte im Internet unanständige Bilder  wahrnehmen. Ein anderes Erklärungsmodel könnte sein, das so der Staat eine rechtliche Grundlage schaffen möchte, wieso sie den gesamten Internet verkehr mithören müssen....

Nun hat die Veröffentlichung von Snowden nicht nur Nachteile gebracht!

Wirklich genützt hat die Veröffentlichung eigentlich den Geheimdiensten !
Es ist aufgaben der Geheimdienste auch falsch Informationen zu streuen, wenn man jetzt "die Beweise" hat, dass die USA in der Lage sind, dem weltweiten Datenverkehr, jede Mail, jedes Telefonat mitzuhören dann ist das erstmal ein strategischer Vorteil für die USA.
Auch wenn das so vielleicht gar nicht der Fall sein mag, geschadet hat es Ihnen definitiv nicht.

Konspirative Grüße

Winston Smith


Kommentare

by:

Nachdem ich jetzt 2 Coding Dojos zum Thema Test Driven Development besucht habe, dachte ich, es ist mal an der Zeit auch meinen Senf dazu zu geben.

Was ich positives aus TDD für mich extrahiert habe:
TDD ist der Versuch die Programmierer dazu zu bewegen vor der Implementierung sehr konkret über die Spezifikationen sowie nötigen Schritte nachzudenken.
Gut das klingt mal super, allerdings auf den ersten Blick wirkt das ganze dann schon sehr eigenartig:

Wie funktioniert Test Driven Development ?

Eine Iteration in TDD sollte folgendermaßen ausschauen (aus wikipedia)

1.) Schreibe Tests für das erwünschte fehlerfreie Verhalten, für schon bekannte Fehlschläge oder für das nächste Teilstück an Funktionalität, das neu implementiert werden soll. Diese Tests werden vom bestehenden Programmcode erst einmal nicht erfüllt bzw. es gibt diesen noch gar nicht.

 

2.) Ändere/schreibe den Programmcode mit möglichst wenig Aufwand, bis nach dem anschließend angestoßenen Testdurchlauf alle Tests bestanden werden.

 

3.) Räume dann im Code auf (Refactoring): Entferne Wiederholungen (Code-Duplizierung), abstrahiere wo nötig, richte ihn nach den verbindlichen Code-Konventionen aus etc. Natürlich wieder mit abschließendem Testen. Ziel des Aufräumens ist es, den Code schlicht und verständlich zu machen.

Moment. What ???

Man schreibt also erst den Test, für eine Methode die noch gar nicht existiert und programmiert sie dann mit möglichst wenig Aufwand ... 

Ich hab mir persönlich schon schwer genug getan von der prozedualen Programmierung (top down Ansatz) zur objektorientierten Programmierung und jetzt soll ich auch noch Tests schreiben für Methoden die noch nicht existieren ?

Was spricht für Test Driven Development ?

Man wird "gezwungen" sich schon vorher sehr genaue Gedanken über seine Implementierung zu machen!

Das Ziel, am Ende SourceCode zu haben, der möglichst schlank programmiert und getestet ist, halte ich doch für etwas hochgegriffen, werde das aber gerne bei eigenen Projekten ausprobieren um mich vom Gegenteil überzeugen lassen.

Was spricht gegen Test Driven Development ?

Es ist ein Mehraufwand, ein Mehraufwand der sich erst nach einer gewissen Anzahl von Testdurchläufen rentieren kann.
Wie oft das ist und wann der Return Point of Investment ist, dass überlasse ich dann doch lieber Leuten die auf eine andere Art geistige Wunder vollbringen.

Im wesentlichen bedeutet dies für viele Programmierer ein komplettes Umdenken, was schwierig wird wenn man an die Adaption denkt, schließlich macht TDD auch nur dann Sinn, wenn jeder der Beteiligten an einem Projekt mitmacht.

Test ist vieleicht in dem Zusammenhang auch der falsche Ausdruck, es ist mehr eine Mischung aus Vorlage und Test.

Wer immernoch glaubt das TDD ein unglaublicher Blödsinn ist, der sollte sich mal die Videos von makandra anschauen
http://www.makandra.de/malennachzahlen/kurs/
Ansonsten Wikipedia ist natürlich auch immer eine Quelle
http://de.wikipedia.org/wiki/Testgetriebene_Entwicklung

Liebe Grüße

Andreas


Kommentare

by:

Hier ein paar Bilder der letzten Jahren aus Indien (2010), Vietnam (2011) und China (2012)

  • /images/asia/0.jpg
  • /images/asia/1.jpg
  • /images/asia/2.jpg
  • /images/asia/3.jpg
  • /images/asia/4.jpg
  • /images/asia/5.jpg
  • /images/asia/6.jpg
  • /images/asia/7.jpg
  • /images/asia/8.jpg
  • /images/asia/9.jpg
  • /images/asia/10.jpg
  • /images/asia/11.jpg
  • /images/asia/12.jpg
  • /images/asia/13.jpg
  • /images/asia/14.jpg
  • /images/asia/15.jpg
  • /images/asia/16.jpg
  • /images/asia/17.jpg
  • /images/asia/18.jpg
  • /images/asia/19.jpg
  • /images/asia/20.jpg
  • /images/asia/21.jpg
  • /images/asia/22.jpg
  • /images/asia/23.jpg
  • /images/asia/24.jpg
  • /images/asia/25.jpg
  • /images/asia/26.jpg
  • /images/asia/27.jpg
  • /images/asia/28.jpg
  • /images/asia/29.jpg
  • /images/asia/30.jpg
  • /images/asia/31.jpg
  • /images/asia/32.jpg
  • /images/asia/33.jpg
  • /images/asia/34.jpg
  • /images/asia/35.jpg
  • /images/asia/36.jpg
  • /images/asia/37.jpg
  • /images/asia/38.jpg
  • /images/asia/39.jpg
  • /images/asia/40.jpg
  • /images/asia/41.jpg
  • /images/asia/42.jpg
  • /images/asia/43.jpg
  • /images/asia/44.jpg
  • /images/asia/45.jpg
  • /images/asia/46.jpg
  • /images/asia/47.jpg
  • /images/asia/48.jpg
  • /images/asia/49.jpg
  • /images/asia/50.jpg
  • /images/asia/51.jpg
  • /images/asia/52.jpg
  • /images/asia/53.jpg
  • /images/asia/54.jpg
  • /images/asia/55.jpg
  • /images/asia/56.jpg
  • /images/asia/57.jpg
  • /images/asia/58.jpg
  • /images/asia/59.jpg
  • /images/asia/60.jpg

Kommentare


Seiten: