Updating content inside a Lightbox without giving Refresh on the page

Question

Good guys, I’m using Lightbox and Ajax for content magnification. The content itself has always been accompanying an image, so just click on this image and it magnifies and appears the text referring to that image, as if it were the Facebook Lightbox. Good as soon as the content is expanded also has those arrows to be able to view the previous post or the following. The problem is there, suppose I scroll half the page down and click on a content that I found interesting there I want to open, after I click on next or previous page back to the top, now if I click on any content, close Lightbox and click on other content it does not return to the top.

I want you to click next or previous without going back to the top. I’ve tried some things and nothing worked.

Script by Lightbox:

<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>

Script for loading Ajax

<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 the post id and upload the information related to it

Answer 1

Your page is "back to top" because when you click:

<a class="lightbox" href="#" onclick="abrirPag('midia.php?I_POST=1');">

You have a # in the attribute href which by default will add to you that same # address of the page in your browser, giving rise to "back to the top". This is a standard behavior of browsers because effectively the # is known as fragment identifier and used to allow scroll automatic to a specific page location.

Cancel the fragment identifier

The solution is to prevent this standard click behavior from being realized, the simplest way being to add a ! after the # in the attribute href:

<a class="lightbox" href="#!" onclick="abrirPag('midia.php?I_POST=1');">

^{As the fragment identifier is supposed to contain after it a value corresponding to a ID on the page and as there are no elements with a ID exactly the same as !, the scroll is not performed by the browser.}

Using Javascript

You can also add to the attribute onclick the cancellation of the standard behavior of the fragment identifier # making use of the return false;:

<a class="lightbox" href="#" onclick="abrirPag('midia.php?I_POST=1'); return false;">

^{In Javascript, the return false is used to prevent the rest of the code from running. When applied after calling a function within the attribute onclick, it will prevent the browser from continuing to react to the click thus canceling the reading of the attribute href.}