thenature4u Posted September 9, 2009 Share Posted September 9, 2009 Hi, Light box is working properly when the images are static. But for my application images loads dynamically from another php page using ajax. But this light box is not working for these images. Please help me. this is my code. try1.php code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>jQuery lightbox clone - prettyPhoto - by Stephane Caron</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> google.load("jquery", "1.3"); </script> <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" /> <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script> <style type="text/css" media="screen"> * { margin: 0; padding: 0; } body { font: 62.5%/1.2 Arial, Verdana, Sans-Serif; padding: 0 20px; } h4 { margin: 15px 0 5px 0; } h4, p { font-size: 1.2em; } ul li { display: inline; } </style> <script src="js/ajax.js" type="text/javascript" charset="utf-8"></script> </head> <body onload="testajax();"> <div id="naren"></div> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $(".gallery a[rel^=prettyPhoto]").prettyPhoto({theme:'dark_rounded'}); }); </script> </body> </html> try2.php (ajax response page) <h4>Gallery 2</h4> <ul class="gallery clearfix"> <li><a href="images/fullscreen/3.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="Lol" /></a></li> <li><a href="images/fullscreen/4.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="" /></a></li> <li><a href="images/fullscreen/5.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="" /></a></li> <li><a href="images/fullscreen/1.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="" /></a></li> <li><a href="images/fullscreen/2.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="" /></a></li> </ul> I hope you understand the problem. Thanks, Naren Quote Link to comment Share on other sites More sharing options...
TeNDoLLA Posted September 9, 2009 Share Posted September 9, 2009 I think this might be more of a JavaScript problem. Also without seeing the ajax request can't say much. It might be so that the ajax results are not bound correctly or at all to the DOM. Have you tried debugging with Firebug or have you checked the javascript error console for errors? I still suggest you ask this on JS forums. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.