$(document).ready(function() non executée

**tipa42** · 29/01/2018, 04h47

Bonjour,

J'essayes de faire un zoom sur image en me basant sur une video vue sur internet(

)
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 html :

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
 
<!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 css :

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
 
.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 javascipt :

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

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);
});
     });

**exe2bin** · 29/01/2018, 12h08

Essaies de mettre ta balise

Code :

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

<script type="text/javascript" src="zoom.js"></script>

en dernier , juste avant le

Code :

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

</body>

**mathieu** · 29/01/2018, 12h16

vous utilisez le "$" de jQuery mais je ne vois pas de chargement de jQuery dans votre code.
regardez là : https://code.jquery.com/

**tipa42** · 30/01/2018, 04h19

Merci, ça marche

effectivement, je n'avais pas chargé les jquery.
Mais ça prend une éternité pour les charger.
je suppose qu'en installant Jquery ça va être plus rapide

**SpaceFrog** · 30/01/2018, 08h10

je suppose qu'en installant Jquery ça va être plus rapide

installant ?
Jquery c'est juste une balise script qui pointes sur un src ...
Il n'y a pas plus d'installation que ça
Niveau taille ce n'est que quelque centaines de ko ...

**tipa42** · 31/01/2018, 03h34

c'est vrai.

juste enregistrer le jquery dans le repertoire voulu et c'est bon

$(document).ready(function() non executée

jQuery

Discussions similaires

Partager

Partager