Post by doidge » Tue Mar 27, 2012 7:19 am

"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.

Newbie

Posts

Joined
Mon Mar 26, 2012 9:09 am

Post by Qphoria » Tue Mar 27, 2012 10:54 am

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.

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by angelaho » Wed Apr 25, 2012 5:09 pm

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?

Newbie

Posts

Joined
Fri Dec 23, 2011 1:48 pm

Post by Klimskady » Fri Apr 27, 2012 8:53 am

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.

Active Member

Posts

Joined
Tue Jun 07, 2011 7:57 am

Post by jfn99 » Sat Oct 13, 2012 12:07 am

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?

New member

Posts

Joined
Thu Feb 25, 2010 5:14 pm

Post by olimax » Sun Oct 14, 2012 6:48 am

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

User avatar
New member

Posts

Joined
Thu Dec 22, 2011 5:08 pm
Location - Barcelona & London

Post by CrysTim » Wed Oct 17, 2012 4:33 pm

Thank you for your Jscript! :)
It's working like a charm!

New member

Posts

Joined
Sun Oct 07, 2012 8:28 am

Post by shadav » Wed Oct 24, 2012 1:15 am

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?

User avatar
Newbie

Posts

Joined
Wed Oct 24, 2012 1:12 am
Location - Westfield, IN

Post by Pobb » Mon Nov 26, 2012 12:39 pm

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
                });
                }
            );
        });

Active Member

Posts

Joined
Tue May 31, 2011 2:35 pm

Post by jswish » Tue Jan 29, 2013 11:55 am

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

Newbie

Posts

Joined
Tue Jan 29, 2013 11:44 am

Post by shadav » Fri Feb 15, 2013 10:46 am

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

User avatar
Newbie

Posts

Joined
Wed Oct 24, 2012 1:12 am
Location - Westfield, IN

Post by shimaozheng » Fri Jun 07, 2013 1:47 am

Has anyone solved the problem of returning to the main image again? Thousands of thanks if anyone can give me a favor~~

Newbie

Posts

Joined
Fri Jun 07, 2013 1:45 am

Post by NoJoke » Thu Aug 22, 2013 9:15 am

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

Active Member

Posts

Joined
Fri Oct 14, 2011 5:37 am

Post by ekajuan » Wed Sep 25, 2013 3:57 pm

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?

Newbie

Posts

Joined
Wed Sep 25, 2013 3:34 pm

Post by jens_b » Thu Oct 31, 2013 5:09 pm

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 :)

New member

Posts

Joined
Mon Oct 28, 2013 6:19 pm

Post by jens_b » Wed Nov 06, 2013 4:39 pm

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

New member

Posts

Joined
Mon Oct 28, 2013 6:19 pm

Post by bbprivateer » Thu Dec 03, 2015 5:30 am

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
});
}
);
});

Newbie

Posts

Joined
Thu Nov 12, 2015 9:41 am

Post by xxvirusxx » Wed Mar 22, 2017 7:31 pm

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

My Extensions | OC 3.0.3.1, 3.0.2.0, 2.3.0.2 with bugs fixed | 2.3.0.2 Custom version


Active Member

Posts

Joined
Tue Jul 17, 2012 10:35 pm
Who is online

Users browsing this forum: No registered users and 4 guests