DEMOSupported 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.
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
Thanks I'll give it a try dose it work with latest version of Opencart ?
Happy holidays
Happy holidays
OpenCart :
The best Open Source Cart for eCommerce
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
someone could modify this for additional image to be -250x250 ?? plzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
Thanks for this script but anyone can tell me that this script doesn't work for all images. why?
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
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...!
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 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...!
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?
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?
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.
Anyhelp?
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';
}
Good Work Qphoria !
It's a great mod.
Thank for this contribution.
It's a great mod.
Thank for this contribution.
http://wm-distribution.com ---- OC 1.5.1.3
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
Who is online
Users browsing this forum: No registered users and 42 guests