ProductImage Main Image Click

[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!

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

[euroluxantiques]

Works great! Thanks!

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

[mazhar]

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.

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

[mazhar]

You are always welcome to use the Feedback button in merchant admin to post your suggestion .