I have 2 sites divebombinc.com and specopshop.com and I would like a gallery page where I can show products without a buy it button. I would like to have it look just like the rest of the site. Is there a way to do this or would someone be willing to copy the code from one of the more basic pages and modify it to a gallery that you could pop up an image with a short description. Basically the same way it is on the buy pages but without the buy button or price.
Latest News: (loading..)
0
3 replies to this topic
#3
Posted 07 February 2012 - 02:35 PM
I have added my page (http://www.specopshop.com/outside_the_wire.php) and link button to the nav bar in the header. Now I would like to add the overlay image gallery. Where would I add this? I need it to have the thumbnails in the area that now holds the included outside_the_wire.php file from the languages/english directory.
This is the overlay code:
This is the overlay code:
<?xml version="1.0" encoding="us-ascii"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>Outside The Wire</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>
<style type="text/css">
/* the overlayed element */
.simple_overlay {
/* must be initially hidden */
display:none;
/* place overlay on top of other elements */
z-index:10000;
/* styling */
color:#fff;
background-color:#333;
width:750px;
min-height:200px;
border:1px solid #666;
/* CSS3 styling for latest browsers */
box-shadow:0 0 90px 5px #000;
-moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;
}
/* styling for elements inside overlay */
.details {
position:relative;
top:15px;
right:15px;
font-size:11px;
width:150px;
}
.details h3 {
color:#aba;
font-size:15px;
margin:0 0 -10px 0;
}
/* close button positioned on upper right corner */
.simple_overlay .close {
background-image:url(http://specopshop.com/images/close.png);
position:absolute;
right:-15px;
top:-15px;
cursor:pointer;
height:35px;
width:35px;
}
/* some styling for triggers */
#photos img {
cursor:pointer;
}
</style>
</head>
<body>
<!-- trigger elements -->
<div id="photos">
<p><img src="http://www.specopshop.com/images/Site-MC-SOU-Pants.gif" width="166" height="115" rel="#photo1" /></p>
<p><img src="http://www.specopshop.com/images/Brick.jpg" width="166" height="115" rel="#photo2" /></p>
</div>
<!-- overlays -->
<div class="simple_overlay" id="photo1">
<img src="http://www.specopshop.com/images/Site-MC-SOU-Pants.gif" />
<div class="details">
<h3>SOU (Special OPS Uniform) Pants</h3>
<h4>$114.99</h4>
<p>Choose color and size</p>
</div>
</div>
<div class="simple_overlay" id="photo2">
<img src="http://www.specopshop.com/images/Brick.jpg" />
<div class="details">
<h3>Black Ops Brick Ballistic Glasses</h3>
<h4>$68.00</h4>
<p>Comes with: smoke lenses t-peg elastic strap, regular strap hard case</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("img[rel]").overlay();
});
</script>
</body>
</html>
