Page 2 of 2

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

Posted: Tue Mar 27, 2012 7:19 am
by doidge
"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."
Thanks for the swift reply. Clicked on the Attachment again and this time only got file.php Tore my hair out but nothing changed.

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

Posted: Tue Mar 27, 2012 10:54 am
by Qphoria
lol are you using some archaic browser or linux or mac or something crappy?
You should get a zip file
In the zip file is a folder named "catalog"
and some subfolders and file in there.

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

Posted: Wed Apr 25, 2012 5:09 pm
by angelaho
Thanks for this, but I followed the instruction, it doesn't work on Shoppica, is it because there's that prettyphoto zoom thing :( any advise?

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

Posted: Fri Apr 27, 2012 8:53 am
by Klimskady
angelaho wrote:Thanks for this, but I followed the instruction, it doesn't work on Shoppica, is it because there's that prettyphoto zoom thing :( any advise?
I couldn't either for the shoppica theme, I put it down to not using the same lightbox/prettybox systems. Would be sweet if it could work though.

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

Posted: Sat Oct 13, 2012 12:07 am
by jfn99
great modification!!!
Anyone knows how to make the main image as a thumb nail automatically?
also how to make the thumbs to click instead of rollover in order to swap the main image?

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

Posted: Sun Oct 14, 2012 6:48 am
by olimax
this works well for adding the main image as an additional thumb
I think the download is corrupt so copy the code and I had to remove the XML declaration off the top
http://forum.opencart.com/viewtopic.php?t=47303

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

Posted: Wed Oct 17, 2012 4:33 pm
by CrysTim
Thank you for your Jscript! :)
It's working like a charm!

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

Posted: Wed Oct 24, 2012 1:15 am
by shadav
thanks for a easy and oh so helpful snippet....but yes, how do you make the main image return once other images are no long hovered?

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

Posted: Mon Nov 26, 2012 12:39 pm
by Pobb
This should make the image return to the original when you mouseout of the thumbnails:

Code: Select all

$(document).ready(function () {
            // Get main image info
            var img = $('#image').attr('src'); // get img popup href
            if (img != undefined) {
                var imgWidth = img.substring(img.lastIndexOf('-') + 1, img.lastIndexOf('x'));
                var imgHeight = img.substring(img.lastIndexOf('x') + 1, img.lastIndexOf('.'));
            }
            $('.image-additional img').hover(function () {
                var newsrc = $(this).parent().attr('href');
                $('#image').attr({
                    src: newsrc,
                    title: $(this).attr('title'),
                    alt: $(this).attr('alt'),
                    width: imgWidth,
                    height: imgHeight
                });

                $('#image').parent().attr('href', newsrc);
            }, function () {
                $('#image').attr({
                    src: img ,
                    title: $(this).attr('title'),
                    alt: $(this).attr('alt'),
                    width: imgWidth,
                    height: imgHeight
                });
                }
            );
        });

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

Posted: Tue Jan 29, 2013 11:55 am
by jswish
For some reason this is not working. I pasted the following into the common.js file right before the search function as shown below..

Code: Select all

$(document).ready(function() {

            // Get main image info
    var img = $('#image').attr('src'); // get img popup href
            if (img != undefined) {
                var imgWidth = img.substring(img.lastIndexOf('-') + 1, img.lastIndexOf('x'));
                var imgHeight = img.substring(img.lastIndexOf('x') + 1, img.lastIndexOf('.'));
            }
            $('.image-additional img').hover(function () {
//alert("Hovering..");
                var newsrc = $(this).parent().attr('href');
                $('#image').attr({
                    src: newsrc,
                    title: $(this).attr('title'),
                    alt: $(this).attr('alt'),
                    width: imgWidth,
                    height: imgHeight
                });

                $('#image').parent().attr('href', newsrc);
            }, function () {
//alert("return image");
                $('#image').attr({
                    src: img ,
                    title: $(this).attr('title'),
                    alt: $(this).attr('alt'),
                    width: imgWidth,
                    height: imgHeight
                });
                }
            );
      
	/* Search */
	$('.button-search').bind('click', function() {
......
I receive no errors in either Firebug or Chrome Dev tools, and when I uncomment the alerts they both work. Any ideas about what may be going wrong?

Thanks
J.Swish


EDIT
After reviewing some tutorials, I found out the solution through trial and error. Hopefully this helps somebody else. This is on version 1.5.4 btw

in the product.tpl file, under the product folder in your template folder find this line (should be close to the top of the file)

Code: Select all

 <div class="image"><a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="colorbox" rel="colorbox"><img [b]id="productimg"[/b] src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>"/></a></div>
I bolded where I added and image id for the javascript which is the following I put in the common.js file:

Code: Select all

 var img = $('#productimg').attr('src'); // get img popup href
   		 var origImgWidth = 227;
   		 var origImgHeight = 227;

            if (img != undefined) {
                var imgWidth = img.substring(img.lastIndexOf('-') + 1, img.lastIndexOf('x'));
                var imgHeight = img.substring(img.lastIndexOf('x') + 1, img.lastIndexOf('.'));
            }
            $('.image-additional img').hover(function () {
                var newsrc = $(this).parent().attr('href');
                $('#productimg').attr({
                    src: newsrc,
                    title: $(this).attr('title'),
                    alt: $(this).attr('alt'),
                    width: origImgWidth,
                    height: origImgHeight
                });
                $('#productimg').parent().attr('href', newsrc);
            }, function () {
                $('#productimg').attr({
                    src: img,
                    title: $(this).attr('title'),
                    alt: $(this).attr('alt'),
                    width: origImgWidth,
                    height: origImgHeight
                });
                });
Notice that I set a hard number to the image width and size. There are ways to have it auto size using .width() and .height() I just have not done it yet and wanted to put my fix out there..

Thanks
J.Swish

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

Posted: Fri Feb 15, 2013 10:46 am
by shadav
Pobb wrote:This should make the image return to the original when you mouseout of the thumbnails:

Code: Select all

$(document).ready(function () {
            // Get main image info
            var img = $('#image').attr('src'); // get img popup href
            if (img != undefined) {
                var imgWidth = img.substring(img.lastIndexOf('-') + 1, img.lastIndexOf('x'));
                var imgHeight = img.substring(img.lastIndexOf('x') + 1, img.lastIndexOf('.'));
            }
            $('.image-additional img').hover(function () {
                var newsrc = $(this).parent().attr('href');
                $('#image').attr({
                    src: newsrc,
                    title: $(this).attr('title'),
                    alt: $(this).attr('alt'),
                    width: imgWidth,
                    height: imgHeight
                });

                $('#image').parent().attr('href', newsrc);
            }, function () {
                $('#image').attr({
                    src: img ,
                    title: $(this).attr('title'),
                    alt: $(this).attr('alt'),
                    width: imgWidth,
                    height: imgHeight
                });
                }
            );
        });
Thanks works like a charm

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

Posted: Fri Jun 07, 2013 1:47 am
by shimaozheng
Has anyone solved the problem of returning to the main image again? Thousands of thanks if anyone can give me a favor~~

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

Posted: Thu Aug 22, 2013 9:15 am
by NoJoke
The issue is still not solved where when you click to use the popup and you click on the image it brings you to the second image and you when you click the arrow to go back to the main image it does not bring you back to view that image.

Thanks

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

Posted: Wed Sep 25, 2013 3:57 pm
by ekajuan
I think someone has resolved the problem getting back to the main image
http://www.opencart.com/index.php?route ... _license=0
By adding the first image into additional images.

It works perfectly in default theme, but in my custom theme it needs some modifications.
There are 2 issues, which I have solved one of them, but left one clueless.

you can see my shop in http://www.feju-fashion.com
First issue:
in product view I have a button to pop up image "click to zoom image". Now the swapping runs ok, but when poping out the large image it still uses the first pic.
So I simply add into a piec of code into "main-image-swap.js":

//-----------------------------------------
// Author: Qphoria@gmail.com
// Web: http://www.OpenCartGuru.com/
//-----------------------------------------
$(document).ready(function(){

// Get main image info
var img = $('#image').attr('src'); // get img popup href
if (img != undefined) {
var imgWidth = img.substring(img.lastIndexOf('-') + 1, img.lastIndexOf('x'));
var imgHeight = img.substring(img.lastIndexOf('x') + 1, img.lastIndexOf('.'));
}

$('.image-additional img').hover(function() {
var newsrc = $(this).parent().attr('href');

$('#image').attr({
src: newsrc,
title: $(this).attr('title'),
alt: $(this).attr('alt'),
width: imgWidth,
height: imgHeight
});

$('.zoom a').attr({
href: newsrc,
title: $(this).attr('title'),
alt: $(this).attr('alt'),
});


$('#image').parent().attr('href', newsrc);

});
});


The second problem has something to do with the magnifier/cloud zoom. It magnifies the first image regardless any pic swapped. So... the solution should be similar to code above, I add:
$('.zoomWrapperImage img').attr({
src: newsrc,
   });

To change the pic. But alas, it seems to conflict with cloud zoom jquery "cloud-zoom.1.0.2.min.js" or "jquery.jqzoom-core-pack.js"

in chrome inspect element>console shows error:

Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.
Largeimage.fetchdata
Largeimage.node.onload

This error shows everytime I hover the addtional images.

Causing the magnified pic to freeze. Don't understand why

Could anyone help?

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

Posted: Thu Oct 31, 2013 5:09 pm
by jens_b
jfn99 wrote: also how to make the thumbs to click instead of rollover in order to swap the main image?
Did you ever find this out? also looking for click instead of mouseover
thanks :)

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

Posted: Wed Nov 06, 2013 4:39 pm
by jens_b
jens_b wrote:
jfn99 wrote: also how to make the thumbs to click instead of rollover in order to swap the main image?
Did you ever find this out? also looking for click instead of mouseover
thanks :)
Solved it, used this and disabled the zoom:

http://www.opencart.com/index.php?route ... on_id=4455

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

Posted: Thu Dec 03, 2015 5:30 am
by bbprivateer
I just remmed out the line:
// $('#image').parent().attr('href', newsrc);

And that solved the image pop-up problem - so now it seems to function perfectly - the whole script being...

Note: I also add id="image" to the main image html tag in the product.tpl file.


$(document).ready(function () {
// Get main image info
var img = $('#image').attr('src'); // get img popup href
if (img != undefined) {
var imgWidth = img.substring(img.lastIndexOf('-') + 1, img.lastIndexOf('x'));
var imgHeight = img.substring(img.lastIndexOf('x') + 1, img.lastIndexOf('.'));
}
$('.image-additional img').hover(function () {
var newsrc = $(this).parent().attr('href');
$('#image').attr({
src: newsrc,
title: $(this).attr('title'),
alt: $(this).attr('alt'),
width: imgWidth,
height: imgHeight
});

// $('#image').parent().attr('href', newsrc);
}, function () {
$('#image').attr({
src: img ,
title: $(this).attr('title'),
alt: $(this).attr('alt'),
width: imgWidth,
height: imgHeight
});
}
);
});

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

Posted: Wed Mar 22, 2017 7:31 pm
by xxvirusxx
Any ideea how to change this for 2.1.0.2?

Code: Select all

$('.image-additional img').hover(function () {
I tried many lines :)

Code: Select all

$('.image-additional a').hover(function () {
$('.thumbnails > img').hover(function () {
$('.image-additional img').hover(function() {
But not working. Tks

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

Posted: Fri Aug 02, 2019 9:28 pm
by ShabirBhat
Hi thanks for Great mod it works perfect, but when i move out mouse on product it does not select the default images.

Any help will be appreciated.