-1

I have the default theme in OpenCart 2.0 and when I hover a product I want the secondary image to be shown (if there is a secondary on that product) instead of the first one. Then back again.

Is this possible?

Edit: The code I want is not how to make the effect happen. What I want is to know how the code looks like when I call on the other image with PHP.

Henric Åkesson
  • 140
  • 1
  • 2
  • 11

1 Answers1

1

A not so elegant way would be to change the image source using jQuery. The index+1 is in there to basically keep track of the images. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
jQuery('#yourselectorhere img').each(function(index){
   jQuery(this).hover(function() {
     jQuery(this).attr('src', '/THE_LOCATION_OF_THE_IMAGE/'+ (index + 1) + '.png');
   }, function() {
     jQuery(this).attr('src', '/THE_LOCATION_OF_THE_IMAGE/'+ (index + 1) + '_NEW_IMAGE_SUFFIX' + '.png');
   });
  });
kelk
  • 36
  • 3
  • What is not that elegant on this? How else you would like to do this? There only two options - CSS and `background-image` (requires more changes in template and CSS) or jQuery - changing img src. Your answer is missing the PHP controller part, as this needs to be adjusted as well... – shadyyx Oct 31 '14 at 08:53
  • What I want is not the CSS or jQuery. I have edited my post now so it's clear that I need the PHP call function. – Henric Åkesson Oct 31 '14 at 08:55
  • WHy u need PHP call to change an image? Server interaction is not all required? By the way have you got it resolved? – Gags Aug 21 '16 at 10:38