[Jquery] Coupler deux scripts js

**lemirandais** · 07/09/2009, 19h01

Bonjour à tous.

Je suis en train de faire une galerie d'image a partir d'un tutoriel et je souhaiterais couplé ce script avec zoombox.
Cependant le problème est que la galerie fonctionne mais lorsque je clique sur l'image lié au rel, impossible de le faire fonctionne.
Pourriez vous m'aider.
Lien de la page test: http://grada.u7n.org/sitecocom/phototheque.html
Je pense que c'est mon premier script qui ne fonctionne pas, à savoir le code qui génère une erreur.

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
 
(function($) {
$(document).ready(function(){
 
			//Larger thumbnail preview 
 
			$("ul.thumb li").hover(function() {
			$(this).css({'z-index' : '10'});
			$(this).find('img').addClass("hover").stop()
			.animate({
			marginTop: '-65px', 
			marginLeft: '-65px', 
			top: '50%', 
			left: '50%', 
			width: '174px', 
			height: '174px',
			padding: '20px' 
			}, 200);
 
			} , function() {
			$(this).css({'z-index' : '0'});
			$(this).find('img').removeClass("hover").stop()
			.animate({
			marginTop: '0', 
			marginLeft: '0',
			top: '0', 
			left: '0', 
			width: '60px', 
			height: '60px', 
			padding: '5px'
			}, 400);
			});
 
			//Swap Image on Click
			$("ul.thumb li a").click(function() {
 
			var mainImage = $(this).attr("href"); //Find Image Name
			$("#main_view img").attr({ src: mainImage });
			return false;		
			});
 
			});
})(jQuery);

lemirandais

**danielhagnoul** · 07/09/2009, 22h06

Bonsoir.

Je n'ai plus le temps de charger le plugin zoombox et de faire les tests ce soir.

Voici le résultat de mon premier test sur votre code, vous arriverez peut-être à en tirer quelque chose :

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
 
<!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;
        }
        div.container {
            margin-top:100px;
            margin-left:100px;
        }
        ul.thumb img {
            width:50px;
            height:50px;
            border:1px solid red;
        }
        div#main_view {
            margin-top:18px;
        }
        div#main_view img {
            width:400px;
            height:400px;
            border:1px solid #0000FF;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        (function($){
            $(document).ready(function(){
                $("ul.thumb li").hover(
                    function() {
                        $(this).css({zIndex: 10});
                        $(this).find('img').addClass("hover").stop().animate(
                        {
                            marginTop: -65, 
                            marginLeft: -65, 
                            top: '50%', 
                            left: '50%', 
                            width: 174, 
                            height: 174,
                            padding: 20 
                        },
                        200);
                    },
                    function(){
                        $(this).css({zIndex: 0});
                        $(this).find('img').removeClass("hover").stop().animate(
                        {
                            marginTop: 0, 
                            marginLeft: 0,
                            top: 0, 
                            left: 0, 
                            width: 60, 
                            height: 60, 
                            padding: 5
                        },
                        400);
                    }
                );
 
                $("ul.thumb img").click(function(){
                    var url = $(this).attr("mainURL");
                    var alt = $(this).attr("alt");
                    var title = $(this).attr("title");
 
                    $("#main_view a").attr({
                        href: url,
                        title: title
                    });
 
                    $("#main_view img").attr({
                        src: url,
                        alt: alt,
                        title: title
                    });
                });
            });
        })(jQuery);
    </script>
</head>
<body>
    <div class="container">
        <ul class="thumb">    
            <li>
                <img src="../images/imageTest.png" alt="Un belle image" title="Le titre de la belle image" mainURL="../images/imageTest.png" />
            </li>        
        </ul>
        <div id="main_view">
            <a href="" title="" rel="zoombox">
                <img src="" alt="" title="" />
            </a>
        </div>
    </div>
</body>
</html>

**lemirandais** · 08/09/2009, 08h54

Merci pour cette réponse mais j'ai trouvé mon problème, il fallait ordonné correctement tous les scripts javascript correctement.

[Jquery] Coupler deux scripts js

jQuery

Discussions similaires

Partager

Partager