SlideShow Maison + onClick = KO IE7

**Ze AzAr** · 02/09/2009, 11h10

Bonjour à tous,

Je cherche désespérément la solution à mon problème mais en vain...
Pour résumer, j'ai repris un code javascript de slideshow utilisant la librairie jquery pour le faire à ma sauce.

Au niveau de l'animation du slideshow, aucun problème, tout tourne nickel, j'ai ajouté une fonctionnalité pour ajouter des liens sur mon bandeau image.

Le code fonctionne parfaitement sur FF et IE8, mais impossible de faire prendre en compte mon onClick par IE7, pourtant, si je mets sur la même page une image avec un onClick en dur, celui ci est bien pris en compte sous IE7...

Je vous poste mes codes sources pour que vous puissiez peux être m'aider à solutionner mon problème...

Voici mon code javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
jQuery.fn.dynamicSlideshow = function(attr) {
   attr = attr || {};
   attr.duration = attr.duration || 3000;
 
   function initSlider(container, img,lien,alt) {
      var curr = Math.floor(Math.random()*img.length);
      setInterval( function(){
         if (curr == img.length) {
            curr = Math.floor(Math.random()*img.length);
         }
         var i = new Image();
         var azar = Math.floor(Math.random()*img.length) ;
         $(i).load(function(){
 
            $(container).append(this);
            $(container).find('img:first').css({'z-index': 1});
            $(this).css({opacity: 0.0, 'z-index': 2}).animate({opacity: 1.0}, 1000, function() {
                  $(container).find('img:first').remove();
               })
         }).attr('onClick',lien[azar]).attr('src', img[azar]).attr('alt', alt[azar]).attr('title', '').css({position:'absolute',top:0,left:0,'z-index':8,cursor:'pointer'});
      }, attr.duration );
   };
 
   $(this).each(function(){
      var img = [];
      var lien = [];
      var alt = [];
      $(this).find("img").each(function(){
         img.push($(this).attr("src"));
         lien.push($(this).attr("onClick"));
         alt.push($(this).attr("alt"));
      });
      var j = new Image();
      var container = this;
      $(this).empty();
      $(j).attr('onClick', lien[0]).attr('src', img[0]).attr('alt', img[0]).css({position:'absolute',top:0,left:0,'z-index':0,cursor:'pointer'}).load(function(){
         $(container).append(this);
         initSlider(container, img,lien,alt);
      });
   });
}

Voici mon code HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.Tazdynamicslideshow.js"></script>
<script type="text/javascript">
$(function(){
    $("#slideshow").dynamicSlideshow({duration: 4000});
});
</script>
<title>Test slider</title>
</head>
 
<body>
<div id="slideshow">
<img onClick="window.open('http://www.google.fr','_self'); return false;" src="bandeaux/1.jpg" alt="bandeau 1" />
<img onClick="window.open('http://www.google.fr','_self'); return false;" src="bandeaux/2.jpg" alt="bandeau 2" />
<img onClick="window.open('http://www.google.fr','_self'); return false;" src="bandeaux/3.jpg" alt="bandeau 3" />
</div>
</body></html>

**danielhagnoul** · 02/09/2009, 18h40

Bonsoir.

Au premier essai sur Firefox, Firebug donne l'erreur suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
$(j).attr("onClick", lien[0]) is undefined
$(j).attr('onClick', lien[0]).attr...:0,cursor:'pointer'}).load(function(){\r\n

Votre code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
                        var j = new Image();
                        var container = this;
                        $(this).empty();
                        $(j).attr('onClick', lien[0]).attr('src', img[0]).attr('alt', img[0]).css({position:'absolute',top:0,left:0,'z-index':0,cursor:'pointer'}).load(function(){
                             $(container).append(this);
                             initSlider(container, img,lien,alt);
                        });

**Ze AzAr** · 03/09/2009, 14h16

bizarre...

Firebug ne me retourne rien...

Et le tableau est bien initialisé avant...

**danielhagnoul** · 04/09/2009, 00h36

Bonsoir.

Désolé, c'était moi !

Explication : réflexe de Pavlov, dès que je vois un onclick je le transforme en un événement jQuery. Ce qui provoquait lien[0] undefined, bien entendu !

J'ai eu tellement de mal à comprendre ce plugin, il y avait plusieurs erreurs, que je l'ai quasiment réécrit.

Cette version fonctionne sous IE8, C2 et F3.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#FFFFFF;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
 
        (function($){
 
            $.fn.dynamicSlideshow = function(params) {
             var attr = params || {};
             attr.duration = params.duration || 3000;
 
                var img = [];
                var lien = [];
                var alt = [];
                var title = [];
 
                $(this).find("img").each(function(){
                    img.push($(this).attr("src"));
                    lien.push($(this).attr("onClick"));
                    alt.push($(this).attr("alt"));
                    title.push($(this).attr("title"));
                });
 
                var length = img.length;
 
                /* Firebug */
                /*
                console.log(img);
                console.log(lien);
                console.log(alt);
                console.log(title);
                console.log(length);
                */
 
                function initSlider(container) {
                    var azar = 0;
                    var temp = 0;
                    var j = new Image();
 
                    setInterval(function(){
                        do {
                            temp = Math.floor(Math.random()*length);
                        } while(temp == azar);
 
                        azar = temp;
 
                        $(j).attr({
                            onClick: lien[azar],
                            src: img[azar],
                            alt: alt[azar],
                            title: title[azar]
                        });
 
                        $(j).css({
                            position:'absolute',
                            top:0,
                            left:0,
                            zIndex:8,
                            cursor:'pointer',
                            opacity: 0.2
                        });
 
                        $(container).find("img").fadeTo(800, 0.2);
                        $(container).html(j);
                        $(j).fadeTo(800, 1);
 
                    }, attr.duration );
                };
 
                return this.each(function(i, item){        
                    // Firebug
                    // console.log(i + ' = ' + item);
 
                    var i = new Image();
 
                    $(i).attr({
                        onClick: lien[0],
                        src: img[0],
                        alt: alt[0],
                        title: title[0]
                    });
 
                    $(i).css({
                        position:'absolute',
                        top:0,
                        left:0,
                        zIndex:8,
                        cursor:'pointer'
                    });
 
                    $(this).html(i);
 
                    initSlider(this);
                });
            }
 
        })(jQuery);
 
        $(document).ready(function(){
            $("#slideshow").dynamicSlideshow({duration: 4000});
        });
    </script>
</head>
<body>
    <div id="slideshow">
        <img src="../images/menu_dossiers.png" alt="Google" title="Google" width="200" height="50" onClick="window.open('http://www.google.fr','_blank'); return false;" />
        <img src="../images/menu_infos.png" alt="GData" title="GData" width="200" height="50" onClick="window.open('http://www.gdata.de/','_blank'); return false;" />
        <img src="../images/menu_accueil.png" alt="W3Schools" title="W3Schools" width="200" height="50" onClick="window.open('http://www.w3schools.com/','_blank'); return false;" />
        <img src="../images/menu_forums.png" alt="W3Schools" title="W3Schools" width="200" height="50" onClick="window.open('http://www.w3schools.com/','_blank'); return false;" />
        <img src="../images/menu_gsp.png" alt="W3Schools" title="W3Schools" width="200" height="50" onClick="window.open('http://www.w3schools.com/','_blank'); return false;" />
        <img src="../images/menu_resultat.png" alt="W3Schools" title="W3Schools" width="200" height="50" onClick="window.open('http://www.w3schools.com/','_blank'); return false;" />
    </div>
</body>
</html>

**Ze AzAr** · 07/09/2009, 10h46

Je ne suis pas pro du javascript, donc je ne peux que te croire pour les erreurs, je vais regarder un peu plus près ta version du code et essayer de la comprendre...

Merci bien je te tiens au courant

**Ze AzAr** · 11/09/2009, 09h53

bon j'ai essayé (un peu surchargé par eu le temps avant).

Le code tourne bien sous IE8, FF, Chrome et autre sauf sur IE7, il ouvre seul les lien sans même clicker

SlideShow Maison + onClick = KO IE7

jQuery

Discussions similaires

Partager

Partager