Tipps gesucht: Image-Slider

lachender_engel · 08.02.2013

Hallo, Zusammen.

Meine Aufgabe ist es ein Image durch einen Image-Slider zu ersetzen.
Dabei soll der Slider folgende können:
1.) beliebige Bilder aus einem definierten Verzeichnis anzeigen
2.) in Blöcken zum nächsten Bild auflösen.
3.) Bilder unterschiedlicher Größe verarbeiten.
4.) Optional: über z.B. eine XML-Steuerdatei Paramter zu jedem einzelnen Bild definieren, wie einen Text und einen Link

Ich weiß, dass es gerade bei jQuery 100te Image-Slider gibt. Doch hoffe ich, dass mir hier jemand die Arbeit erleichtern und einen Tipp zu einem Slider geben kann, der zumindest die Anforderungen 1 bis 3 erfüllt.

Ach ja, ich weiß, dass ich das selber programmieren kann. Mache ich auch, wenn ich so etwas nicht finde.

Hat jemand einen Tipp für mich?

Duddle · 08.02.2013

AW: Tipps gesucht: Image-Slider

Hmm, ich kann mir gerade unter 3. nichts vorstellen, weil das Layout potenziell bei jeder Änderung springen könnte und du das sicher nicht willst. Normalerweise sind die Bilder ja alle in einem Container untergebracht und die Größenunterschiede werden durch Zoom oder Füllbalken o.ä. ausgeglichen.

Für 1. sehe ich auch nur die Möglichkeit, entweder beim Erzeugen der Seite serverseitig die Slideshow zu befüllen, oder mit JS die URLs per AJAX vom Server anzufragen.

Hab gerade mal aus Interesse selbst geschaut und denke, einen guten Kandidaten gefunden zu haben: http://sliderjs.org
Der kann Übergänge mit Blöcken und kann die URLs mit JSON definieren. Im JSON können URL, Text und ein Link angegeben werden, das wäre dann dein 4ter Wunsch. Ausserdem ist er kostenfrei und Open-Source, wenn ich das richtig überflogen hab.

Duddle

lachender_engel · 09.02.2013

AW: Tipps gesucht: Image-Slider

Hallo, Duddle (wie Kuddelmuddel ;-)).

Zu 3 geht es mir dazum, dass sich der Slider bzw. dessen Objekte - wie z.B. Pfeile nach links und rechts - an die Größe des Bildes anpassen; vor allem in der Breite.
Slider.Js von sliderjs.org hatte ich mir auch schon angesehen und muss zugeben, dass ich der Beschreibung scheitere.sliderjs von sliderjs.com liefert keine Blöcke als Übergang.

Dann suche ich mal weiter ;-)

Duddle · 09.02.2013

AW: Tipps gesucht: Image-Slider

Slider.Js von sliderjs.org hatte ich mir auch schon angesehen und muss zugeben, dass ich der Beschreibung scheitere

Inwiefern? Die Beispiele sind doch recht eindeutig.
Natürlich kannst du gern weiter suchen, aber vielleicht kann dir einfach erklärt werden was du noch nicht verstehst.

Duddle

lachender_engel · 10.02.2013

AW: Tipps gesucht: Image-Slider

Duddle schrieb:
Inwiefern? Die Beispiele sind doch recht eindeutig.

Ach ja, ich wusste schon immer, dass JavaSkript nicht meine Sache ist :-(

Also, ich verstehe komplett nicht, wie ich das JSON-Beispiel anwende.
Ich schaffe es noch nicht mal den einfachen Slider ans laufen zu bekommen.

Ich habe z.B. versucht die Demo auf der Webseite minimal nachzubauen. Der Code ist dabei rasugekommen:

HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="slider.min.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
    <div class="slider no-control" style="width: 640px;">
      <div class="loader">
        <span class="spinner"></span>
        <span class="percent">100</span>%</div>
        <div class="slide-images" style="height: 309px;">
          <div class="slide-image" style="width: 640px;">
            <a target="_blank" href="http://bigbuckbunny.org/">
              <img src="imagesSlider/bbb-splash.png" style="display: none;">
              <span class="caption">Big Buck Bunny - splash</span>
            </a>
          </div>
          <div class="slide-image" style="width: 640px;">
            <a target="_blank" href="http://bigbuckbunny.org/">
              <img src="imagesSlider/bird1.jpg" style="display: none;">
              <span class="caption">Big Buck Bunny - bird</span>
            </a>
          </div>
          <canvas class="slide-images" style="height: 309px; display: inline;" height="309" width="640"></canvas>
        </div>
      </div>
    </div>  
</body>
</html>

Ich habe sichergestellt, dass die Bilder, CSS und JS geladen werden. Doch sehe ich nur einen schwarzen "Flecken" an der Stelle des Sliders.
Klar, ich muss den Slider ja erst mal initialisieren - so ich das richtig verstehe.
Doch auf der Demo-Seite finde ich im Quellcode überhaupt nichts dazu. Daher stehe ich auf dem Schlauch. Von der JSON-Einbindung gar nicht zu reden.

Da ich nicht weiß, an welcher Stelle ich hänge, so auch nicht fragen kann, ab wo ich das Skript nicht verstehe, habe ich nicht weiter gefragt.

Wenn es nicht zu viel ist und meine Ausführungen reichen, würde ich mich über einen Ansatz, wo es noch fehlt, sehr freuen. Danke!

Duddle · 10.02.2013

AW: Tipps gesucht: Image-Slider

Okay, zugegeben ist es kein "kopier diesen Quelltext und es läuft"-Produkt. Ich hatte nach

Ach ja, ich weiß, dass ich das selber programmieren kann. Mache ich auch, wenn ich so etwas nicht finde.

angenommen du kennst dich mit JS schon aus.
Hier ein sehr einfaches Beispiel:

HTML:

<html>
    <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="slider.min.css" rel="stylesheet" type="text/css" /> 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<script type="text/javascript" src="js/slider.js"></script>
	<script type="text/javascript">
	    $(document).ready(function() {
		var slider = new Slider($('#container'));
		var jsonObjekt = [  
			{ "src" : "demo/images/evil-frank.png" }, 
			{ "src" : "demo/images/s1_proog.jpg", "name": "Elephant Dreams", "link" : "http://www.google.com" } 
		    ];
		slider.setPhotos(jsonObjekt);
		slider.setSize(500, 300);
		slider.setTheme('theme-light'); 
		slider.setTransition('transition-opacity');
		//slider.setTransitionFunction(SliderTransitionFunctions.squares);

	    });
	</script>
    </head>
    <body>
	<div id="container">
	</div>
    </body>
</html>

Im #container-div werden alle benötigten Elemente von slider.js automatisch erzeugt. Die URLs (und Bezeichner und Links) kommen aus dem JSON-Objekt und werden mit setPhotos() geladen. Die Größe und das Theme sollten klar sein.

Die Art des Überganges legt fest, ob ein <canvas>-Element erzeugt wird oder nicht. Wenn du nur CSS3-Animationen willst, reicht setTransition(). Wenn du ausgeklügeltere Übergänge brauchst, musst du eine Funktion definieren, die diesen Übergang innerhalb eines Canvas-Objektes berechnen kann. Glücklicherweise liefert slider.js schon mehrere Funktionen im SliderTransitionFunctions-Objekt (in der Datei slider.js) mit. Wenn du die auskommentierte Zeile einkommentierst bekommst du also den Übergang mit Quadraten.

Wenn du jetzt ein externes JSON-Objekt laden willst, kannst du mit fetchJSON eine Datei holen. Schaust du dir den Quellcode dazu an, siehst du dass dabei nur ein jQuery-eigenes getJSON gemacht und das Ergebnis wie oben an setPhotos() übergeben wird.

Duddle

lachender_engel · 10.02.2013

AW: Tipps gesucht: Image-Slider

Tja, Duddle. Deine Hilfe ist echt klasse. Dieses kleine Skript am Anfang fehlte mir ;-)
Jetzt konnte ich den Rest auch umsetzen und habe noch die benötigten Paramter (wie Delay, etc.) und das Auslese der Dateien aus dem Ordner hinzugefügt.
Programmieren können ist Auslegungssache - wobei ich von mir behaupte schon einiges zu können, nur eben kein JavaSkript (so richtig) ;-)

Also, danke noch mal und schöne Grüße!

lachender_engel · 12.02.2013

AW: Tipps gesucht: Image-Slider

Hi, Duddle.
In der Sache noch mal eine Frage - vielleicht hast Du eine Idee?!
Ich nutze bei Deinem Beispiel auch den Parameter "link". Dabei stelle ich fest, dass der Link "nur" auf der Beschreibung, oben rechts, greift.
Schaue ich mir den Quellcode im Browser an zeigt er mir das hier:

HTML:

<div class="slide-image current" style="width: 938px;"><a target="_blank" href="http://www.avm.de"><img src="imagesSlider/Banner_03.png" style="display: none;"></a></div>

Das Bild ist im A-Tag, jedoch klappt der LInk nicht. Das liegt daran, dass der Parameter style="display: none;" noch hinter dem img-Tag steht.
Nur, in der slider.js wird dieser style gar nicht hinzugefügt. Und in der CSS-Datei gibt es diesen Style auch nirgendwo.
Hast Du eine Idee, wo diese Angabe herkommen kann?

Vielen Dank für Deine Mühe!

Duddle · 12.02.2013

AW: Tipps gesucht: Image-Slider

Ist das irgendwo online?

Das einzige was mir auffällt ist, dass das img-Tag nicht korrekt geschlossen ist. In der Demo wird das aber gemacht. Im Quellcode, sofern ich das erkennen kann, fehlt der "/". Vielleicht fügt das mein Firefox automatisch hinzu, das kann ich gerade nicht überprüfen.

Du kannst ja mal probehalber im slider.js nach der Zeile mit "<img" suchen und dort manuell das / vor dem > hinzufügen. Ich bezweifle, dass das einen Einfluss hat - mehr sehe ich Moment aber nicht.

Duddle

lachender_engel · 22.02.2013

AW: Tipps gesucht: Image-Slider

So, da bin ich zu dem Thema noch mal.
Nach zwei Stunden ausprobieren und rumsuchen noch mal eine Frage an die Gemeinde:
Den Slider habe ich jetzt in ein bestehendes Projekt eingebaut. Standanlone läuft er prima. Kopiere ich die selben Zeilen in den Quellcode des Projektes bekomme ich die Meldung

Fehler: TypeError: slider is null
Quelldatei: Zeile: 35

Das bestehende Projekt inkludiert noch Prototype und jQuery ist auf noConflict gesetzt.
Hier der auf das wesentliche gestutzte Quellcode:

HTML:

<html lang="de" dir="LTR">
<head>
<script src="includes/js/jQuery/jquery.min.js" type="text/javascript">
<script type="text/javascript">
var jQuery = jQuery.noConflict();
</script>
<script src="includes/js/jQuery/jquery.marquee/lib/jquery.marquee.js" type="text/javascript">
<script src="includes/js/prototype.js" type="text/javascript">
<script src="includes/js/scriptaculous.js?load=effects,builder" type="text/javascript">
<script src="includes/js/effects.js" type="text/javascript">
<script src="includes/js/builder.js" type="text/javascript">
<script src="includes/js/lightbox.js" type="text/javascript">
<link type="text/css" href="/includes/css/slider.min.css" rel="stylesheet">
<script src="includes/js/slider.js" type="text/javascript">
<script type="text/javascript">
  jQuery(document).ready(function() {
    var slider = new Slider($('#containerBanner'));
    var jsonObjekt = [
    { "src": "/includes/imagesSlider/dateiname.jpg" },
    { "src": "/includes/imagesSlider/Banner_03.png"},
    { "src": "/includes/imagesSlider/Banner_04.jpg"}];
    slider.setPhotos(jsonObjekt);
    slider.setSize(938, 572);
    slider.setDuration(6000);
    slider.setTheme('no-control');
    slider.setTransition('transition-opacity');
    slider.setTransitionFunction(SliderTransitionFunctions.squares);
  });
</script>
</head><body>
<div id="containerBanner"> </div>
</body>
</html>

So, wie ich das sehe liegt das Problem an der Zeile

HTML:

    var slider = new Slider($('#containerBanner'));

und dem $. Da prototype.js nach jquery.js geladen wird, muss - so wie ich das verstehe - die $ Funktion neu definiert werden. Daher habe ich aus

HTML:

  $(document).ready(function() {

schon

HTML:

  jQuery(document).ready(function() {

gemacht und ein vorheriger Fehler ist gelöst.
Nur, wenn ich jetzt auch ein

HTML:

    var slider = new Slider(jQuery('#containerBanner'));

mache, ändert sich nicht.
Daher denke ich, dass ich das mit der $-Funktion und der Neudefinition noch nicht verstanden habe.
Kann mir jemand helfen und sagen, wie sich das Problem lösen lässt?

Vielen Dank vorab und schöne Grüße!

Duddle · 22.02.2013

AW: Tipps gesucht: Image-Slider

Schau dir die Fehlermeldung genauer an:

Fehler: TypeError: slider is null
Quelldatei: Zeile: 35

Er meckert bei Zeile 35 der Datei slider.js. Diese ist

Code:

    slider.find('.slide-images').append($.map(o.slides, function(slide) {

Eine Zeile darüber wird slider per $()-Shortcut zugewiesen, aber wie du schon sagst ist $() in diesem Fall nicht mehr die jQuery-Variante. In dieser Hinsicht ist das PlugIn nicht besonders sauber geschrieben.

Es sollte also reichen, wenn du in slider.js alle Vorkommen von $() in jQuery() änderst.

Duddle

lachender_engel · 22.02.2013

AW: Tipps gesucht: Image-Slider

Vielen Dank, Duddle. Habe ich soweit verstanden-
Doch die Fehler gehen weiter :-(
Nach dem ich in der slider.js nur die $() zu jQuery() geändert habe kam die Meldung

Fehler: TypeError: $.map is not a function
Quelldatei: Zeile: 35

Dann habe ich auch noch alle $. zu jQuery. geändert und siehe da, die nächte Fehlermeldung sagt

Fehler: TypeError: T.documentElement is null
Quelldatei: Zeile: 19

und

Fehler: TypeError: document.getElementById(...) is null
Quelldatei: Zeile: 63

und nichts wird mehr angezeigt.
In Zeile 63 steht

var h = document.getElementById("a").scrollHeight;

Und da stehe ich dann.
Hast Du dazu auch noch eine Idee?

Duddle · 22.02.2013

AW: Tipps gesucht: Image-Slider

Wenn document.getElementById() ein Null zurückgibt, wird das Element nicht gefunden. Bist du sicher, dass du ein Element mit der id "a" hast und nicht eigentlich alle Links mit getElementsByTagName() wolltest?

Hast du das ganze als Grundgerüst irgendwo online? Ich wette, es hat sich beim Umbenennen einfach ein Schusselfehler eingeschlichen. Anders kann ich mir den Fehler in der jquery.min.js nicht erklären.

Edit: gerade in der Doku gelesen (meine Hervorhebung):

However, you can override that default by calling jQuery.noConflict() at any point after jQuery and the other library have both loaded.

Du rufst mglw. also das noConflict() zu früh auf. In dem verlinkten Beispiel werden erst Prototype und jQuery geladen, dann wird noConflict() aufgerufen.

Duddle

lachender_engel · 25.02.2013

AW: Tipps gesucht: Image-Slider

Danke, Duddle. Der Hinweis war schon mal in die richtige Richtung ;-)
Wichtig ist nicht nur, dass jQuery.noConflict() nach dem Laden beider Libraries ausgeführt sondern, dass prototype.js auch vor jQuery geladen wird.

Soweit läuft der Slider auch - bis auf ein letztes aber gravierendes Problem. Vielleicht hast Du dazu noch eine Idee?!

Es geht um den Container, der erstellt wird.
Nach dem Container "containerBanner" erstellt das JS einen neuen Container "slider" und vergibt einen style mit der Breite wie ich ihn mit set.Size definiert habe.
Aufgrund der restlichen Umgebung muss ich in diesem Style noch mit einem margin-left ergänzen - sonst überdeckt der Slider eine Navigation.
Da ich das Projekt nur erweitere und an keiner anderen Stelle unnötig schrauben will, möchte ich das JS dahin ändern, dass es zum Style auch das margin-left setzt.
Jetzt bin ich mit jQuery nicht so sehr bewandert, dass ich den Punkt der Änderung selber finde (habe jetzt zwei Stunden rumprobiert).
Hast Du einen letzten Tipp, wo ich im slider.js die Änderungen mache muss um den weiteren Parameter im Style hinzuzufügen?

Duddle · 25.02.2013

AW: Tipps gesucht: Image-Slider

Das PlugIn bringt doch eine .css-Datei mit, in der die benutzten Style-Angaben definiert werden. Dort solltest du das ergänzen können.

Ansonsten gibt es in der JS-Datei die Funktion tmplSlider, in der die ganzen Elemente mit ihren Klassen erzeugt werden. Das wäre aber die unsaubere Lösung.

Duddle

lachender_engel · 25.02.2013

AW: Tipps gesucht: Image-Slider

Super, perfekt. Vielen Dank für den Denkanstoß.
Klar im Style... Manchmal ist der einfache Weg doch der Beste ;-)
Danmit läuft das Teil. Danke, Duddle!

lachender_engel · 25.02.2013

AW: Tipps gesucht: Image-Slider

Da bin ich dann doch noch mal.
Es geht noch um den Link auf dem Slider-Bild. Die Modifikation des a-Tags ist es nicht.
Ich konnte herausfinden, dass auf dem Bild ein element.style diaply:none liegt. Wenn ich das in Firebug ausschalte klappt auch der Link.
Nun habe ich das ganze CSS durchforstet und sehe kein passendes display:none.
Dann habe ich versucht über ein .slide-image{display:inline!important} im CSS den Style zu überschreiben, doch ohne Erfolg.
Auch im slider.js finde ich keine Stelle an der der element.style festgelegt wird.
Hast Du eine Idee wie dieses Style entstehen kann?

Duddle · 25.02.2013

AW: Tipps gesucht: Image-Slider

Es geht noch um den Link auf dem Slider-Bild. Die Modifikation des a-Tags ist es nicht.

Ich verstehe deine Frage nicht. Wird das Bild nicht verlinkt?

In der o.g. Funktion tmplSlider wird jedenfalls auch das <a>-Tag erzeugt, wenn ein Link für dieses Slide existiert.

Duddle

lachender_engel · 25.02.2013

AW: Tipps gesucht: Image-Slider

Doch, der Link wird erzeugt. Im Quellcode steht der a-Tag auch um das img-Tag. Der Link auf dem Bild funktioniert nur nicht. Und das liegt an dem element.style display:none, der auf dem img liegt. Schalte ich den per Firebug aus, klappt auch der Link auf dem Bild.
Da der style nicht im js feste codiert ist, nehme ich an wird dieser temporär erzeugt. Nur ich finde nicht die stelle wo das geschieht.

Duddle · 25.02.2013

AW: Tipps gesucht: Image-Slider

Dann vermute ich den Fehler im Kontext / im JSON oder so. Die Links auf der Demo-Seite funktionieren ja einwandfrei.

Beim Umschalten der Bilder wird jedenfalls die Funktion slide aufgerufen, in der quasi nur die Klasse "current" dem aktuellen div zugewiesen wird:

Code:

Slider.prototype.slide = function(num) {
      if (this.slides && this.pages) {
        num = Math.max(0, Math.min(num, this.slides.size() - 1));
        this.slides.eq(this.current).removeClass("current");
        this.slides.eq(num).addClass("current");
        this.pages.eq(this.current).removeClass("current");
        this.pages.eq(num).addClass("current");
      }
      this.current = num;
      return this;
    };

In der CSS-Datei habe ich für .current aber auf einen schnellen Blick nichts gefunden.

Duddle