Jump to content

Lightbox

DarkPrince2005

By DarkPrince2005
in Javascript Help

Recommended Posts

DarkPrince2005 Advanced Member

DarkPrince2005

Posted
Posted

Ok guys, I'm using a lightbox script. But it seems to ignore the size i set in the css, Has anyone gotten it to customize the size of the lightbox pop-up windows?

.leightbox {width:300px;
padding: -10px -10px -10px -10px;
color:#FFFFFF;
display: none;
border: 10px solid;
background-color: white;
text-align: left;
z-index:5010;
height: 500px;
overflow: auto;
}

#lightbox.done #lbContent{
    display:block;
    width: *280px;*
    height: *280px;*
    border: 10px solid white;
}

#overlay{
position: absolute;
padding: -10px -10px -10px -10px;
top: 0;
left: 0;
z-index: 90;
width: 300px;
height: 500px;
background-color: #000;
filter:alpha(opacity=100);
-moz-opacity:0.;
opacity: 0;
}
.img{
behavior: url(scripts/iepngfix.htc);
}


.lightbox[id]{ /* IE6 and below Can't See This */    position:absolute;    }
#overlay[id]{ /* IE6 and below Can't See This */    position:absolute;    }

 

 

<?php
//include "functions.php";
//include "modcart.php";

?>
<html>
<head>
<meta name="description" content="Clear boxes for a professional look and finish. A practical solution to save space and money. Make storage seem effortless.">

<title>Clear shoe, boot, storage boxes. Stackable, sturdy. Practical storage solution.  Ease of access. Space saver.</title></head>
<link rel="stylesheet" type="text/css" href="css/sis.css" />
<link rel="stylesheet" href="css/screen.css" media="screen,projection" type="text/css" />

<!-- JavaScript -->
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/lightbox.js"></script>
</head>
<body>
<div align="center">	
<div id="frame">

<div id="header_box">

	<div id="topheader"></div>

	<div id="home_button"><?php include "include/topnavigation.html"; ?></div>
	<div id="intro_text">Transparent polypropylene shoe boxes, boot boxes, hat boxes and general storage boxes. Delivery within 7 days countrywide at R85 per order.</div>
</div>	

<!-- normal content belo - hidden content above -->	

	<div id="product-frame">
		<a name="p1"></a>
		<div id="product-img"><img src="images/tcb_ladies_clear_boxes.png" height="100"/><br><a href="#product1" rel="product1" class="lbOn"><h6>Click here to enlarge..</h6></a></div>
		<div id="product-header"><h1>Ladies' clear shoe boxes</h1></div>
		<div id="product-info"><h2>Sort out the chaos in your cupboards with these sturdy stackable clear boxes. A convenient way to access your shoes with no fuss.</h2></div>
		<div id="product-description"><h3>Dimension 29.5 x 18 x 9.5cm Holds up to size 8</h3></div>
		<div id="price_buy"><span class="price">R190 per pack of 5 <br /></span><div class="buy"/><input type="hidden" name="product1" value="1"><input type="hidden" name="qty" value="1"> <a href="javascript:document.product1.submit()">Buy now!..</a></div>

		</div>

	</div>

	<hr>
	<div id="product-frame">
		<a name="p2"></a><form method="post" action="modcart.php?action=add" name="product2">
		<div id="product-img"><img class="img-fix"src="images/tcb_ladies_coloured_boxes.jpg" height="100"/><br><a href="#product2" rel="product2" class="lbOn"><h6>Click here to enlarge..</h6>	</a></div>
		<div id="product-header"><h1>Ladies' shoe boxes</h1></div>
		<div id="product-info"><h2>We offer a mixed pack with 2 clear, 1 lilac, 1 turquoise, 1 pink, bringing a variety to your cupboards.</h2></div>
		<div id="product-description"><h3>Dimension 29.5 x 18 x 9.5cm Holds up to size 8</h3></div>
		<div id="price_buy"><span class="price">R190 per pack of 5<br /></span><div class="buy"/><input type="hidden" name="product2" value="2"><input type="hidden" name="qty" value="1"> <a href="javascript:document.product2.submit()">Buy now!..</a></div>
	</form>
	</div>

</div>
	<hr>
	<div id="product-frame">
		<a name="p3"></a><form method="post" action="modcart.php?action=add" name="product3">
		<div id="product-img"><img class="img-fix"src="images/mens_double_stack.jpg" height="100"/><br><a href="#product3" rel="product3" class="lbOn"><h6>Click here to enlarge..</h6></a></div>
		<div id="product-header"><h1>Men's shoe boxes</h1></div>
		<div id="product-info"><h2>We cater for the man who takes pride in his shoes and keeps his cupboard tidy.</h2></div>
		<div id="product-description"><h3>Dimensions 34 x 21 x 13cm Holds up to size 11</h3></div>
		<div id="price_buy"><span class="price">R240 per pack of 5<br /></span><div class="buy"/><input type="hidden" name="product3" value="3"><input type="hidden" name="qty" value="1"> <a href="javascript:document.product3.submit()">Buy now!..</a></div>
	</form>
	</div>

</div>
	<hr>
	<div id="product-frame">
	<a name="p4"></a><form method="post" action="modcart.php?action=add" name="product4">
		<div id="product-img"><img class="img-fix"src="images/mid calf.jpg" height="100"/><br><a href="#product4" rel="product4" class="lbOn"><h6>Click here to enlarge..</h6></a></div>
		<div id="product-header"><h1>Mid calf boot boxes</h1></div>
		<div id="product-info"><h2>For your ankle and mid calf boots. Very useful size for a variety of storage items.</h2></div>
		<div id="product-description"><h3>Dimensions 36 x 29 x 12cm</h3></div>
		<div id="price_buy"><span class="price">R110 per pack of 2<br /></span><div class="buy"/><input type="hidden" name="product4" value="4"><input type="hidden" name="qty" value="1"> <a href="javascript:document.product4.submit()">Buy now!..</a></div>
	</form>
	</div>
</div>
	<hr>
	<div id="product-frame">
	<a name="p5"></a><form method="post" action="modcart.php?action=add" name="product5">
		<div id="product-img"><img class="img-fix"src="images/2-knee-length.jpg" height="100"/><br><a href="#product5" rel="product5" class="lbOn"><h6>Click here to enlarge..</h6></a></div>
		<div id="product-header"><h1>Knee length boot boxes</h1></div>
		<div id="product-info"><h2>The picture tells you a story - these boot boxes will keep your boots secure and will prevent them from creasing.</h2></div>
		<div id="product-description"><h3>Dimensions 53 x 29 x 12.5cm</h3></div>
		<div id="price_buy"><span class="price">R120 per pack of 2<br /></span><div class="buy"/><input type="hidden" name="product5" value="5"><input type="hidden" name="qty" value="1"> <a href="javascript:document.product5.submit()">Buy now!..</a></div>
	</form>
	</div>
</div>
	<hr>
	<div id="product-frame">
	<a name="p6"></a><form method="post" action="modcart.php?action=add" name="product6">
		<div id="product-img"><img class="img-fix"src="images/boot_support1.jpg" height="100"/><br><a href="#product6" rel="product6" class="lbOn"><h6>Click here to enlarge..</h6></a></div>
		<div id="product-header"><h1>Boot supports</h1></div>
		<div id="product-info"><h2>These will support your boots in their boxes. Just slip them inside the leg of the boot and whola!</h2></div>
		<div id="product-description"></div>
		<div id="price_buy"><span class="price">R25 per pair<br /></span><div class="buy"/><input type="hidden" name="product6" value="6"><input type="hidden" name="qty" value="1"> <a href="javascript:document.product6.submit()">Buy now!..</a></div>
	</form>
	</div>
</div>
	<hr>
	<div id="product-frame">
	<a name="p7"></a><form method="post" action="modcart.php?action=add" name="product7">
		<div id="product-img"><img class="img-fix"src="images/hat_box.jpg" height="100"/><br><a href="#product7" rel="product7" class="lbOn"><h6>Click here to enlarge..</h6></a></div>
		<div id="product-header"><h1>Hat boxes</h1></div>
		<div id="product-info"><h2>Available for a limited period. Keep your hats and other creations clean and un-squashed.</h2></div>
		<div id="product-description"><h3>Dimensions 53.5 x 30.5cm</h3></div>
		<div id="price_buy"><span class="price">R120 per box<br /></span><div class="buy"/><input type="hidden" name="product7" value="7"><input type="hidden" name="qty" value="1"> <a href="javascript:document.product7.submit()">Buy now!..</a></div>
	</form>
	</div>
</div>
	<hr>
	<div id="product-frame">
	<a name="p8"></a><form method="post" action="modcart.php?action=add" name="product8">
		<div id="product-img"><img class="img-fix"src="images/storage_double.jpg" height="100"/><br><a href="#product8" rel="product8" class="lbOn"><h6>Click here to enlarge..</h6></a></div>
		<div id="product-header"><h1>Storage boxes</h1></div>
		<div id="product-info"><h2>General storage solutions for all those items that need to be packed away for summer or winter.</h2></div>
		<div id="product-description"><h3>Dimensions 38 x 38 x 38cm</h3></div>
		<div id="price_buy"><span class="price">R240 per pack of 2<br /></span><div class="buy"/><input type="hidden" name="product8" value="8"><input type="hidden" name="qty" value="1"> <a href="javascript:document.product8.submit()">Buy now!..</a></div>
	</form>
	</div>
</div><br /><br />

<div id="footer"><?php include "include/bottomnavigation.html"; ?></div>





</div>
</div>

<div id="product1" class="leightbox"><center>
<img src="images/2-knee-length.png" height="300" class="img"></center><br />
	<a href="#" class="lbAction" rel="deactivate">Close</a>
</div>

<div id="product2" class="leightbox"><center>
<img src="images/2-knee-length.png" height="300" class="img"></center><br />
	<a href="#" class="lbAction" rel="deactivate">Close</a>
</div>

<div id="product3" class="leightbox"><center>
<img src="images/2-knee-length.png" height="300" class="img"></center><br />
	<a href="#" class="lbAction" rel="deactivate">Close</a>
</div>

<div id="product4" class="leightbox"><center>
<img src="images/2-knee-length.png" height="300" class="img"></center><br />
	<a href="#" class="lbAction" rel="deactivate">Close</a>
</div>

<div id="product5" class="leightbox"><center>
<img src="images/2-knee-length.png" height="300" class="img"></center><br />
	<a href="#" class="lbAction" rel="deactivate">Close</a>
</div>

<div id="product6" class="leightbox"><center>
<img src="images/2-knee-length.png" height="300" class="img"></center><br />
	<a href="#" class="lbAction" rel="deactivate">Close</a>
</div>

<div id="product7" class="leightbox"><center>
<img src="images/2-knee-length.png" height="300" class="img"></center><br />
	<a href="#" class="lbAction" rel="deactivate">Close</a>
</div>

<div id="product8" class="leightbox"><center>
<img src="images/2-knee-length.png" height="300" class="img"></center><br />
	<a href="#" class="lbAction" rel="deactivate">Close</a>
</div>
</body>
<html>

 

 

 

[attachment deleted by admin]

Link to comment
https://forums.phpfreaks.com/topic/173633-lightbox/
Share on other sites

Archived

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

Go to topic listing
×
×
  • 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.