Page 1 of 3

[JSCRIPT] Main Image Swap On Hover (v1.5.x)

Posted: Wed Jan 18, 2012 5:32 am
by Qphoria
This will swap the additional image into the main image when hovered.
Also swaps the main image popup with the additional image popup link
main-image-swap.gif

main-image-swap.gif (145.82 KiB) Viewed 16456 times


Re: [JSCRIPT] Main Image Swap On Hover (v1.5.x)

Posted: Wed Jan 18, 2012 6:51 pm
by JAY6390
Super cool!

Re: [JSCRIPT] Main Image Swap On Hover (v1.5.x)

Posted: Wed Jan 25, 2012 6:36 am
by dbrooksuk
I installed this file which works great on the product page but when I go to checkout nothing now happens. I assume that the Javascript is interfering with the checkout script some how.
I'm using version 1.5.1.3 I think - the latest version on a local setup machine.

Any thoughts?

Re: [JSCRIPT] Main Image Swap On Hover (v1.5.x)

Posted: Wed Jan 25, 2012 11:13 pm
by Qphoria
Yea I think there is something wrong on non-product pages.

Try moving the line from header.tpl to catalog/view/theme/YOURTHEME/template/product/product.tpl before the first <div> tag for now

Re: [JSCRIPT] Main Image Swap On Hover (v1.5.x)

Posted: Thu Jan 26, 2012 10:39 pm
by Qphoria
Ok I fixed the issue now. download updated in first post.

Re: [JSCRIPT] Main Image Swap On Hover (v1.5.x)

Posted: Thu Jan 26, 2012 11:34 pm
by dbrooksuk
Thank you. I'm just downloaded and had a quick test and everything seems OK. Thanks again for the addition to Opencart.

Re: [JSCRIPT] Main Image Swap On Hover (v1.5.x)

Posted: Sun Jan 29, 2012 9:05 am
by Klimskady
As long as the javascript file and the code is placed in the right place before </head> nothing else should stop this from working should it?

Re: [JSCRIPT] Main Image Swap On Hover (v1.5.x)

Posted: Wed Feb 01, 2012 6:41 am
by Lisaweb
Klimskady, please check your PM's. Left a message for you. Thanks!

Re: [JSCRIPT] Main Image Swap On Hover (v1.5.x)

Posted: Mon Feb 06, 2012 9:53 pm
by Vytenis
hi there, good and useful module:). It works fine, how ever when I move my cursor out after hovering I don`t see the main image any more. Also if I go into "slideshow" mode after hovering, it repeats the hovered image twice (as the main image). Any ideas how to prevent this and be able to have all images visible, including the main image? O0 thank you!

Re: [JSCRIPT] Main Image Swap On Hover (v1.5.x)

Posted: Mon Feb 06, 2012 11:37 pm
by 3antz
Hi Q, great mod. Thanks for sharing it.
1 question though, when I hover my mouse ontop, I notice that the images are skewed to a small size. any possibility to maintain the original size? Would be great if you could advise.

Re: [JSCRIPT] Main Image Swap On Hover (v1.5.x)

Posted: Mon Feb 20, 2012 4:16 am
by Vytenis
Any updates about the issue with no return to the main image on leaving the active hover zones with mouse?

Re: [JSCRIPT] Main Image Swap On Hover (v1.5.x)

Posted: Wed Feb 22, 2012 3:30 am
by newdev
very nice effect thank you Qphoria

however mine seems to icrease the box size making it overlap the main product details

is there a description of how to format my images? i liked how opencart resizes stuff automatically, am i having a conflict somewhere?

Re: [JSCRIPT] Main Image Swap On Hover (v1.5.x)

Posted: Sun Mar 04, 2012 5:11 am
by terrynshed
Hi,

Thank you for this great script. It works perfectly as you described on the standard product page.

I started another thread about this question, but thought I would ask here since it really pertains to this script.

I had made a slight modification to my products page that allows the additional images to span across the whole page instead of being restricted to the left side of the page.

I simply cut the "image-additional" code from it's original location, then stuck it right above the 'tabs' section. I then put a table row around the code so it would work with all the other browsers. This works great and I feel looks very clean when you have more than just 2 or 3 pictures.

The problem is that with this small modification, the image swap on hover does not work anymore. I studied the java script quite a bit but can not quite get a grasp on it. I am sure I moved something I should not have. Here is the code I moved. Any chance you see something obvious in it?

Code: Select all

<table>
<tr>
<div class="image-additional">
        <p>
          <?php foreach ($images as $image) { ?>
         <td> <a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="fancybox" rel="fancybox"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a> </td>
          <?php } ?>
        </p>
   </div>
</tr>
</table>
<p>&nbsp;</p>
And this is located just above here:

Code: Select all

  <div id="tabs" class="htabs"><a href="#tab-description"><?php echo $tab_description; ?></a>
    <?php if ($attribute_groups) { ?>
    <a href="#tab-attribute"><?php echo $tab_attribute; ?></a>
    <?php } ?>
    <?php if ($review_status) { ?>
    <a href="#tab-review"><?php echo $tab_review; ?></a>
    <?php } ?>
    <?php if ($products) { ?>
...........
I did not make any other changes or add anything else to the products.tpl page.

It would be great to have the image swap work with this change, and I am sure I just need to modify my own changes to make them more compatible.

Thanks for any help.

Terry

Re: [JSCRIPT] Main Image Swap On Hover (v1.5.x)

Posted: Tue Mar 13, 2012 3:54 pm
by Mooshi
thanks! very much Qphoria

Re: [JSCRIPT] Main Image Swap On Hover (v1.5.x)

Posted: Thu Mar 15, 2012 12:19 am
by Dutch_guy
Did anyone ever fix the problem that once an image is swapped you can't select the main image anymore ?

Re: [JSCRIPT] Main Image Swap On Hover (v1.5.x)

Posted: Fri Mar 16, 2012 4:08 am
by outsider255
anybody know if this will work with option boost? since i think this is the only feature option boost is lacking and i reeeaally need it ;]

Re: [JSCRIPT] Main Image Swap On Hover (v1.5.x)

Posted: Fri Mar 16, 2012 5:07 am
by Qphoria
why not try it? its just one file to add or remove

Re: [JSCRIPT] Main Image Swap On Hover (v1.5.x)

Posted: Fri Mar 16, 2012 7:39 am
by outsider255
well ok I tried it and it doesn't work with option boost, what's more I just realized that I don't see any way to go back to the main image even in option boost module

Re: [JSCRIPT] Main Image Swap On Hover (v1.5.x)

Posted: Mon Mar 26, 2012 9:26 am
by doidge
I feel unuttterably stupid! I clicked the download button and got a zip file, which I unzipped and inside was a .png image file and an index.hmtl file, which I clicked and up came a page saying 'To show hidden div, simply hover your mouse over this link' which I did and a box popped up. Good. So I looked at the source code, copied the javascript into header.tpl before </head>, reloaded my Opencart site, went to a product detail page, hovered over a thumbnail and nothing happened. Should it have? Thankyou for any help as I have never liked Lightbox and its clones.

Re: [JSCRIPT] Main Image Swap On Hover (v1.5.x)

Posted: Tue Mar 27, 2012 1:27 am
by Qphoria
doidge wrote:I feel unuttterably stupid! I clicked the download button and got a zip file, which I unzipped and inside was a .png image file and an index.hmtl file, which I clicked and up came a page saying 'To show hidden div, simply hover your mouse over this link' which I did and a box popped up. Good. So I looked at the source code, copied the javascript into header.tpl before </head>, reloaded my Opencart site, went to a product detail page, hovered over a thumbnail and nothing happened. Should it have? Thankyou for any help as I have never liked Lightbox and its clones.
lol there is no png or html file in the zip. You got some bad download there.
This also has nothing to do with lightbox or any of its "clones". This is simple javascript hovering.