Well at the insistence of you guys out there I thought I’d post my results for getting a nice smoother mouseover effect using jQuery.
You need to edit the list.phtml in the two places it is pumping out images for the List view & the Grid View.
Copy and past the following code completely over the <a> tag that covers the product image:
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
<img class="small_image" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(217); ?>" width="147" height="217" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
<img class="thumbnail" src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(217) ?>" width="147" height="217" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
</a>
(Note: As before I am constraining my images to be 217px high for my theme)
This will basically put the thumbnail image directly below the small_image & when you add the following lines to your stylesheet they will be absolutley positioned on top of each other.
.product-image{position:relative}
.product-image img{position:absolute}
.product-image img.small_image{z-index:10}
.product-image img.thumbnail{z-index:1}
Then in the file:
\app\design\frontend\YOURTHEME\default\template\page\html\head.phtml add the following script:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("img.small_image").hover(
function() {
jQuery(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
jQuery(this).stop().animate({"opacity": "1"}, "slow");
});
});
</script>
You can see the results here:
http://miminoor.kineticpulse.net/denim.html
With many thanks to this post for the quick inspiration:
http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/
Wow! You're the best! Thanks a lot!
Regards,
Michael