$(document).ready(function() non executée
Bonjour,
J'essayes de faire un zoom sur image en me basant sur une video vue sur internet(https://www.youtube.com/watch?v=Glg-G8SCleY)
mais ça marches pas pour moi même si reprends l'intégralité du code, les programmes html et css son exécutés normalement mais pas les instructions
Javascriopt. ça bloque a la première instruction($(document).ready(function()) on dirait qu'elle n'est pas reconnue, quelqu'un pourrait il me dire pourquoi.
Voici mon code et merci d'avance.
Le html:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="zoom.css" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-witdh, initual-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=ie11">
<script type="text/javascript" src="zoom.js"></script>
</head>
<body>
<div class="zoom_area">
<div class="zoom"></div>
<img src="velo.jpg" alt="velo" class="zoom_sur"/>
</div>
</body>
</html> |
le css:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
.zoom_area
{
margin: 30px auto;
width: 400px;
}
.zoom
{
border-radius: 100%;
box-shadow: 0 0 0 7px rgba(255,255,255,0.85), 0 0 7px 7px rgba(20,20,20,0.25), inset 0 0 40px 2px rgba(20,20,20,0.25);
height: 175px;
position: absolute;
width: 175px;
}
.zoom_area img
{
width: 400px;
} |
pour le javascript voici les premieres lignes de code, je n'arrives jamais a la derniere instruction (alert(image.width + " - "+image.height);)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
|
$(document).ready(function() {
$(".zoom_area").each(function() {
var zoom = $(this).find(".zoom");
var zoom_sur = $(this).find(".zoom_sur");
var image = new Image();
image.src = zoom_sur.attr("src");
alert(image.width + " - "+image.height);
});
}); |
