Problem mit Slider

N

Netzwerkidi

Hallo in die Runde!

Ich will in meinem Internetblog (Blogger), einen einfach Slider einbauen. Nun habe ich bereits verschiedenste jQuery-Plugins versucht, aber irgendwas klappt nie, entweder heißen die CSS wie in Blogger oder etwas anderes stört.

Ich habe mich nun für eine eigentlich "einfachere" Variante von Selfhtml entschieden, diese hier: http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/objektorientierter_ansatz.htm

Meine Idealvorstellung ist nun eigentlich, dass ich im Posting im Blog nur jeweils die URL der Graphik eingebe und fertig. Also ungefähr so:

Code: 
<div style="position:relative;">
  <script type="text/javascript">
    slider('file1','file2','file3'...);
  </script>	
</div>

Der JS-Code soll dann irgendwo liegen, falls ich mehrere Sliders und/oder Postings habe.

Wie gesagt, das ist meine Idealvorstellung, aber ich komme jetzt schon nicht weiter, weil die einfachere Variante schon nicht hinhaut. Der Code ist dieser hier:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Zwei Fader auf derselben Seite</title>
	<script type="text/javascript">
		function Fader(id) {
			this.id = id;
			this.images = document.getElementById(id).getElementsByTagName("img");
			this.counter = 0;

			this.fade = function (step) {
				var fader = this;

				step = step || 0;

				this.images[this.counter].style.opacity = step/100;
				this.images[this.counter].style.filter = "alpha(opacity=" + step + ")"; // IE?

				step = step + 2;

				if (step <= 100) {
					window.setTimeout(function () { fader.fade(step); }, 1);
				} else {
					window.setTimeout(function () { fader.next(); }, 1000);
				}
			};

			this.next = function () {
				this.counter++;

				if (this.counter < this.images.length) {
					this.fade();
				}
			};
		}
		
	</script>	
  
  <style type="text/css">
		.next { 
      position: absolute; 
      top: 0; 
      left: 0; 
      opacity: 0; 
      filter:alpha(opacity=0); 
    }
		#erste_slideshow, 
    #zweite_slideshow { 
      position: relative; 
    }
	</style>
</head><body>
	<div>Zwei Fader auf derselben Seite</div>
	
	<div class="slideshow" id="erste_slideshow">
           <img src="http://style.tutorials.de/v10/tutorials.png" alt="">
           <img src="http://style.tutorials.de/v10/chat.png"      alt="" class="next"> 
           <img src="http://style.tutorials.de/v10/rss.png"       alt="" class="next"> 
	</div>

	<div class="slideshow" id="zweite_slideshow">
	   <img src="http://style.tutorials.de/v10/rss.png"       alt="">
           <img src="http://style.tutorials.de/v10/tutorials.png" alt="" class="next"> 
           <img src="http://style.tutorials.de/v10/chat.png"      alt="" class="next"> 

	</div>
	

	
	<p>Erster Fader:  <a href="#" onclick="window.erste_slideshow  = new Fader('erste_slideshow');  erste_slideshow.next();  this.onclick = function () { return false; }; return false;">Slideshow starten</a></p>
	<p>Zweiter Fader: <a href="#" onclick="window.zweite_slideshow = new Fader('zweite_slideshow'); zweite_slideshow.next(); this.onclick = function () { return false; }; return false;">Slideshow starten</a></p>
	
	
	<script type="text/javascript">	
		var slideshows = document.getElementsByTagName("div");
		for (i=0;i<slideshows.length;i++) {
		  if (slideshows[i].className=="slideshow") {
		    var faders = new Fader(slideshows[i].id);
		    //alert("1");	
        // Hier soll nun der zweite Teil kommen ->   erste_slideshow.next();  this.onclick = function () { return false; }; return false;
		    //alert("2");
		  }
		}
		
	</script>		
	
</body>

</html>

Das Problem ist, dass der erste Alert noch gebracht wird, aber finde ich einfach nicht den Dreh, dass er den Rest, den er macht, wenn ich den Button händisch auslöse, in der Routine macht.

Kann einer helfen? Wäre toll!!

Grüße
Der Idi
 
Hi,

starte die Slideshows im onload-Event. Dort instanziiert du zunächst die Objekte. Anschliessend startest du über die Methode next die Slider.
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Zwei Fader auf derselben Seite</title>
<script type="text/javascript">
function Fader(id) {
  this.id = id;
  this.images = document.getElementById(id).getElementsByTagName("img");
  this.counter = 0;

  this.fade = function (step) {
      var fader = this;

      step = step || 0;

      this.images[this.counter].style.opacity = step/100;
      this.images[this.counter].style.filter = "alpha(opacity=" + step + ")"; // IE?

      step = step + 2;

      if (step <= 100) {
          window.setTimeout(function () { fader.fade(step); }, 1);
      } else {
          window.setTimeout(function () { fader.next(); }, 1000);
      }
  };

  this.next = function () {
      this.counter++;

      if (this.counter < this.images.length) {
          this.fade();
      }
  };
}

window.onload = function(){
  window.erste_slideshow = new Fader('erste_slideshow');
  window.erste_slideshow.next();
  window.zweite_slideshow = new Fader('zweite_slideshow');
  window.zweite_slideshow.next();
}

</script>
<style type="text/css">
.next {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  filter:alpha(opacity=0);
}
#erste_slideshow,
#zweite_slideshow {
  position: relative;
}
</style>
</head><body>
<div>Zwei Fader auf derselben Seite</div>

<div class="slideshow" id="erste_slideshow">
	<img src="http://style.tutorials.de/v10/tutorials.png" alt="">
	<img src="http://style.tutorials.de/v10/chat.png"      alt="" class="next">
	<img src="http://style.tutorials.de/v10/rss.png"       alt="" class="next">
</div>

<div class="slideshow" id="zweite_slideshow">
	<img src="http://style.tutorials.de/v10/rss.png"       alt="">
	<img src="http://style.tutorials.de/v10/tutorials.png" alt="" class="next">
	<img src="http://style.tutorials.de/v10/chat.png"      alt="" class="next">
</div>
</body>
</html>
Die Variante, die Bilder lediglich über ihre URL in einem Array anzugeben, ist möglich. Aber es sind einige Änderungen notwendig, da zum Beispiel zunächst die Bildobjekte ins Dokument eingefügt werden müssten.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück