Good luck, I'm using Lightbox and Ajax for content expansion. The content itself is always accompanied by an image, so just click on that image that it enlarges and the text referring to that image appears, as if it were the Facebook Lightbox. Well as soon as the content is enlarged you also have those arrows to see the previous or next post. The problem is there, suppose I roll half the page down and click on a content that I found interesting to open, after I click on next or previous page back to top, now if I click on any content, close the Lightbox and click on other content it does not return to the top.
I want you to click on next or previous without going back to the top. I've tried a few things and nothing worked out.
LightBox Script:
<script type="text/javascript">
$(document).ready(function() {
$('.lightbox').click(function(e){
e.preventDefault();
$('.background, .box').animate({'opacity':'.8'}, 0);
$('.box').animate({'opacity':'1.00'}, 0);
$('.background, .box').css('display', 'block');
});
$('.close').click(function(){
$('.background, .box').animate({'opacity':'0'}, 0, function(){
$('.background, .box').css('display', 'none');
});
});
$('.background').click(function(){
$('.background, .box').animate({'opacity':'0'}, 0, function(){
$('.background, .box').css('display', 'none');
});
});
});
</script>
Ajax load script
<script type="text/javascript">
function GetXMLHttp() {
if(navigator.appName == "Microsoft Internet Explorer") {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
var xmlRequest = GetXMLHttp();
function abrirPag(valor){
var url = valor;
xmlRequest.open("GET",url,true);
xmlRequest.onreadystatechange = mudancaEstado;
xmlRequest.send(null);
if (xmlRequest.readyState == 1) {
document.getElementById("conteudo_mostrar").innerHTML = "<img src='loader.gif'>";
}
return url;
}
function mudancaEstado(){
if (xmlRequest.readyState == 4){
document.getElementById("conteudo_mostrar").innerHTML = xmlRequest.responseText;
}
}
</script>
Both scripts are triggered with the link:
<a class="lightbox" href="#" onclick="abrirPag('midia.php?I_POST=<?php echo $posts['ID'] ?>');">
The midia.php page is part of the Ajax upload, in it I get GET the post id and load the information about it