How to add Lytebox with AJAX contents ??

2 Votes, Rating: 4

Tags: Ajax Lytebox problem, Lytebox

Lytebox/Lightbox problem with AJAX ??

is there any way to add Lytebox/Lightbox within Ajax/jquery loaded pages ???

YES!, now you can add lytebox effect on Ajax loaded content too,  It was really tough to search out how ?
but i have try a lot and find out a solution, and it works with any Ajax, jquery etc.

for know more about Lytebox please visit on this site

Solution

The problem was that Lytebox gets initialized during page load. Since AJAX bypasses page load, the problem arises.

The Lytebox run by this function initLytebox(); so we just need to call this functions when our ajax parsed data properly.

See Ajax example

Your code will probably look like this…

function handleHttpResponse() {
if (http.readyState == 4) {

document.getElementById(’ResultDiv’).innerHTML = http.responseText;

initLytebox(); //////////// call that function here
}
}

See Jquery example

 Your jquery code will probably look like this…

$.ajax({
type: “POST”,
url: ajax.php”,
data: dataString,
cache: false,
success: function(html){
 $(”#ajaxdata”).prepend(html);
 

///// Lytebox
  initLytebox(); /// add there your lytebox function to work
}
});
 

make sure you have added download js files on this page

enjoy

8 Responses to “How to add Lytebox with AJAX contents ??”

1. roshan says:
   November 18th, 2009 at 7:20 am

   was very helpful thanks a lot

2. Heshan Peiris says:
   December 3rd, 2009 at 10:11 am

   Thanks.

3. CACA-COBRA says:
   February 1st, 2010 at 10:13 am

   NIIIIIIIIIIIIIIIIIIIICEEEEE!!!!!!!

4. Nafees says:
   March 24th, 2010 at 8:15 pm

   My UI gets updated but DOM doesn’t updates the elements. I am using a link to open an iFrame. The link gets updated through Ajax (which is a web service called from javascript). I did re-initialize lytebox but still cannot open the iFrame.When I click viewsource, can still see the old html elements (any guess)

   Thanks, Nafees

5. Taboada says:
   April 15th, 2010 at 10:40 pm

   I have made to this script:
   if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf(”http”)==-1))
   document.getElementById(containerid).innerHTML=page_request.responseText;
   $(function() { $(’a.lightbox’).lightBox(); }); // Adicionado para a LightBox

   And it’s working very fine! Thanks

6. Nidhin says:
   June 11th, 2010 at 9:49 am

   Thanks for your helpful posting, can you help me, how can i use it with prototype? i am not sure, where i need to call this function initLytebox();

   Thanks in advance

7. Jessica says:
   July 22nd, 2010 at 11:15 pm

   Hello, excuse me, but I haven’t made it work, can any one please help me? I’ll really appreciate your help guys !!!

8. SAN says:
   July 23rd, 2010 at 6:42 am

   Jessica, let us know your website url,or codes we will happy to help you

Leave a Reply