Jump to content

Lightbox


DarkPrince2005

Recommended Posts

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
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.