bonjour, j’essaie de mettre en place une galerie de gif animés en combinant Ajax Infinite Scroll et un plugin empechant la lecture automatique du gif animé (la lecture se déclenchant par un clic), mais quelque soit la méthode employée celle-ci ou celle-la, j'ai systématiquement le même problème, le gifplayer ne fonctionne qu’avec les dix premières images de ma galerie (car j’ai limité le nombre d’affichage à 10 par page dans config.php), au delà, plus rien ne s'affiche…la classe «gifs» n’est apparemment plus reconnue, auriez-vous une solution pour ce problème ?
le php Infinite Ajax Scroll :
Code :
- <?php
- include('config.php');
- $page = (int) (!isset($_GET['p'])) ? 1 : $_GET['p'];
- # sql query
- $sql = "SELECT id, mygif FROM travaux";
- # find out query stat point
- $start = ($page * $limit) - $limit;
- # query for page navigation
- if( mysql_num_rows(mysql_query($sql)) > ($page * $limit) ){
- $next = ++$page;
- }
- $query = mysql_query( $sql . " LIMIT {$start}, {$limit}" );
- if (mysql_num_rows($query) < 1) {
- header('HTTP/1.0 404 Not Found');
- echo 'Page not found!';
- exit();
- }
- ?>
|
le html :
Code :
- <div class="galerie">
- <!-- loop row data -->
- <?php while ($row = mysql_fetch_array($query)): ?>
- <div class="vignette" id="vignette-<?php echo $row['id']?>">
- <div class="inner">
- <h1 style="font-size: 3em; filter : alpha(opacity=60); opacity : 0.60; color: #F9F9F9; width: 100%; margin-top: 30px; margin-left: 30px; position:absolute; z-index:2; text-align:left; font-family:'Exo 2', sans-serif">#<?php echo $row["id"]?></h1>
- <img data-gifffer="<?php echo $row["mygif"]; ?>">
- <div class="boutonn">
- <a class="visit" href="ur.php?id=<?php echo $row ['id']; ?>">voir la galerie</a>
- </div><!-- bouton -->
- </div><!-- inner -->
- </div><!-- lol -->
- <?php endwhile?>
- <!--page navigation-->
- <?php if (isset($next)): ?>
- <div class="nav"><a href='gif.php?p=<?php echo $next?>'>Next</a></div>
- <?php endif?>
- </div><!--galerie-->
|
le javascript du player gif :
Code :
- <script type="text/javascript" src="js/gifffer.js"></script>
- <script>
- window.onload = function() {
- Gifffer();
- }
- </script>
|
le javascript d'infinite scroll :
Code :
- <script type="text/javascript" src="js/jquery-ias.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- // Infinite Ajax Scroll configuration
- jQuery.ias({
- container : '.fafa', // main container where data goes to append
- item: '.vignette', // single items
- pagination: '.nav', // page navigation
- next: '.nav a', // next page selector
- loader: '<img src="css/img/ajax-loader.gif"/>', // loading gif
- triggerPageThreshold: 1 // show load more if scroll more than this
- });
- });
- </script>
|
