[AJAX] Scroll infini de masonry

**AntiLoxy** · 29/11/2012, 01h40

Salut à tous, je vous explique mon problème.
J'ai installé le scroll infinite de masonry sur ma gallerie d'image.
Le chargement des images suivante ce fait sans soucis mais lorsque je veux lancer une popup (javascript) des images scrollé j'ai aucune réponse.
C'est comme si le script ne se charge pas.

Voilà le code :

Code :

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
<body id="base" class="use-hover">
<nav id="site-nav">
..... <!-- menu -->
</nav>
...
<div id="content" class="transitions-enabled infinite-scroll clearfix">
.... <!-- div(s) de la gallerie images -->
</div>
 
<nav id="page-nav">
  <a href="2.htm"></a> //page identique à la premiere à part pour les images
</nav>
 
<div id="popup_poste" class="popup_block">
	<p>LingLing pour halloween</p>
	 <div class="blocFils1">
	 <a href="#?w=25" rel="popup_image" class="poplight">
	 	<img src="3.jpg" border="0" alt="Description Image">
	 </a>
	 </div>
	 <div class="blocFils2">social</div>
</div>
 
<div id="popup_image" class="popup_block">
	<p>Titre</p>
	 <img src="3.jpg" border="0" alt="Description Image">
</div>
 
<script>
  $(function(){
 
    var $container = $('#content');
 
    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: '#globalcadre',columnWidth: 0
      });
    });
 
    $container.infinitescroll({
      navSelector  : '#page-nav',    // selector for the paged navigation 
      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
      itemSelector : '#globalcadre',     // selector for all items you'll retrieve
      loading: {
          finishedMsg: 'No more pages to load.',
          img: 'http://i.imgur.com/6RMhx.gif'
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true ); 
        });
      }
    );
 
  });
</script>

Merci d'avance pour vos réponses !

**AntiLoxy** · 30/11/2012, 22h52

J'ai résolu mon problème, voilà la marche à suivre :

Code :

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

$(document).on("click","a.poplight[href^=#]",function(){

Il faut utilisé document, aucune autre méthodes fonctionnent.
En espérant que cela soit utile pour d'autres personnes.

[AJAX] Scroll infini de masonry

AJAX

Discussions similaires

Partager

Partager