Guest Posted January 18, 2012 Share Posted January 18, 2012 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. Quote Link to comment Share on other sites More sharing options...
usernamenone Posted February 2, 2012 Share Posted February 2, 2012 Old instructions but will work Click HERE Quote Link to comment Share on other sites More sharing options...
Guest Posted February 7, 2012 Share Posted February 7, 2012 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> Quote Link to comment Share on other sites More sharing options...
Guest Posted February 9, 2012 Share Posted February 9, 2012 Anybody? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.