Conflit entre deux plugin jQuery, ou pas.

**kizery** · 31/05/2018, 13h05

Bonjour à tous,

J'aimerai utiliser le plugin zoombox pour ma galerie de photo, ainsi qu'un plugin de pagination ( que j'ai adapté à mes besoins) :

http://grafikart.github.io/Zoombox/howto.html

https://esimakin.github.io/twbs-pagination/

Cependant, depuis que j'ai intégré le script de pagination, mon script zoombox ne fonctionne plus

voici mes codes :

Page principale

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
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
<head>
     <title>Y.GUIDI Portfolio</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <link rel="stylesheet" href="style.css" />
 
     <script type="text/javascript" src="zoombox/zoombox.js"></script>
     <script type="text/javascript" src="zoombox/jquery.min.js"></script>
     <link href="zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />
 
            <script type="text/javascript">
            jQuery(function($){
              $('a.zoombox').zoombox({
                gallery : false,
              });
            });
            </script>
 
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.twbsPagination.min.js"></script>
 
</head>
 
<?php
  try
            {
              $bdd = new PDO('mysql:host=localhost;dbname=mes_images;charset=utf8', 'root', '');
            }
            catch(Exception $e)
            {
                    die('Erreur : '.$e->getMessage());
            }
 
            // $total = $bdd->query('SELECT count(*) FROM gallery');
 
            $sql = "SELECT count(*) FROM `gallery`";
            $result = $bdd->prepare($sql);
            $result->execute();
            $number_of_rows = $result->fetchColumn();
             
            $result->closeCursor();
 
            $pagefloat= $number_of_rows/15;
            $nombre_pages=ceil($pagefloat);
?>
 
  <body>
 
    <div id="bloc_page">
 
      <?php include("header.php"); ?>           
 
         <div id="contenu_site">
 
                 <script>
                  $('#bloc_page').twbsPagination
                    ({
                      totalPages: parseInt('<?php echo $nombre_pages; ?>') ,
                      visiblePages: parseInt('<?php echo $nombre_pages; ?>') ,
                      next: 'Next',
                      prev: 'Prev',
                      onPageClick: function(event, page)
                      {
                      var param = 'l=' +page;
                      //fetch content and render here
                      $('#contenu_site').load('affichegal.php', param);
                      }
                    });
                 </script>
          </div>
 
      <?php include("footer.php"); ?>
 
    </div> 
  </body>
</html>

Page qui va récupérer les images dans une BDD pour les inclure dans une balise <figure>

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
<div id="menu_galerie">
    <?php
      try
        {
          $bdd = new PDO('mysql:host=localhost;dbname=mes_images;charset=utf8', 'root', '');
        }
        catch(Exception $e)
        {
                die('Erreur : '.$e->getMessage());
        }
          
      $nb_affichage_par_page=15;
 
      $l=$_GET['l'];
      $j=$l-1;
      $x=$j*$nb_affichage_par_page;
        // on exécute la requête
      $req = $bdd->query('SELECT adresse, datelieu, imgtitle FROM gallery ORDER BY ID DESC LIMIT '.$x.','.$nb_affichage_par_page) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
 
      // on va scanner tous les tuples un par un et on affiche les images
      while ($data = $req->fetch())
        {
    ?>
          <figure>
 
            <a class="zoombox zgallery1" href='<?php echo htmlspecialchars($data['adresse']); ?>'>
              <img src="<?php echo htmlspecialchars($data['adresse']); ?>" alt="<?php htmlspecialchars($data['imgtitle']); ?>">
              <figcaption>
                <?php echo htmlspecialchars($data['imgtitle']); ?> <br />
                <em><?php echo htmlspecialchars($data['datelieu']); ?></em>
              </figcaption>
            </a>
 
          </figure>
 
    <?php
        }
              // on libère l'espace mémoire alloué pour cette requête
      $req->closeCursor();
    ?>
</div>

J'essaye de charger jquery.min.js deux fois (deux dossiers différents) pour deux versions différentes de jQuery. Je pensais que c'était le problème, j'ai alors laissé uniquement le plus récent, mais ça ne change rien ...

Ou alors il faut charger le script "zoombox" uniquement quand les images de la BDD sont chargé ? Comment faire ?

Bref, auriez vous une idée du problème ?