tutorials.de Buch-Aktion 05/2012
Like Tree1Danke
  • 1 Beitrag von Quaese
ERLEDIGT
NEIN
ANTWORTEN
1
ZUGRIFFE
260
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 15.12.10 17:50 #1
    Netzwerkidi Netzwerkidi ist offline Mitglied Gold
    Registriert seit
    Oct 2010
    Beiträge
    237
    Blog-Einträge
    1
    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/artik...ter_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 :
    1
2
3
4
5

    <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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

    <!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
     
    Zitieren Zitieren
  2. 16.12.10 10:12 #2
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    starte die Slideshows im onload-Event. Dort instanziiert du zunächst die Objekte. Anschliessend startest du über die Methode next die Slider.
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

    <!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
    Netzwerkidi bedankt sich. 
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
« je nach Auswahl des Radiobuttons Formlarfeld ändern | shadowbox preloader problem »

Ähnliche Themen

  1. Problem mit Nivo Slider
    Von ciberjoerg im Forum HTML & XHTML
    Antworten: 4
    Letzter Beitrag: 17.09.10, 22:12
  2. Tab Slider in CSS?
    Von deepgreen im Forum CSS
    Antworten: 3
    Letzter Beitrag: 27.06.08, 19:10
  3. J Slider Problem mit ungraden Werten -Zahlen-
    Von kleinhanjer im Forum Java
    Antworten: 2
    Letzter Beitrag: 13.12.05, 22:26
  4. Problem mit Slider und "Close" Funktion
    Von Suicider9184 im Forum Flash Plattform
    Antworten: 2
    Letzter Beitrag: 15.11.05, 11:25
  5. API Slider
    Von elfvyn im Forum C/C++
    Antworten: 5
    Letzter Beitrag: 20.05.05, 13:00

Stichworte