Hi David,
Just had some good feedback on one of my sites regarding images, as my product images are quite small someone has requested whether the images can be enlarged, which is quite popular on competitive sites
Is that some thing that can be implemented at all?
Regards
Paul
Hi David
The latter sound cool! now how to implement?
Please advise
Regards
Paul
Hi Paul,
The basic code is straight forward - but may be complicated slightly as the following JavaScript popup code must only be included once on any page...
<script type='text/JavaScript'>
function popup(url)
{
var sw = screen.width;
var sh = screen.height;
var pw = 450;
var ph = 450;
var sx = (sw-pw)/2;
var sy = (sh-ph)/2;
popupWin = window.open(url,"","width="+pw+",height="+ph+",menubar=no,status=no,titlebar=no,toolbar=no,scrollbars=no,resizable=no,screenX="+sx+",screenY="+sy+",left="+sx+",top="+sy);
popupWin.focus();
}
</script>With that in place, it's simply a case of removing the existing hyperlink around the images in the search results, featured products etc., and instead adding an onclick attribute to the image, for example:
onclick='JavaScript:popup("<?php print $product["image_url"]; ?>");'If you could add the above JavaScript to the top of your WordPress template, and then send me your /html/featured.php i'll made the image code changes in that file for you...
Cheers,
David.
Hi David,
Can this be done in wordpress?
Regards Tony
Hi Tony,
Sure - it can be inserted directly into the templates (wp-admin > Settings > PriceTapestry.org) without having to make any code changes...
For the product page, insert the JavaScript section of the mod:
<script type='text/JavaScript'>
function popup(url)
{
var sw = screen.width;
var sh = screen.height;
var pw = 450;
var ph = 450;
var sx = (sw-pw)/2;
var sy = (sh-ph)/2;
popupWin = window.open(url,"","width="+pw+",height="+ph+",menubar=no,status=no,titlebar=no,toolbar=no,scrollbars=no,resizable=no,screenX="+sx+",screenY="+sy+",left="+sx+",top="+sy);
popupWin.focus();
}
</script>...into the top of the Product / Main template, and then where you have:
src='%IMAGE_URL%'...REPLACE with:
src='%IMAGE_URL%' onclick='JavaScript:popup("%IMAGE_URL%");'For Featured Product and Search Results, place the JavaScript section into the Featured Products / Before and Search Results / Before templates respectively, and in Featured Products / Each and Search Results / Each look for where the image src attribute is generated using
src='%IMAGE_URL%'...and REPLACE with:
src='%IMAGE_URL%' onclick='JavaScript:popup("%IMAGE_URL%");'Cheers,
David.
--
PriceTapestry.com
Hi David,
This is what i done in price tapestry settings in wordpress in the product section in the main field, this is just the beginning is this correct
<script type='text/JavaScript'>
function popup(url)
{
var sw = screen.width;
var sh = screen.height;
var pw = 450;
var ph = 450;
var sx = (sw-pw)/2;
var sy = (sh-ph)/2;
popupWin = window.open(url,"","width="+pw+",height="+ph+",menubar=no,status=no,titlebar=no,toolbar=no,scrollbars=no,resizable=no,screenX="+sx+",screenY="+sy+",left="+sx+",top="+sy);
popupWin.focus();
}
</script><div class='pto_product'>
%IF_IMAGE%
<img class='pto_product_image' src='%IMAGE_URL%' onclick='JavaScript:popup("%IMAGE_URL%");' />
%ENDIF_IMAGE%Hi Tony,
That looks fine - if it's not working, could you perhaps post an example product page URL (I'll remove before publishing your reply) and I can check the HTML being generated for you...
Cheers,
David.
--
PriceTapestry.com
Hi Tony,
Ah - the popupWin = window... line must be all on one line otherwise the string constant breaks - corrected in all code samples above...
Cheers,
David.
--
PriceTapestry.com
Thanks David,
One more thing Is It possible to have an enlarge icon of some sort under the images, that would work well.
Cheers Tony 
Hi Tony,
Sure - it can all go into your template and just needs to have the same onclick code as the main image, try something like this:
<img style='cursor:pointer;' src='/wp-content/plugins/pto/resources/enlarge.jpg' onclick='JavaScript:popup("%IMAGE_URL%");' />Either upload a suitable file as /wp-content/plugins/pto/resources/enlarge.jpg or simply replace that with a link to a file elsewhere e.g. a top level /images/ or /media/ file as required..
Hope this helps!
Cheers,
David.
--
PriceTapestry.com
Hi David,
Really appreciate your support sorry to bother you again.
I am not sure were to put the code, I have placed it in the product main section take a look
<div class='pto_product'>
%IF_IMAGE%
<img class='pto_product_image' src='%IMAGE_URL%' style='cursor: hand; cursor: pointer;' src='/wp-content/plugins/pto/resources/enlarge.jpg' onclick='JavaScript:popup("%IMAGE_URL%");' />
%ENDIF_IMAGE%
%IF_DESCRIPTION%This makes the hand show up when hovering over the image. The nearest I've got is the image(enlarge icon) above the product description, ideally i would like the enlarge icon below the image.
Cheers Tony
Hi Tony,
It needs to be a second img tag - have a go with:
<div class='pto_product'>
%IF_IMAGE%
<img class='pto_product_image' src='%IMAGE_URL%' /><br />
<img src='/wp-content/plugins/pto/resources/enlarge.jpg' onclick='JavaScript:popup("%IMAGE_URL%");' style='cursor: hand; cursor: pointer;' />
%ENDIF_IMAGE%
%IF_DESCRIPTION%Hope this helps!
Cheers,
David.
--
PriceTapestry.com
Hi Paul,
Various ways to go about this. As it stands, images are hyperlinked to the product. If you wanted to keep this, then you could add "Larger Image" link below images - although that might look a bit messy perhaps.
Alternatively, what about changing the images so that if you click them you get a pop-up with the full size image?
What do you think?
Cheers,
David.