Jump to content

LIGHT BOX PROBLEM


thenature4u

Recommended Posts

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

 

Link to comment
https://forums.phpfreaks.com/topic/173640-light-box-problem/
Share on other sites

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.

Link to comment
https://forums.phpfreaks.com/topic/173640-light-box-problem/#findComment-915302
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.