Using jQuery in your content to add some flare to your DotNetNuke website
With all of the changes to DotNetNuke 6, a lot can be lost in the fact that you actually maintain the content of your website, and while the maintenance UI has changed, the content that you present is still up to you. A CMS can only do so much for displaying you content, if you want to do some fancy things, branch out of your standard HTML.
I recently wanted to do a couple of things for my car website (yes, I’m a car guy, so it is easy to use the website for examples).
- I wanted to have a random image loaded in the top portion of the pages of the website, changing, or randomly loading, on each page load (not rotating live on the page).
- I wanted to display a list of recent photos on the home page, and when you click on one of them I wanted them to open up in a light box.
I could have done this in any number of ways, but I chose to implement some simple jQuery for each, below I will show you how.
First things first, the website uses my free DotNetNuke skin, MultiFunction, available via Codeplex. I have some example documentation on how to customize the CSS for the skin to make your site unique, feel free to check out the Documentation page for those examples.
Loading a random image into the header with jQuery
In order to load the random images into the header section of the pages I needed to first create an array of the available photos, I did this just by creating files named hg1, hg2, hg3, etc. I chose to upload these to my bucket on Amazon’s S3, though I just as easily could have used the file manager in DotNetNuke and uploaded them locally to the Portals folder. Because of that, I put the “path” to my Amazon bucket in the javascript, you could change that portion (https://s3.amazonaws.com/dnncdn/p350z/10-16-11/) to your local address, likely something like (/portals/0/images/).
After that I needed to target the CSS for the HeaderGraphic portion of the MultiFunction skin, if you have targeting another element in your HTML you can change that portion in the sample code.
<script type="text/javascript">
var images = ['hg1.jpg', 'hg2.jpg', 'hg3.jpg', 'hg4.jpg', 'hg5.jpg', 'hg6.jpg', 'hg7.jpg', 'hg8.jpg'];
$('.HeaderGraphic').css({'background-image': 'url(https://s3.amazonaws.com/dnncdn/p350z/10-16-11/' + images[Math.floor(Math.random() * images.length)] + ')'});
</script>
You can see the code in action by going to www.project350z.com. Refresh the page once you are there and the large image at the top of the page should load something else randomly on the next page load. You can see the jQuery code for this was pretty straight forward, all of 2 lines if you don’t count the opening and closing Script tags.
Pulling in photos from a Photo Group on Flickr and Displaying in a Lightbox
This one is quite a bit more complex to do, though if you have the latest release of MultiFunction v01.01.00 (released Today 10/17/2011) it becomes a bit easier. Within the latest release of the skin I have included a jQuery plugin called OrangeBox, you can find out more about the plugin from the developer http://orangebox.davidpaulhamilton.net/. It is a great little tool for providing LightBox functionality into a website, and not just for photos like I am using it here. It will also embed YouTube videos, you can see a demo of it running on the homepage at http://multifunction.dnndaily.com
If you aren’t using MultiFunction as your skin, you will need to include some extra information, I will document that later in this post.
I’m using the Razor Host module that comes with DotNetNuke (requires .NET 4.0) for the next section of code, though you could also do the same with the HTML module by switching to the Basic Text mode instead of Rich Text.
In the Razor Host module I have created a new script (I called it latestphotos) in which I have pasted the following HTML/JavaScript code. This code, as you can see inline in the comments, is based off of a post from Richard Shepard, though I made some changes to get things working properly in DotNetNuke.
<script type="text/javascript">
// jquery sampled from http://www.richardshepherd.com/how-to-use-jquery-with-a-json-flickr-feed-to-display-photos/
$(document).ready(function(){
$.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=1774215@N20&lang=en-us&format=json&jsoncallback=?", displayImages);
function displayImages(data) {
var htmlString = "<ul>";
$.each(data.items, function(i,item){
var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");
var largeImage = (item.media.m).replace("_m.jpg", "_b.jpg");
htmlString += '<li><a href="' + largeImage + '" ';
htmlString += ' rel="lightbox[homepage]" ';
htmlString += ' data-ob_caption="' + item.title + '"';
htmlString += ' data-ob_linkText="View on Flickr"';
htmlString += ' data-ob_link="' + item.link + '"';
htmlString += ' name="' + item.link + '"';
htmlString += ' data-ob_share="false"';
htmlString += '>';
htmlString += '<img title="' + item.title + '" src="' + sourceSquare;
htmlString += '" alt="';
htmlString += item.title + '" />';
htmlString += '</a></li>';
});
$('#p350zimages').html(htmlString + "</ul>");
$('a[rel*=lightbox]').orangeBox();
}
});
</script>
<div id="p350zimages"> </div>
In that code, you can point to a Photo Group on flickr using the ID for the Group, in this case the Group ID for the Project350z.com group is 1774215@N20. If you want to pull back photos from a specific user, rather than a group, you can use http://api.flickr.com/services/feeds/photos_public.gne?id=17726343@N00&lang=en-us&format=json&jsoncallback=? which currently pulls back photos from my personal stream, changing your User ID (mine is 17726343@N00). You can see the latter at http://www.chrishammond.com
Once you have the OrangeBox plugin referenced on your website (within the MultiFunction skin) you can do things like popup images or YouTube videos into a light box by adding simple HTML code. For example, the homepage of http://multifunction.dnndaily.com uses the following HTML in the “LightBox Examples” section.
<ul>
<li><a href="http://www.youtube.com/watch?v=H50wW4eAFKo" rel="lightbox">Sample Video</a></li>
<li>Sample Image <br />
<a href="/portals/_default/skins/multifunction/home.jpg" rel="lightbox"><img src="http://multifunction.dnndaily.com/portals/_default/skins/multifunction/thumbnail_home.jpg" alt="sampleimage" /></a></li>
</ul>
The possibilities here are limitless! So get to it, start adding some flare to your own DotNetNuke website.
UPDATE – Missing CSS
When I originally posted this I left out one bit of CSS out that is necessary for the display I have on Project350z.com. Add this to your portal.css file #p350zimages ul li{display:inline;padding:0 5px 0 0;}
Not using MultiFunction and still want these cool features?
What to do if you aren’t using MultiFunction? You need to add this next line in the same Razor Host script, you should also upload the JS file for the OrangeBox code to your own server and change the URL. You could use the URL here, but I would appreciate it if you used the bandwidth you pay for, instead of the S3 bandwidth I pay for, I may remove that file at some point in time 
<script src="https://s3.amazonaws.com/dnncdn/js/ob/orangebox.min.js" ></script>
You also need to add the CSS for the OrangeBox plugin to your Portal.CSS file, you can do this via the Site Settings page under the Admin menu. Here is the CSS for the plugin (this is already included in the MultiFunction skin.
/*
* version: 2.0.3
* package: OrangeBox
* author: David Paul Hamilton - http://orangebox.davidpaulhamilton.net
* copyright: Copyright (c) 2011 David Hamilton / DavidPaulHamilton.net All rights reserved.
* license: GNU/GPL license: http://www.gnu.org/copyleft/gpl.html
*/
#ob_overlay {
background-color:#333;
display:none;
height:100%;
left:0;
position:fixed;
top:0;
width:100%;
z-index:100;
}
#ob_container {
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
z-index:101;
}
#ob_float {
float:left;
height:50%;
min-width:100%;
}
#ob_window {
clear:both;
cursor:default;
display:none;
position:relative;
z-index:102;
margin:0 auto;
padding:22px;
}
#ob_content {
background-color:#fff;
border:0 solid #fff;
}
#ob_caption {
color:#333;
background-color:#fff;
position:absolute;
bottom:15%;
font-size:small;
max-width:75%;
}
#ob_caption p {
padding:0;
margin:10px;
cursor:text;
}
#ob_window img {
display:block;
}
#ob_inline {
padding:20px;
overflow:auto;
}
#ob_load {
-moz-border-radius:5px;
background:url(loading.gif) no-repeat center;
background-color:#fff;
border-radius:5px;
height:40px;
left:50%;
position:fixed;
top:50%;
width:40px;
z-index:103;
margin:-25px 0 0 -25px;
padding:5px;
}
#ob_error {
text-align:center;
width:250px;
padding:10px;
}
#ob_close {
background:url(buttons.png);
cursor:pointer;
height:30px;
left:0;
position:absolute;
top:0;
width:30px;
z-index:1103;
}
#ob_title {
color:#fff;
left:auto;
position:absolute;
right:22px;
top:-2px;
z-index:1103;
}
#ob_title h3 {
margin:0;
padding:0;
}
#ob_left,#ob_right {
bottom:8px;
cursor:pointer;
height:100%;
position:absolute;
width:75px;
z-index:1102;
}
#ob_left { left:-53px; }
#ob_right { right:-53px; }
#ob_left-ico,#ob_right-ico {
cursor:pointer;
display:block;
height:30px;
margin-top:-9px;
position:absolute;
top:50%;
width:30px;
z-index:1102;
}
#ob_left-ico {
background:url(buttons.png) center;
right:10px;
}
#ob_right-ico {
background:url(buttons.png) right;
left:10px;
}
#ob_left:hover,#ob_right:hover { visibility:visible; }
#ob_dots {
list-style:none;
text-align:center;
margin:0;
padding:0;
width:100%;
}
#ob_dots li {
height:8px;
list-style:none;
width:8px;
margin:3px;
-moz-border-radius:4px;
background-color:#666;
border-radius:4px;
cursor:pointer;
display: -moz-inline-stack;
display: inline-block;
zoom:1;
*display:inline;
}
#ob_dots .current { background-color:#CCC!important; }
#ob_share {
position:absolute;
right:24px;
top:3px;
}