Opening page via AJAX with Lightbox

Question

I’m using AJAX and Lightbox to upload a page. I will not post the whole code but the link I use to activate Lightbox and load the AJAX page is activated like this:

<a class="lightbox" href="#" onclick="abrirPag('editandomi.php?I_POST=<?php echo $posts['ID'] ?>');">
    TEXTO OU IMAGEM QUE TERÁ O LINK    
</div>

The page editandomi.php captures by means of GET the id of that content and displays detailed information, however i want to improve this... I want to be like on Facebook, when you click on an image or video, if you open a Lightbox and the URL changes to:

https://www.facebook.com/ 

For something like:

https://www.facebook.com/photo.php?fbid=516159178490002&set=a.409523075820280.1073741826.100002877744748&type=1&theater

and when clicking to close this Lightbox the URL goes back to

https://www.facebook.com/ 

How to do this type of loading via AJAX?

Answer 1

For this, you need the HTML5 History API:

history.pushState( estado, titulo, url );

As you just posted the main code, I can not put details at the moment, but for the desired purpose, the essential is to add the pushState in his role abrirPag:

history.pushState( null, null, parametroUsadoNoAbrirPag );

To make more complete code and a better user experience, you can implement the popstate when opening the lightbox, so that the Backspace key or the browser "back" button works properly, both closing the lightbox and showing the previous photo, depending on its implementation:

window.addEventListener( "popstate", function(e) {
   // Aqui vai o código para voltar ao estado anterior da navegacao
});

The first parameter of the pushState mentioned above (state), serves precisely to save the data you want, to be able to use in the function above. If you prefer, you can process the URL directly, and not use the/state.

Here’s a nice tutorial on this link: http://diveintohtml5.info/history.html

Here, a demo of a photo gallery in ajax, with history, and its respective source.
Note that in older browsers, Urls work perfectly, even without Ajax.