2

Eu estou usando AJAX e Lightbox pra carregar uma página. Não irei postar o código todo mas o link que eu uso para ativar o Lightbox e carregar a página AJAX é ativado assim:

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

A pagina editandomi.php capta por meio GET o id daquele conteúdo e exibe informações detalhadas, porém eu quero melhorar isso... Quero fazer tipo no Facebook, quando se clica em cima de uma imagem ou video, se abre um Lightbox e a URL muda para de:

https://www.facebook.com/ 

Para algo do tipo:

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

e ao clicar para fechar esse Lightbox a URL volta novamente para

https://www.facebook.com/ 

Como fazer esse tipo de carregamento via AJAX?

1 Resposta 1

4

Para isto, você precisa da API de histórico do HTML5:

history.pushState( estado, titulo, url );

Como você só postou o código principal, não tenho como por detalhes no momento, mas para o efeito desejado, o essencial é acrescentar o pushState na sua função abrirPag:

history.pushState( null, null, parametroUsadoNoAbrirPag );

Para fazer um código mais completo e uma melhor experiência para o usuário, você pode implementar o popstate ao abrir o lightbox, para que a tecla backspace ou o botão de "voltar" do navegador funcione corretamente, tanto fechando o lightbox quanto mostrando a foto anterior, dependendo da sua implementação:

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

O primeiro parametro do pushState mencionado anteriormente (estado), serve justamente para guardar os dados que você quiser, para poder usar na função acima. Se preferir, pode processar a URL diretamente, e não usar o estado/state.

Eis um belo tutorial neste link: http://diveintohtml5.info/history.html (en)

Aqui, um demo de uma galeria de fotos em ajax, com histórico, e seu respectivo source.
Notar que nos browsers mais velhos, os URLs funcionam perfeitamente, mesmo sem Ajax.

2
  • Sua resposta foi exatamente o que eu estava procurando. Inclusive o demo que você me passo, já que eu pretendo fazer uma galeria. 23/05/2014 às 16:42
  • @ivanveloso gostei bastante da simplicidade daquele demo, e o tutorial do pessoal lá é bem explicadinho. No seu caso específico, acho que o único acrescimo vai ser abrir o lightbox automaticamente quando a URL tiver o parâmetro da foto (caso o usuário copie o link da foto aberta). Sucesso na implementação!
    – Largato
    23/05/2014 às 16:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .