dk.msn.com News style with Content Query

Coding News web part that resembles News display at dk.msn.com (or uk.msn.com) with one top headline and 5 thumbnail pictures below was not that hard to code.
Here are the things that you have to code:
- display the latest item as headline with large picture
- display as thumbnails, both the latest item and the last 5-6 items below the headline news
- shuffle the items - display item no. 2 as headline and after some time, display item no. 3 and so on
- fade the thumbnail that is currently displayed as headline
- allow user to click or move the mouse over thumbnails and choose which news is displayed as headline
- allow user to click on the item and display the entire item on another page
Here are some tips:
1. Create a custom style in your custom ItemStyle.xsl that is referenced from Content Query web part
2. Create a variable RowNum to display the latest news item as top headline:
3. Write if statement to display only the first item:

..xsl:if test="$RowNum < 1">...

4. Define both a and img tag with id, so you can reference them from JavaScript:

id="newsdisplayimage" src="{$SafeImageUrl}" title="{@ImageUrlAltText}" />

5. Define onClick and onMouseOver for thumbnail image link:

javascript:ShowLarge('')

6. Define thumbnail image with id:



7. Create a reference to JavaScript on the page
8. ShowLarge JavaScript function - example of how to display the thumbnail image as headline - large image:

function ShowLarge(Row) { try {var image=document.getElementById(Row + "_image");var mainimage = document.getElementById("newsdisplayimage");
mainimage.filters.item("DXImageTransform.Microsoft.Fade").apply();
mainimage.src=image.src;
mainimage.filters.item("DXImageTransform.Microsoft.Fade").play();


9. Shuffle between news items:
var t=setInterval("ShowLarge()",12000);


10. Fade thumbnail image for the current headline:
image.style.filter="Alpha(opacity=50)";

SP.CamlQuery & HTML web part

How to display list content using HTML web part?
1. Add HTML Form Web Part to the page in SharePoint 2010
2. Click on the arrow and choose Edit Web Part
3. In the Tool Pane, click on Source Editor button
4. Add the following code (delete all br />):

<script type="text/javascript"><br /> //starts the ListItems function<br /> ExecuteOrDelayUntilScriptLoaded(ListItems, "sp.js");<br /><br /> function ListItems() {<br /><br /> try {<br />//gets the current site context, use SP.ClientContext("/site/subsite"); for list on another site<br /> var ctx = new SP.ClientContext.get_current();<br /> var web = ctx.get_web();<br /> var iList = web.get_lists().getByTitle('ListItems');<br />//gets the current page ID<br /> var pageID = SP.PageContextInfo.get_pageItemId();<br /> <br /> var caml = new SP.CamlQuery();<br />//gets list items from ListItems list <br /> caml.set_viewXml("<View><Query><Where><And><Eq><FieldRef Name='ContentType' /><Value Type='Text'>CustomListCT</Value></Eq><Eq><FieldRef Name='CurrentPageID' /><Value Type='Text'>" + pageID + "</Value></Eq></And></Where><OrderBy><FieldRef Name='Modified' Ascending='FALSE' /></OrderBy></Query></View>");<br /> <br /><br /> this.allItems = iList.getItems(caml);<br /><br /> ctx.load(this.allItems, "Include(Title,ItemContent,Created)");<br /> ctx.executeQueryAsync(<br /> Function.createDelegate(this, this.onSucceededCallback),<br /> Function.createDelegate(this, this.onFailedCallback));<br /> }<br /> catch (e) {<br /> alert(e);<br /> }<br /> }<br /> function onSucceededCallback(sender, args) {<br /><br /> var div = document.getElementById("CustomDIV");<br /> <br /> var str = "";<br /><br /> var enumerator = this.allItems.getEnumerator();<br /><br /> while (enumerator.moveNext()) {<br /><br /> var li = enumerator.get_current();<br /><br /> str = str + "<div class='ItemTitle'>" + li.get_item("Title") + "</div>" + "<div class='ItemBody'>" + li.get_item("ItemContent") + "</div>"<br /> + "<div class='ItemCreated'>" + li.get_item("Created").toLocaleString() + "</div>";<br /> }<br /> div.innerHTML = str;<br /> }<br /> <br /></script><br /><div id="CustomDIV"><br /></div>