Post by Qphoria » Wed Dec 15, 2010 12:06 am

image_hover_lite.jpg

image_hover_lite.jpg (32.35 KiB) Viewed 15859 times

Supported OpenCart Versions:
================
All versions


What does it do:
================
This contrib adds a javascript that will show a larger version of an image when hovered


Main features:
==============
* Javascript. Not version specific.
* No code to change. Just add the script to the header.tpl file and it works.


How to install it:
==================
1) Unzip and upload the contents of the upload folder to the root of your OpenCart install. No files are overwritten
2) Add script to header.tpl (or layout.tpl in older versions):
a) Edit: catalog/view/theme/YOURTHEME/template/common/header.tpl
b) FIND:
---------------------
</head>
---------------------
c) BEFORE, ADD:
---------------------
<script type="text/javascript" src="catalog/view/javascript/jquery/image_hover_lite.js"></script>
---------------------


Configuration:
=================
This script uses the main image "resize" value for all images on the rest of the site.
By default this is 250x250. You can change this in the image_hover_lite.js file at the top where you find

var $hoverSize = "-250x250";

You can use any existing image resize value you have set in the Admin->System->Settings->Image tab.
However. This assumes that the cache image for that product has been generated.
The cache images are generated automatically by opencart when a product page is viewed at least once
If you hover an image and no hover comes up, this means you need to view that product once first, then it will work.

If you'd just prefer to use the real image size, you can set this:

var $hoverSize = "";

This will tell the code to use the real image for the hover.

This script will make all images except the main product image have a hover image.
If you'd like the main image to also have a hover, you can remove this line:

$('#image').parent().removeClass('preview');

from the image_hover_lite.js file


Known Issues:
================
- Because the script tries to everything at the javascript level, some images will load a different sizes.
Image data isn't possible to grab from an image unless the image has loaded once locally on the browser, also some images for some reason don't return its sizes even after is has loaded locally. In these cases, the script will just load the default size of the image in the hover. The only fix would be to turn this js into a .php script to call the image resize commands on the sizes that are requested, this would then load the image on the server and have actual existence in the server. That would be more than "lite".

- Tested and working in FF3.6 and Chrome6. IE8 failed to get image sizes with jquery so all images just loaded normally. IE never fails to disappoint.
DEMO

Attachments


Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by celestial » Wed Dec 15, 2010 6:38 am

Again, one more time, many thanks for a great work

Celestial - Martín Abel Rosales
WhatsApp: 50671482211
Email: martinrosales2012@hotmail.com
Skype: martin.abel.rosales
San José , Costa Rica


User avatar
Expert Member

Posts

Joined
Sat Mar 20, 2010 4:19 am
Location - Costa Rica

Post by Markal » Thu Dec 23, 2010 1:34 am

Thank you for this nice mod, Q! Could you please tell me how to make the hover image also works for the additional images like you did in your web site? It gives only a blank rectangular shape now. My OC is V1.4.0

Find the best gadgets here ---> http://www.Gadgetshunter.com


Newbie

Posts

Joined
Sun Mar 07, 2010 4:33 am

Post by designbuyers » Sun Dec 26, 2010 4:29 am

Thanks :) I'll give it a try dose it work with latest version of Opencart ?

Happy holidays

OpenCart :
The best Open Source Cart for eCommerce


User avatar
Active Member

Posts

Joined
Tue Nov 09, 2010 4:25 pm

Post by wandotshop » Mon Jan 03, 2011 12:29 am

Love this one.. but its not work with addtional image :( ? It gives only a blank rectangular shape now.
someone could modify this for additional image to be -250x250 ?? plzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

New member

Posts

Joined
Wed Oct 06, 2010 12:15 am

Post by karthikeyan » Wed Feb 16, 2011 11:33 pm

Thanks for this script but anyone can tell me that this script doesn't work for all images. why?

Newbie

Posts

Joined
Fri Feb 11, 2011 3:08 pm

Post by Qphoria » Wed Feb 16, 2011 11:37 pm

by design it was meant to only work on the images in the center column.
If you want it to work for sideboxes too you can edit the included file and change

$('.middle img').parent().addClass('preview');

to

$('img').parent().addClass('preview');

Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by robster » Tue Mar 15, 2011 1:45 pm

Hey Q

Any ideas how to make this work properly in IE? Your solution is very simple and I love it but as most users have IE it would be good for this to work in Gates' crappy browser!

robster
Last edited by robster on Tue Mar 15, 2011 8:07 pm, edited 1 time in total.

I know my place...!


User avatar
Active Member

Posts

Joined
Tue Jul 13, 2010 8:08 pm
Location - North Yorkshire, UK

Post by Qphoria » Tue Mar 15, 2011 7:55 pm

Works fine on IE8

Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by robster » Tue Mar 15, 2011 8:03 pm

It does indeed! How weird is that.

I tried this on IE8 yesterday and the 'popup' images were no larger than the thumbnails - now after reading your last post I just went and refreshed the page that was still open on IE8 and they are now bigger. I do wonder about me sometimes!!!

Cheers

robster

I know my place...!


User avatar
Active Member

Posts

Joined
Tue Jul 13, 2010 8:08 pm
Location - North Yorkshire, UK

Post by Qphoria » Tue Mar 15, 2011 9:54 pm

Well the popup size is why this is "lite". it uses a javascript method to detect the sizes which doesn't always return the right stuff if the browser hasn't cached it at least once. And for some reason the related products and additional images either show as thumbnails or not at all

Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by robster » Tue Mar 15, 2011 10:04 pm

Yep - gotcha!

So...... how about a 'regular' version then?

robster

I know my place...!


User avatar
Active Member

Posts

Joined
Tue Jul 13, 2010 8:08 pm
Location - North Yorkshire, UK

Post by robster » Tue Mar 15, 2011 11:04 pm

Hmmm I am getting the following error now:

Out of memory at line 12

No other information - no telling me line 12 of what??

Is this a known error???

Cheers
robster

I know my place...!


User avatar
Active Member

Posts

Joined
Tue Jul 13, 2010 8:08 pm
Location - North Yorkshire, UK

Post by Qphoria » Wed Mar 16, 2011 2:12 am

no known errors

Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by micdansan » Sun Apr 03, 2011 11:34 am

This is what I needed!

Tried it in localhost, but it cannot preview all images in the center column. some will just show small white box no image. But if I click that image( it will transfer to Product page) then I click the Enlarge Image button and then I go back to previous page. then that image now loads when I hover it. How come?

New member

Posts

Joined
Fri Apr 01, 2011 10:25 pm

Post by designbuyers » Sun Apr 03, 2011 11:55 pm

Did you make a pro version ( Paid One )

OpenCart :
The best Open Source Cart for eCommerce


User avatar
Active Member

Posts

Joined
Tue Nov 09, 2010 4:25 pm

Post by micdansan » Wed Apr 06, 2011 11:25 am

update:
delete my post.. admin. I did'nt read instructions, now it's ok
Last edited by micdansan on Thu Apr 07, 2011 12:34 pm, edited 1 time in total.

New member

Posts

Joined
Fri Apr 01, 2011 10:25 pm

Post by micdansan » Thu Apr 07, 2011 12:33 pm

one more thing problem with this script.

I add advertisements module I downloaded free in the Extension section.
These ads, banners also hovers.. Why is that?

How do I disable hover in these ads/banner modules?


Also is there a way it can hover same in templatemonster.com
Because the script on that site hover very smart. It can detect the XY location so that the image can be preview "inside the page".

I get this code from that site, i guess this is the code they use, but don't know how to integrate it in opencart.

Code: Select all

function previewMouseFollow(event,wrapper,width,height,winWidth,winHeight,topOffset) {
    pageX=event.pageX;
    pageY=event.pageY;
    previewOffsetTop=(winHeight-height)/2;
    previewOffsetLeft=(winWidth-width)/2;
    correctedTopOffset=previewOffsetTop+topOffset;
    offset=30;
    centered=false;
    if (winHeight > height) {
        if (pageY<correctedTopOffset-offset) {pageY=pageY+offset;}
        else if (pageY>correctedTopOffset+height+offset) {pageY=pageY-offset-height;}
        else {pageY=correctedTopOffset;centered=true;}
    }
    else {
        pageY=topOffset;
        centered=true;
    }
    if (centered) {
        if (pageX<winWidth/2) {pageX+=offset;}
        else {pageX=pageX-width-offset;}
    }
    else {
        if (pageX<previewOffsetLeft-offset) {pageX=pageX+offset;}
        else if (pageX>previewOffsetLeft+width+offset) {pageX=pageX-width-offset;}
        else {pageX=previewOffsetLeft;}
    }
    wrapper.left=pageX+'px';
    wrapper.top=pageY+'px';
}
Anyhelp?

New member

Posts

Joined
Fri Apr 01, 2011 10:25 pm

Post by eric1998 » Tue May 03, 2011 12:28 am

Good Work Qphoria !

It's a great mod.
Thank for this contribution.

http://wm-distribution.com ---- OC 1.5.1.3


User avatar
New member

Posts

Joined
Sat Apr 02, 2011 10:39 pm

Post by Atavius » Mon May 09, 2011 8:02 pm

Hi, I just came across this yours MOD and I really like, but I somehow cant manage to make it work. MOD works perfectly with default theme but when I try to use it in my own theme it shows just white bar instead of any images for reference check http://www.slovanet/atavius/oc Any idea where could be problem? Thnx

Newbie

Posts

Joined
Mon May 09, 2011 7:55 pm
Who is online

Users browsing this forum: No registered users and 7 guests