Feeds:
Posts
Comments

Archive for July, 2010

jQuery Image Slider

I have tried many java-script/jQuery based image/banner sliders. But Nivo Slider is very good as compared to other freely available plugins. Transitions are very smooth and almost all features can be controlled by parameters. The slogan “The Most Awesome jQuery Image Slider”, on Nivo Slider site, seems very realistic and true.

Nivo Slider works great on Chrome, FireFox and Safari, it gives some problem on IE though.

You can find more about this fantastic plugin at http://nivo.dev7studios.com/

Advertisements

Read Full Post »

jQuery support is available in 5.0 and later versions of DotNetNuke (read more) . If you are working in older versions of DotNetNuke you can include jQuery yourself to your DNN Skin and get all jQuery benefits.

Recently I tried jQuery 1.4.x with DotNetNuke 04.09.xx in a DNN Skin. jQuery was installed successfully and it was working fine. But i noticed that some of the DNN core functionality was broken. Major issue was that once i logged in as admin action menu of modules were no more visible and there were some java-script errors.

I found out that java-script based menus were having conflict with jQuery. These issues were resolved by following two steps:

  1. Call jQuery.noConflict(); before calling jQuery methods
  2. Use fully qualified jQuery instead of $ sign e.g. jQuery(document).ready(function(){…});

Now jQuery is fully compatible and functional with older versions of DotNetNuke and all of the existing functionality is intact.

You can find more about jQuery.noConflict() at http://api.jquery.com/jQuery.noConflict/

Read Full Post »

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.

Read Full Post »