getshopped
06
Jun
2011
In getshopped
hack
javascript
jquery
WordPress 3.0
WordPress Development
WordPress Plugins
wp e-commerce
By Andy
WP E-commerce – Image previews to change on hover
On 06, Jun 2011 | No Comments | In getshopped, hack, javascript, jquery, WordPress 3.0, WordPress Development, WordPress Plugins, wp e-commerce | By Andy
Hi All,
Another fix ive had to implement whilst working with WP E-Commerce. This time to add functionality so that when thumbnails (from gold cart gallery) are hovered over, the main image preview changes. This also will update the main preview image so that when clicked the correct large image pops up.
You must add this code AFTER the thumbnails have been generated. For me that was at the very bottom of wpsc-single_product.php after
</div><!--close single_product_page_container-->Here’s the code to add-
<script> jQuery(".attachment-gold-thumbnails").each(function () { jQuery(this).css("cursor", "pointer"); var large_preview = jQuery(this).parent().attr("rev"); var even_larger_preview = jQuery(this).parent().attr("href"); var preview_title = jQuery(this).parent().attr("rel"); jQuery(this).hover( jQuery(this).mouseover(function() { jQuery(".product_image").attr("src", large_preview); jQuery(".product_image").parent().attr("href", even_larger_preview); jQuery(".product_image").parent().attr("rel", preview_title); }) ); }); </script>It also takes the magnifying glass cursor off the thumbnails and replaces it with pointer. You can change it to whatever you like really.
NB: I have only tested this with the thickbox image pop up script within WPEC. This is due to it being the only one that works natively within the plugin for me…
Submit a Comment