Page 1 of 1
ProductImage Main Image Click
Posted: Thu Mar 21, 2013 6:36 pm
by euroluxantiques
I have installed CrazyEgg heat mapping on our new Gold website, and I have been surprised how many people try to click on the main image to make it larger, even though I clearly have written beside the thumbnails to click on the thumbnails for a larger view. I've always known our customers won't read anything. Anyway, I think I need to give the customers what they want and allow them to click on the large image. Does anyone know how I would modify this part of ProductImage.ascx to get it to work like the thumbnails?
Code: Select all
<div class="mainImageArea" >
<div class="mainImageWrapper">
<div class="mainImage">
<asp:Image ID="ProductImage" runat="server" BorderWidth="0" CssClass="productImage" ClientIDMode="Static" />
<asp:Image ID="NoIcon" runat="server" SkinID="NoIcon" Visible="false" EnableViewState="false" CssClass="productImage"/>
<asp:Image ID="NoThumbnail" runat="server" SkinID="NoThumbnail" Visible="false" EnableViewState="false" CssClass="productImage"/>
<asp:Image ID="NoImage" runat="server" Width="300" Height="300" SkinID="NoImage" Visible="false" EnableViewState="false" CssClass="productImage"/>
</div>
</div>
</div>
I can't quite follow the thumbnail example to figure out how I would implement it above. Thanks!
Re: ProductImage Main Image Click
Posted: Fri Mar 22, 2013 5:29 am
by mazhar
Edit your ConLib/ProductImage.ascx file and place following script just above the
<div class="mainImageArea">
Code: Select all
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$(".fancybox-thumbs").hover(function () {
var thumb = this;
$(".productImage").each(function (i) {
$(this).unbind("click", mainImageClick);
$(this).bind("click", { thumbId: $(thumb).attr('id') }, mainImageClick);
});
});
var firstThumb = $(".fancybox-thumbs").first();
if (firstThumb != null) {
$(".productImage").each(function (i) {
$(this).unbind("click", mainImageClick);
$(this).bind("click", { thumbId: $(firstThumb).attr('id') }, mainImageClick);
});
}
});
function mainImageClick(event) {
$("#" + event.data.thumbId).trigger("click");
}
</script>
Save and refresh your page. You may need to clear the browser cache. If every thing went smooth now it should open image popup on main image click.
Re: ProductImage Main Image Click
Posted: Fri Mar 22, 2013 9:13 am
by euroluxantiques
Works great! Thanks!
Re: ProductImage Main Image Click
Posted: Mon Mar 25, 2013 10:17 am
by david-ebt
If you add this to your styles.css file it will change the mouse to a pointer when the user hovers over the main product image.
Code: Select all
div.productImageArea div.mainImage img.productImage:hover { cursor:pointer; }
Re: ProductImage Main Image Click
Posted: Mon Mar 25, 2013 10:31 am
by mazhar
david-ebt wrote:If you add this to your styles.css file it will change the mouse to a pointer when the user hovers over the main product image.
Code: Select all
img#ProductImage.productImage:hover { cursor:pointer; }
Yep nice catch
Pointer will make it more clear that content is clickable.
Re: ProductImage Main Image Click
Posted: Tue Mar 26, 2013 7:22 am
by ChipWV
Hi Mazhar,
Could you put this in as an fix/feature in R5, I believe most of us would consider this to be the correct behavior. This method should be the default.
Re: ProductImage Main Image Click
Posted: Tue Mar 26, 2013 7:34 am
by mazhar
You are always welcome to use the Feedback button in merchant admin to post your suggestion
.