Home > DotNetNuke, Javascript, JQuery > CATALooK Product Thumbnails

CATALooK Product Thumbnails

While designing a skin for CATALook (eCommerce Module for DotNetNuke), there was a scenario where product additional images were shown in the product details page. CATALook displays some default images as thumbnails, clicking the default image opens actual image in light box.

Default Product Thumbnails

Default Product Thumbnails

Now if we want to replace the default thumbnail with actual thumbnail, CATALooK does not provide support for this. To achieve this, i edited the CATALooK skin to add ID to parent TD where the product image thumbnails control was added. You can search for the text <cat:MEDIAMENU id=”MEDIAMENU2″ Runat=”server”> in /DesktopModules/CATALooKStore/Skins/SKIN_FOLDER/ItemPane.ascx. Now we can use this ID in Java-script to replace the default image with actual product image. Following is the screenshot after adding the ID and Java-script.

Actual Product Thumbnails

Actual Product Thumbnails

Sample Java-script method can be downloaded here.
jQuery version can be downloaded here.

Categories: DotNetNuke, Javascript, JQuery Tags: ,
  1. August 5, 2010 at 02:27

    I would like to exchange links with your site ajavaid.wordpress.com
    Is this possible?

    • Azhar Javaid
      August 7, 2010 at 17:13

      I am not sure – what do you mean by this? do you want me to do anything at my end?

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: