Comment modifier l’historique comme le fait la visionneuse de photos facebook?

J’ai sur mon site un menu contextuel semblable à la visionneuse de photos de facebook. Lorsque le modal est ouvert, il affiche le contenu d’une autre page et je souhaite modifier la valeur de la barre d’adresse et l’historique pour l’afficher.

Il y a une liste déroulante dans le modal qui modifie le contenu du modal en celui d’une autre page. Lorsque cela se produit, je souhaite à nouveau modifier la valeur de la barre d’adresse et l’historique pour indiquer que la page a été modifiée.

En gros, je veux reproduire exactement le comportement de la visionneuse de photos de Facebook , que vous pouvez essayer en:

1. En cliquant sur ce lien
2. En cliquant sur les Photos
3. En cliquant sur une photo sur la page
4. Cliquez sur les flèches droite ou gauche (ou utilisez les touches fléchées du clavier) pour modifier les parameters
5. a) cliquez sur les boutons d’historique précédent et suivant dans votre navigateur
6. b) cliquez sur la visionneuse de photos

J’ai essayé de créer un JSFiddle pour montrer où j’en suis, mais JSFiddle ne permet apparemment pas de manipuler l’histoire. En tant que tel, j’ai mis mon code en ligne ici et vous pouvez le télécharger ici .

• Adresse jQuery: certifie que l’utilisateur appuie sur le bouton d’avance et non sur le bouton de retour
• Pinterest aime le chargement
• JQuery: marquer les liens comme visités sans les ouvrir?
• Historique API html5, comment savoir quand un utilisateur a cliqué sur les boutons du navigateur suivant / précédent?
• Soutenir le bouton Précédent du navigateur avec ajax sans compter sur un changement de hachage?

Quelques points clés:

• Commencez par afficher la page d’index, puis utilisez le lien pour accéder à la page de test.
• Lorsque le modal est fermé, une pression sur le bouton Précédent ne devrait pas rouvrir le modal, mais devrait plutôt vous ramener à la page d’index.
• Après la fermeture du modal, une pression sur le bouton Suivant devrait rouvrir le modal dans son état d’origine, à l’instar de la visionneuse de photos de Facebook.
• Dans mon code de production, l’URL complète sera modifiée au lieu d’append / de modifier une variable dans l’URL, comme indiqué dans le code de démonstration.

• Mettre à jour l’URL du navigateur sans recharger la page
• Est-ce une bonne façon d’utiliser History.js?
• Comment utiliser effectivement history.js sur mon site
• Historique ajax jquery inter-navigateur avec window.history.pushState et fallback
• history.back (); ne déclenche pas $ (document) .ready ();

 history.pushState(stateObj, "page 2", "image\id.html");