19 Jun 2009, 11:20 AM
New Zenner
- Join Date:
- Sep 2008
- Posts:
- 100
- Plugin Contributions:
- 0
Script for floating the large image over smaller images on product info page
Hi all
Here's the script I use as the override for tpl_modules_main_product_image.php. Now instead of javascript opening a clumsy window to view the full sized image, it appears as a floating image that tracks the mouse. Feel free to improve the code. It's based on a nettuts+ tutorial Jquery for Absolute Beginners - Day 11 - really great series of tutorials.
Don't forget to add the jquery file to your includes directory
CSS:
#largeImage {
position:absolute;
padding:0.5em;
background:#e3e3e3;
border: solid 1px #bfbfbf;
}
tpl_modules_main_product_image.php
<?php require(DIR_WS_MODULES . zen_get_module_directory(FILENAME_MAIN_PRODUCT_IMAGE)); ?>
<script type="text/javascript" src="includes/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#productMainImage a').hover (function (e) {
// mouse on
var href=$(this).attr('href');
$('<img id="largeImage" src="' +href+'" alt="image" />')
.css('top', e.pageY + -120)
.css('left', e.pageX + 40)
.appendTo('body');
},
function (){
// mouse off
$('#largeImage').remove();
});
$('#productMainImage a' ).mousemove(function(e) {
$('#largeImage')
.css('top', e.pageY -120)
.css('left', e.pageX + 40);
})
});
</script>
<div id="productMainImage" class="centeredContent back">
<a href="<?php echo $products_image_large?> "><img id="jsImage" src="<?php echo $products_image_medium ?>" alt="Product Image"/>
<?php echo '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span>'?>
</a>
</div>
