"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.
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.
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.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?
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
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
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
});
}
);
});
For some reason this is not working. I pasted the following into the common.js file right before the search function as shown below..
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)
I bolded where I added and image id for the javascript which is the following I put in the common.js file:
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
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() {
......
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>
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
});
});
Thanks
J.Swish
Thanks works like a charmPobb 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 }); } ); });
Has anyone solved the problem of returning to the main image again? Thousands of thanks if anyone can give me a favor~~
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
Thanks
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?
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?
Solved it, used this and disabled the zoom:jens_b wrote:Did you ever find this out? also looking for click instead of mouseoverjfn99 wrote: also how to make the thumbs to click instead of rollover in order to swap the main image?
thanks
http://www.opencart.com/index.php?route ... on_id=4455
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
});
}
);
});
// $('#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
});
}
);
});
Any ideea how to change this for 2.1.0.2?
I tried many lines
But not working. Tks
Code: Select all
$('.image-additional img').hover(function () {
Code: Select all
$('.image-additional a').hover(function () {
$('.thumbnails > img').hover(function () {
$('.image-additional img').hover(function() {
Upgrade Service | OC 2.3.0.2 PHP 8 | My Custom OC 3.0.3.8 | Buy me a beer
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.
Any help will be appreciated.
Great mod, anyone knows how to get it working on version 3x?
Regards,
Nightwing
Access to my Free Extensions: https://www.opencart.com/index.php?rout ... =nightwing
Who is online
Users browsing this forum: No registered users and 46 guests