Post by Qphoria » Wed Jan 18, 2012 5:32 am

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 15042 times

Attachments


Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by JAY6390 » Wed Jan 18, 2012 6:51 pm

Super cool!

ImageImageImage

SEO MEGA KIT PLUS - Get your site ranking higher in the search engines
Better Product SEO URL's - Perfectly structured product links
SEO URL's Route Editor PRO - Make ANY url on your site have clean keywords - even third party extensions (remove index.php)


User avatar
Guru Member

Posts

Joined
Wed May 26, 2010 11:47 pm
Location - United Kingdom

Post by dbrooksuk » Wed Jan 25, 2012 6:36 am

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?

New member

Posts

Joined
Mon Jun 13, 2011 5:31 pm

Post by Qphoria » Wed Jan 25, 2012 11: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

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by Qphoria » Thu Jan 26, 2012 10:39 pm

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

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by dbrooksuk » Thu Jan 26, 2012 11:34 pm

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

New member

Posts

Joined
Mon Jun 13, 2011 5:31 pm

Post by Klimskady » Sun Jan 29, 2012 9: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?

Active Member

Posts

Joined
Tue Jun 07, 2011 7:57 am

Post by Lisaweb » Wed Feb 01, 2012 6:41 am

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

Using OC v1.5.4.1 with Evisu Theme


User avatar
Active Member

Posts

Joined
Wed Dec 07, 2011 12:01 am

Post by Vytenis » Mon Feb 06, 2012 9: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? O0 thank you!
Last edited by Vytenis on Thu Feb 09, 2012 3:00 am, edited 1 time in total.

New member

Posts

Joined
Mon Aug 01, 2011 1:33 am

Post by 3antz » Mon Feb 06, 2012 11: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.

Active Member

Posts

Joined
Sun Oct 02, 2011 6:52 pm

Post by Vytenis » Mon Feb 20, 2012 4:16 am

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

New member

Posts

Joined
Mon Aug 01, 2011 1:33 am

Post by newdev » Wed Feb 22, 2012 3:30 am

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?

Newbie

Posts

Joined
Tue Feb 21, 2012 1:17 pm

Post by terrynshed » Sun Mar 04, 2012 5:11 am

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
Last edited by terrynshed on Fri Mar 16, 2012 4:59 am, edited 1 time in total.

New member

Posts

Joined
Fri Jan 20, 2012 5:35 pm

Post by Mooshi » Tue Mar 13, 2012 3:54 pm

thanks! very much Qphoria

Newbie

Posts

Joined
Tue Jul 05, 2011 7:52 pm

Post by Dutch_guy » Thu Mar 15, 2012 12:19 am

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

Image

Free & Paid extensions from Think Twice | Opencart | Hulpmiddelen voor ouderen


Active Member

Posts

Joined
Tue Feb 21, 2012 5:56 pm


Post by outsider255 » Fri Mar 16, 2012 4:08 am

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

Newbie

Posts

Joined
Fri Mar 09, 2012 9:46 pm

Post by Qphoria » Fri Mar 16, 2012 5:07 am

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

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by outsider255 » Fri Mar 16, 2012 7:39 am

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

Newbie

Posts

Joined
Fri Mar 09, 2012 9:46 pm

Post by doidge » Mon Mar 26, 2012 9: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.

Newbie

Posts

Joined
Mon Mar 26, 2012 9:09 am

Post by Qphoria » Tue Mar 27, 2012 1:27 am

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.

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am
Who is online

Users browsing this forum: No registered users and 4 guests