DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.


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

  1. 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).
  2. 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/[email protected]&amp;lang=en-us&amp;format=json&amp;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 [email protected]. If you want to pull back photos from a specific user, rather than a group, you can use http://api.flickr.com/services/feeds/[email protected]&amp;lang=en-us&amp;format=json&amp;jsoncallback=? which currently pulls back photos from my personal stream, changing your User ID (mine is [email protected]). 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 Winking smile

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

UPDATE 2/8/2012

Some updates to the jquery for XHTML compliancy.

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
    {
        lang: "en-us",
        id: "[email protected]",
        format: "json"
    }, displayImages);

Comments

jwren
Chris,

this is a step in the direction I am looking for but would love some further help with integrating all of this on my dnn site

I am basically wanting to create a sample page where someone can click on the thumbnail and bring up the lightbox accordingly with the images linked through my portal

How exactly do I go about this?
jwren Saturday, February 15, 2014 7:15 PM (link)
Chris Hammond
Jwren,

You should check out my HammerFlex skin and check out the HTML on ChrisHammond.com to see how I am doing the lightbox photos with that.

Chris
Chris Hammond Sunday, February 16, 2014 7:26 PM (link)

Comment Form

Only registered users may post comments.

NewsArchives


Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (32)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (209)
Chris Paterra (55)
Clinton Patterson (36)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (151)
Dave Buckner (2)
David Poindexter (4)
David Rodriguez (3)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (10)
George Alatrash (6)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (53)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (165)
William Severance (5)

Content Layout

Subscribe to DNN Digest

DNN Digest is our monthly email newsletter. It highlights news and content from around the DNN ecosystem, such as new modules and themes, messages from leadership, blog posts and notable tweets. Keep your finger on the pulse of the ecosystem by subscribing.  


Copyright 2017 by DNN Corp Terms of Use Privacy
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out