Image rotator menu Demande test et validation code

**robomatix** · 16/09/2010, 18h13

J'ai fait une sorte de menu pour une axé image à partir d'un tuto : http://www.yadlapomme.com/testzone/i...ator-wttv.html

L'adresse du tuto de départ est sur la page.

Je l'ai testé sur FF et IE8, il marche bien sauf un problème de centrage du pavé noir contenant le tout, mais ça ne ma gêne pas pour les tests...

J'aimerai bien que certains ayant plus de navigateurs que moi le test et avoir une sorte de 'validation' par des pros de jQuery...

Voici le code css :

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
 
body {
    background-color:#dcdcdc;
    margin: 0; padding: 0;
    font: 10px normal Arial, Helvetica, sans-serif;
}
* {margin: 0; padding: 0; outline: none;}
img {border: none;}
.cache_images_rotator{
    position: absolute;
    left: 0px;
    top: -10000px;
}
h1 {
    font: 3em normal Georgia, "Times New Roman", Times, serif;
    color: #fff;
    text-align: center;
    margin: 100px 0 10px;
}
.container{
    overflow: hidden;
    width: 900px;
    margin: 0 auto;
}
#main {
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #000000;
}
a {
    color: #000;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
/*--Main Image Preview--*/
.main_image {
    width: 600px; height: 450px;
    float: left;
    position: relative;
    overflow: hidden;
    background-color: #000000;
}
.main_image h2 {
    font-size: 2em;
    font-weight: normal;
    margin: 0;
    padding: 10px;
    color : #cc3333;
}
.main_image h2 a{
    color : #cc3333;
}
.main_image p {
    font-size: 12px;
    padding: 0 10px 10px 10px;
    margin: 0;
}
.main_image .desc{
    position: absolute;
    bottom: 0;	left: 0;
    width: 100%;
    display: none;
}
.main_image .toptop{
    position: absolute;
    top: 0;	left: 0;
    width: 100%;
    height:30px;
    display: none;
}
.main_image .block{
    width: 100%;
    background-color: #ffffff;
}
.main_image .blocktop{
    width: 100%;
    height: 30px;
    background-color: #ffffff;
}
.image_thumb {
    float: left;
    width: 133px;
    height : 100px;
}
.image_thumb img {
    float: left;
}
.image_thumb ul {
    margin: 0; padding: 0;
    list-style: none;
}
.image_thumb ul li{
    margin: 0;
    padding: 12px 10px;
    width: 157px;
    float: left;
    background-color: #000000;
}
.image_thumb ul li .block,.image_thumb ul li .blocktop {
    display: none;
}

Voici le code de la page 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
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
 
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
        <link rel="stylesheet" href="css-wttv.css" type="text/css" media="all" />
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
 
                //Show Banner
                $(".main_image .desc").show(); //Show Banner
                $(".main_image .toptop").show(); //Show Banner
                $(".main_image .block").animate({ opacity: 0.65 }, 1 ); //Set Opacity
                $(".main_image .blocktop").animate({ opacity: 0.65}, 1 ); //Set Opacity
 
                //Add class activ to the first thumbnail
                $(".image_thumb ul li a img:first").addClass('active');
 
                // neutralize the click action on img of the thumbnail
                $(".image_thumb ul li a img").click(function(){
                    return false;
                });
                //Hover events for thumbnails
                $(".image_thumb ul li a img").hover(function(){
                    //Set Variables
                    var imgAlt = $(this).parents(2).find('img').attr("alt"); //Get Alt Tag of Image
                    var imgTitle = $(this).parents(2).find('a').attr("href"); //Get Main Image URL
                    var htmlDesc = $(this).parents(2).find('.block').html(); 	//Get HTML of block
                    var htmlTop = $(this).parents(2).find('.blocktop').html(); 	//Get HTML of block
                    var imgDescHeight = $(".main_image").find('.block').height();	//Calculate height of block
                    var imgTopHeight = $(".main_image").find('.blocktop').height();	//Calculate height of blocktop
 
                    if ($(this).is(".active")) {  //If it's already active, then...
                        return false; // Don't hover through
                    } else {
                        //Animate the picture
                        $(".main_image img").animate({ opacity: 0}, 500 , function() {
                            $(".main_image img").attr({ src: imgTitle , alt: imgAlt}).animate({ opacity: 1}, 500 );
                        });
                        //Animate the bottom block
                        $(".main_image .block").animate({marginBottom: -imgDescHeight }, 500 , function() {
                            $(".main_image .block").html(htmlDesc).animate({marginBottom: "0" }, 500 );
                        });
                        //Animate the top block
                        $(".main_image .blocktop").animate({marginTop: -imgTopHeight }, 500 , function() {
                            $(".main_image .blocktop").html(htmlTop).animate({marginTop: "0" }, 500 );
                        });
                        //Remove class of 'active' on all imgs
                        $(".image_thumb ul li a img").removeClass('active');
                        //add class of 'active' on this img only
                        $(this).addClass('active');  
                        return false;
                    }
                });
            });//Close Function
        </script>
 
    </head>
    <body>
        <div class="cache_images_rotator">
            <img src="images/gilles_1.jpg"/>
            <img src="images/gilles_2.jpg"/>
            <img src="images/gilles_tim_1.jpg"/>
        </div><!--cache_images_rotator-->
        <div class="container">
            <h1>Image Gallery w/ Teaser - CSS &amp; jQuery Tutorial d'après l'original avec un fadeout, la mise en cache des images et un return dans //Toggle Teaser pour éviter de bouger la page lorsque l'on collapse... Presentation à la wt et mot clé en haut... Toujours avec mes photos...<small>by Soh Tanaka</small></h1>
        </div>
        <div class="container">
            <a href="http://designm.ag/tutorials/image-rotator-css-jquery/" target="_blank">Images Rotator : http://designm.ag/tutorials/image-rotator-css-jquery/</a>
        </div>
        <div id="main" class="container">
            <div class="main_image">
                <img src="images/gilles_1.jpg" alt="gilles_1"/>
                <div class="toptop">
                    <div class="blocktop">
                        <p>haut 1</p>
                    </div><!--.blocktop-->
                    </div><!--.toptop-->
                <div class="desc">
                    <div class="block">
                        <h2><a href="http://www.google.fr">Slowing Down</a></h2>
                        <p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et <b>par Robomatix le robot</b>.</p>
                    </div><!--.block-->
                </div><!--.desc-->
            </div><!--.main_image-->
            <div class="image_thumb">
                <ul>
                    <li>
                        <a href="images/gilles_1.jpg"><img src="images/gilles_1_thumb.jpg" alt="Slowing Dow" /></a>
                        <div class="blocktop">
                            <p>haut 1</p>
                        </div><!--.blocktop-->
                        <div class="block">
                            <h2><a href="http://www.google.fr">Slowing Down</a></h2>
                            <p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et <b>par Robomatix le robot</b>.</p>
                        </div><!--.block-->
                    </li>
                    <li>
                        <a href="images/gilles_2.jpg"><img src="images/gilles_2_thumb.jpg" alt="Organized Food Fight" /></a>
                        <div class="blocktop">
                            <p>haut 2</p>
                        </div><!--.blocktop-->
                        <div class="block">
                            <h2><a href="http://an200.machinesculte.net">Robomatix the clown</a></h2>
                            <p>The clown Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et <b>par Robomatix le robot</b>.</p>
                        </div><!--.block-->
                    </li>
                    <li>
                        <a href="images/gilles_tim_1.jpg"><img src="images/gilles_tim_1_thumb.jpg" alt="Endangered Species" /></a>
                        <div class="blocktop">
                            <p>haut 3</p>
                        </div><!--.blocktop-->
                        <div class="block">
                            <h2><a href="http://www.machinesculte.net">Le duo infernal</a></h2>
                            <p>Duo Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et <b>par Robomatix le robot</b>.</p>
                        </div><!--.block-->
                    </li>
                </ul>
            </div><!--#image_thumb-->
 
        </div><!--#main-->
    </body>
</html>

Pour ceux que ça intéressent il y a des variantes à la racine du dossier...

Merci de votre aide et de votre temps !

**Bovino** · 16/09/2010, 20h51

J'aimerai bien que certains ayant plus de navigateurs que moi le test

Ce serait pas plus simple d'installer toi-même "plus de navigateurs" et de tester toi-même ?

**robomatix** · 20/09/2010, 14h31

Oui, j'en ai quelques uns... Il faudrait que je prenne le temps d'en installer plus sur mon pc... En fait le problème existe surtout pour les différentes versions d'ie... Et puis, parfois lorsque l'on fait tester par d'autres, il découvrent des bugs que l'on ne voit pas forcément soi même... Chacun à sa logique et on ne pense pas forcément à tout... Donc plus on est à tester mieux c'est... Et ainsi les sources dispos sur le forum sont plus fiables...

Mais je vais tout de même faire un effort pour avoir plus de navigateurs et faire plus de tests par moi même...

Image rotator menu Demande test et validation code

jQuery

Vue hybride

Discussions similaires

Partager

Partager