Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Gallery Page


Guest

Recommended Posts

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.

Link to comment
Share on other sites

  • 2 weeks later...

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:

<?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>

Link to comment
Share on other sites

Join the conversation

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

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

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