O código que você tentou usar, mostrado na pergunta e copiado de uma questão do site gringo não me parece ser o que você precisa. O código apenas verifica se na URL da barra de endereço do navegador possui um hash
específico para disparar uma função. O que você quer, na verdade, é mais simples, que é apenas disparar o link com o Lightbox2.
Isso é bem simples de se fazer:
Basta, após o carregamento do DOM, você disparar um .click()
no link do Lightbox2 após um pequeno delay com setTimeout
:
$(document).ready(function(){
setTimeout(function(){
$("#myLightbox").click();
}, 500);
});
Veja que coloquei um atraso de 500 milissegundos
(ou meio segundo), já que a documentação do plugin não informa nenhum callback
de quando o componente foi carregado (o que seria o ideal). Então você pode ajustar esse valor de 500
para mais ou para menos de acordo com o que achar melhor e que o tempo seja suficiente para que o plugin tenha sido carregado.
Importante:
O evento $(document).ready(function(){...
necessita que o jQuery já tenha sido invocado na página, senão resultará em erro. Você pode substituir essa linha pelo código nativo do JavaScript document.addEventListener("DOMContentLoaded", function(){
se quiser ou for o caso.
Veja funcionando:
$(document).ready(function(){
setTimeout(function(){
$("#myLightbox").click();
}, 500);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox.js"></script>
<a href="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" data-lightbox="image-1" data-title="" id="myLightbox"></a>
Aguarde meio segundo...
Uma outra forma é usando setInterval
até que a div#lightboxOverlay
seja criada pelo plugin, indicando que ele já está pronto:
$(document).ready(function(){
var tempo = setInterval(function(){
if($("#lightboxOverlay").length){
clearInterval(tempo);
$("#myLightbox").click();
}
}, 1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox.js"></script>
<a href="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" data-lightbox="image-1" data-title="" id="myLightbox"></a>