Site URL:
http://www.safecarcarry.comDeveloped by:
bajakanSafe Car Carry was founded out of the specific need to provide gun owners with a way to safely secure their firearms in their vehicles, in an accessible manner. To that end we custom craft and fit leather holsters to each person's specific situation ensuring a tight snug fit and suggestions on mounting the holster to solid car panels only.
Orders are fulfilled in 2-5 business days just submit to us your gun's make and model along with some information on how you would like to mount, and access the firearm while occupying your vehicle.
(4 votes)
image rollover theme file
I put together the code for the image rollovers into a file in case anyone was interested. This is a very elegant way of doing them.
1. Add the function to your template.php file
function phptemplate_uc_product_image($images) {return _phptemplate_callback('uc_product_image', array('images' => $images), array('uc-product-image'));
}
2. create a file in your theme directory called uc-product-image.tpl.php and copy this code into it
<? static $rel_count = 0; ?>
<? foreach ($images as $im) { ?>
<div class="image_<?=$im['fid'] ?>" style="display: none;"><img id="img_<?=$im['fid'] ?>" src="<?=file_create_url(file_directory_path() .'/imagecache/product/'. $im['filepath']) ?>" alt="<?=check_plain($im['alt']) ?>" title="<?=check_plain($im['title']) ?>" /></div>
<? } $rel_count++; ?>
<div class="product_image">
<div class="product-main-image-wrapper">
<img id="image-main-product-image" src="<?=file_create_url(file_directory_path() .'/imagecache/product/'. $images[0]['filepath']); ?>" />
</div>
<div id="main-product-image-title">
<?=$images[0]['title']?>
</div>
<div class="product-images-wrapper">
<? foreach ($images as $im) { ?>
<div class="product-image thumb_<?=$im['fid'] ?>">
<img src="<?=file_create_url(file_directory_path() .'/imagecache/uc_thumbnail/'. $im['filepath']) ?>" alt="<?=check_plain($im['alt']) ?>" title="<?=check_plain($im['title']) ?>" />
<script type="text/javascript">
$(function() {
$(".thumb_<?=$im['fid'] ?>").hover(function() {
$("#image-main-product-image").attr("src", "<?=file_create_url(file_directory_path() .'/imagecache/product/'. $im['filepath']); ?>")
$("#main-product-image-title").html("<?=$im['title']?>");
});
});
</script>
</div>
<? } $rel_count++; ?>
</div>
<div class="clear"></div>
</div>
3. The styling is optional, but here is some sample css you can add to your theme style sheet
.product-main-image-wrapper { height: 300px; }
#main-product-image-title { padding-bottom: 10px; border-bottom: dotted 1px #ccc; text-align: center; color: #333; }
.product_image { border: 0; width: 300px; margin-left: 10px;}
.product-images-wrapper { text-align: center; width: 288px; margin-left: 6px; }
.product-image { float: left; padding: 2px; margin: 2px; border: solid 1px #ccc; width: 36px; height: 36px; }
This will give you the functionality so that when a user mouses over a small image, the big image is moved into the big slot at the top.
To see it work, you can log into www.safecarcarry.com/user with username demo, password demo.