Opening page via AJAX with Lightbox

Navigation
2

I'm using AJAX and Lightbox to load a page. I will not post the whole code but the link I use to enable Lightbox and load the AJAX page is enabled 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 GET o id of that content and displays detailed information, however I want to improve this ... I want to type in Facebook when clicking image or video, a Lightbox opens, 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

Clicking to close this Lightbox returns the URL to 

https://www.facebook.com/

How to do this type of loading via AJAX?

    
asked by anonymous 23.05.2014 / 07:23

1 answer

4

For this, you need the HTML5 History API: 

history.pushState( estado, titulo, url );

As you just posted the main code, I do not have as per details at the moment, but for the desired effect, the main thing is to add pushState to your function abrirPag : 

history.pushState( null, null, parametroUsadoNoAbrirPag );

To make code more complete and user-friendly, you can implement popstate by opening lightbox , so that the backspace key or browser's "back" button works correctly, either by closing the lightbox or showing the previous photo, depending on your implementation: 

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

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

  

Here's a nice tutorial on this link: link

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

    
23.05.2014 / 09:01
How to make a hover box [closed] Change tab of the fields of a MacAddress