I have designed a web page where on the left there is a div element and in the center there is iframe and on the right I have another iframe.
1.In the center iframe I load thumbnail images on clicking those images the lightbox plugin is get called and larger images has to be displayed on entire document(with blurred background).
2.Problem I’m facing is that the lightbox plug-in is loading inside the center iframe rather than in the entire document(as in many of social networking sites).
3.I have downloaded lightbox plugin from internet and using it in my webpage
4.I want the image to be displayed in entire document with the help of lightbox .
Any help is greatly appreciated
here is the code snippet which I have written
<!--this code is written in home page-->
<div>
<ul>
<li><a href="http://localhost/php/image.php?category=sea" target="description" class="underline">SEA</a></li>
<li><a href="http://localhost/php/image.php?category=ANIMALS" target="description" class="underline">ANIMALS & BIRDS</a></li>
<li><a href="http://localhost/php/image.php?category=plants" target="description" class="underline">plants</a></li>
<li><a href="http://localhost/php/image.php?category=Tourism" target="description" class="underline">Tourism</a></li>
<ul>
</div>
<filedset><iframe name="description" width="725px" height="800px" align="left" frameborder="0" id="description"></iframe></fieldset>
<fieldset>
<iframe name="info" width="300px" height="380px" frameborder="0" src="UserInformation.php" id="iframeid"><!--logged in user's information-->
</iframe>
</fieldset>
<!--this code is written in image.php file-->
<head>
//calling JQUERY LIGHT BOX PLUGIN HERE ON clicking an image displayed in this page(within iframe name="description")
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="../css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
</head>
Thanks.
I have got the solution for the problem which I was facing, here
http://www.dynamicdrive.com/forums/archive/index.php/t-19051.html