Updating content within a Lightbox without giving Refresh on page

3

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

    
asked by anonymous 16.06.2014 / 23:05

1 answer

3

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

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

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

Cancel the fragment identifier

The solution is to prevent this default click behavior from being performed, the easiest way being to add ! after # in 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 since there are no elements with a ID exactly equal to ! , is not performed by the browser.

Using JavaScript

You can also add in the onclick attribute the default behavior of the fragment identifier # by using return false; :

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

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

28.06.2014 / 23:12