Community Forums

by **Qphoria** » Tue Jan 17, 2012 9:32 pm

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 (145.82 KiB) Viewed 3847 times

by **JAY6390** » Wed Jan 18, 2012 10:51 am

Super cool!

by **dbrooksuk** » Tue Jan 24, 2012 10:36 pm

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?

by **Qphoria** » Wed Jan 25, 2012 3:13 pm

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

by **Qphoria** » Thu Jan 26, 2012 2:39 pm

Ok I fixed the issue now. download updated in first post.

by **dbrooksuk** » Thu Jan 26, 2012 3:34 pm

Thank you. I'm just downloaded and had a quick test and everything seems OK. Thanks again for the addition to Opencart.

by **Klimskady** » Sun Jan 29, 2012 1:05 am

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?

by **Lisaweb** » Tue Jan 31, 2012 10:41 pm

Klimskady, please check your PM's. Left a message for you. Thanks!

by **Vytenis** » Mon Feb 06, 2012 1:53 pm

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?

thank you!

by **3antz** » Mon Feb 06, 2012 3:37 pm

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.

by **Vytenis** » Sun Feb 19, 2012 8:16 pm

Any updates about the issue with no return to the main image on leaving the active hover zones with mouse?

by **newdev** » Tue Feb 21, 2012 7:30 pm

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?

by **terrynshed** » Sat Mar 03, 2012 9:11 pm

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> </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

by **Mooshi** » Tue Mar 13, 2012 7:54 am

thanks! very much Qphoria

by **Dutch_guy** » Wed Mar 14, 2012 4:19 pm

Did anyone ever fix the problem that once an image is swapped you can't select the main image anymore ?

by **outsider255** » Thu Mar 15, 2012 8:08 pm

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 ;]

by **Qphoria** » Thu Mar 15, 2012 9:07 pm

why not try it? its just one file to add or remove

by **outsider255** » Thu Mar 15, 2012 11:39 pm

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

by **doidge** » Mon Mar 26, 2012 1:26 am

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.

by **Qphoria** » Mon Mar 26, 2012 5:27 pm

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.