infinite scroll plugin + isotope plugin
Bonjour,
Je suis entrain de créer mon site perso et j'utilise pour la présentation de mon portfolio le plugin isotope (http://isotope.metafizzy.co/).
J'aimerai ajouter à isotope le plugin infinite scroll (http://www.infinite-scroll.com/) avec un trigger manuel (http://www.infinite-scroll.com/trigger.html).
J'ai commencé l'intégration de ce plugin mais j'ai quelques soucis.
Lorsque je veux charger le contenu supplémentaire (via un bouton <a>), le plugin infinite scroll charge la page indiquée (index2.html) et modifie l'url (www.site.com/index2.html). Cependant le nouveau contenu présent dans index2.html n'est pas chargé après le clic. Il faut que je clique 2 fois sur le bouton pour que ça charge le contenu supplémentaire. (dans ma page index2.html j'affiche aussi le bouton pour charger le contenu de la même page (index2.html). En fait ça marche seulement quand je charge la même page, j'ai deux fois le même contenu qui s'affiche.
En gros j'arrive à faire fonctionner la fonction principale qui est de charger du contenu supplémentaire mais pas du tout comme il faut.
Je pense avoir peut être un problème de structuration des mes pages html (hiérarchisation des dossiers, répertoires des pages a charger). (ma page index.html et index2.html sont dans le répertoire source du siteweb).
Le résultat que j'aimerai obtenir est celui-ci : http://www.infinite-scroll.com/trigger.html ou celui ci http://isotope.metafizzy.co/demos/infinite-scroll.html .
Dans ces deux exemples, on voit que lorsque le contenu supplémentaire est chargé alors l'adresse url du site ne change pas. Je pense que tous mes problème viennent de la. Je ne comprend pas comment ils font pour avoir la même url et charger du contenu supplémentaire. Il y a pourtant plusieur fichier html de nom différents. Ou alors est ce possible d'avoir une seulle page avec plusieurs url?
voici mes code
html pour appeler le contenu à charger:
Code:
<a id="next" href="index2.html">more</a>
javascript infinite scroll :
Code:
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
| <script>
$(function(){
var $container = $('#container');
$container.infinitescroll({
navSelector : 'a#next:last',
nextSelector : 'a#next:last',
itemSelector : '.element',
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/qkKy8.gif'
}
}
);
function( newElements ) {
$container.isotope( 'appended', $( newElements ) );
}
// kill scroll binding
$(window).unbind('.infscr');
// hook up the manual click guy.
$('a#next').click(function(){
$(document).trigger('retrieve.infscr');
return false;
});
// remove the paginator when we're done.
$(document).ajaxError(function(e,xhr,opt){
if (xhr.status == 404) $('a#next').remove();
});
});
</script> |
En espérant que quelqu'un puisse m'aider car je trouve pas la solution....
Merci d'avance
