lightbox on page loaded with ajax

Question

Good people... here’s the thing: I’m making a page in php but java I don’t really know anything.... I used only java that I removed from an example to make dynamic page loading and to make a lightbox... the problem is when I want to conjugate the 2.... I want the lightbox working inside a page loaded with ajax.... here is the code:

index page.php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#menu a").click(function( e ){
      e.preventDefault();
      var href = $( this ).attr('href');
      $("#center_content").load( href +" #center_content");
    });
  });
</script>

and in the div "center_content" the contents are loaded.... now on the content page with lightbox

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>
<script type="text/javascript">
  $(function($){
    var addToAll = false;
    var gallery = false;
    var titlePosition = 'over';
    $(addToAll ? 'img' : 'img.fancybox').each(function(){
      var $this = $(this);
      var title = $this.attr('title');
      var src = $this.attr('data-big') || $this.attr('src');
      var a = $('<a href="#" class="fancybox"></a>').attr('href', src).attr('title', title);
      $this.wrap(a);
    });
    if (gallery)
      $('a.fancybox').attr('rel', 'fancyboxgallery');
    $('a.fancybox').fancybox({
      titlePosition: titlePosition
    });
  });
  $.noConflict();
</script>

NOTE: I did not put the calls from the script but they are there.... Can anyone tell me what to change? because of this I do not understand ANYTHING!

Answer 1

You can only instantiate a lightbox after its html exists.

$("#center_content").load( href +" #center_content", function() {
    //aqui dentro você dispara o lightbox
});

http://wbruno.com.br/ajax/usando-lightbox-em-pagina-carregada-ajax/

Dude, besides, you shouldn’t bring any javascript on the loaded page.

Make it all available in the first load and don’t bring any script tag via ajax.