Création de galerie avec Magnific popup

**flappy** · 21/03/2017, 19h01

Bonjour,

Je suis débutant et je rencontre un problème avec le script Magnific Popup. Je dois l'utiliser pour faire une galerie d'image avec des boutons pour naviguer.
J'ai suivis la documentation pour simplement faire tourner un exemple et je n'y arrive pas.

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
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
<!DOCTYPE html>
<html lang="en">
<head>
 
 
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
    <style type="text/css"></style>
 
    <!-- Magnific Popup core CSS file -->
    <link rel="stylesheet" href="css/magnific-popup.css">
 
    <!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
    <!-- Magnific Popup core JS file -->
    <script src="include/jquery.magnific-popup.js"></script>
 
 
<div class="gallery-item">
    <a href="images/annonces/28_photo_1.jpg" title="The Cleaner"><img src="images/annonces/28_photo_0.jpg" width="75" height="75"/></a>
    <a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" title="Winter Dance"><img src="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_s.jpg" width="75" height="75"/></a>
    <a href="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_b.jpg" title="The Uninvited Guest"><img src="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_s.jpg" width="75" height="75"></a>
    <a href="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_b.jpg" title="Oh no, not again!"><img src="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_s.jpg" width="75" height="75"></a>
    <a href="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_b.jpg" title="Swan Lake"><img src="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_s.jpg" width="75" height="75"></a>
    <a href="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_b.jpg" title="The Shake"><img src="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_s.jpg" width="75" height="75"></a>
    <a href="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg" title="Who's that, mommy?"><img src="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_s.jpg" width="75" height="75"></a>
</div>
 
<script type="text/javascript">
$(document).ready(function() {
 
  $('.gallery-item').magnificPopup({
    type: 'image',
    gallery:{
      enabled:true
    }
  });
 
 
});
 
</script>
 
 
 
</body>
</html>

La page m'affiche bien les images mais lorsque je clique dessus le navigateur m'ouvre les images et non le popup, comme si le JS ne s'exécutait pas.

Si quelqu'un a une idée de ce qui ne va, ça m'aiderait beaucoup...

Merci d'avance pour votre aide

PS: je pense que je suis dans la bonne section pour cette question, je m'excuse d'avance si ça n'est pas le cas, je bougerai la conversation

**flappy** · 23/03/2017, 12h35

Bon j'ai réussi à faire ce que je voulais mais en me passant de ce plug-in

Création de galerie avec Magnific popup

jQuery

Discussions similaires

Partager

Partager