esMaps

Featured news - image swap on article hover

2009-11-23T05:43:00.000-08:00

This is not an original design and has been shamelessly snatched from the BBC News Site. The end result should look something like this example in the sandbox.
A word of caution, I've not made any attempt for this to work cross-browser and it's only been formally tested in FF & Chrome, that said, if there are any problems they will be trivial to resolve.

There are three main areas of the component which I'll take in turn:-

templating and options of the latest news module
css styling
jQuery for the hover effect

Latest News

I want my latest 3 featured articles to appear with images in the main module (module 1 for now) and all other articles to be listed in the single line article module (module 2 - this is not shown, you can see it here though).
We can achieve this with the following settings in module 1: -

Featured articles to top: true
Number of articles: 3

and in module 2:-

Featured articles to top: true
Number of articles: 10 (as many as you want to see on the page)
Start Point: 3 (in filter settings)

The template for the main module is as follows:-



 
  
   [IMAGETHUMB:200:134][TITLE]

All the content within the UL (i.e. the list item) should be in the HTML body for the template - my syntax checker isn't happy splitting the code into header, body, footer.
You should now see three images and titles displayed down the page.
The design will look best if all the images are the same size, but if not the css will crop them to fit.

css styling

The first task is to style the outer container, latestNews :-


ul.latestNews {
position:relative;
overflow:hidden;
}

We don't need to specify dimensions on this container. It's going to be as wide as the containing module skin allows and the height will be defined by the list items.
The overflow: hidden is going to crop any image too high for our container.


ul.latestNews li img {
position:absolute;
left:0;
top:0;
width:200px;
}

The images have absolute positioning relative to the outer container (specified by the position:relative on the ul).
Now our images are stacked one on top of the other and we've assured that the width of the image will fit our design.


ul.latestNews li p {
margin:0 0 0 200px;
}

The only task of the paragraph element, is to shift the text to the right of the images.
You'll probably find your paragraph element picks up some styling for the DNN default.css, so make sure you clear this.


ul.latestNews li a {
height:40px;
display:block;
}

Setting a height on an inline element, such as an anchor, is not going to work. We need to make it a block element.

The list item's height is a third of the parent ul's height(in this case, our image height), taking into account borders, padding etc.


ul.latestNews li a:link, ul.latestNews li a:visited {
text-decoration:none;
color:#666;
}
ul.latestNews li a:hover {
background:#F3D154 url(images/newsLatest_bg.png) repeat-x scroll 0 0;
color:#fff;
}
ul.latestNews li a:hover img{
z-index:1;
}

When the user hovers over the article, we apply a background image to the text holder, and flip the article's image to the front of the image stack.

So short of a bit of polishing we more or less have all the functionality we want without a line of jQuery or javascript in site. This is our 'degrade gracefully' state if the user isn't using js.
The downside is our rest state. With no hover, the last article's image will be the one displayed and none of the articles are going to be highlighted. As soon as we hover over one of the articles, all is fine.

There is a CSS solution for this. The :first-child & :last-child psuedo classes would give us the functionality we need. Unfortunately :first-child is not supported in IE6 and support for :last-child is even more patchy.
So we'll add a little jQuery. This is just going to make sure the first item and first image is selected as a default state.

We need to add an additional selector to the hover states.


ul.latestNews li a:hover,ul.latestNews li a.activeArticle {
background:#F3D154 url(images/newsLatest_bg.png) repeat-x scroll 0 0;
color:#fff;
}
ul.latestNews li a:hover img, ul.latestNews li a.activeArticle img{
z-index:1;
}

And a little jQuery to apply the class to the first article's anchor element when hover is not active, and remove it when it is.


var $firstArticle=jQuery('ul.latestNews li a:first');
var activeClass='activeArticle';
jQuery($firstArticle).addClass(activeClass);
jQuery('ul.latestNews li a').hover(
function(){
$firstArticle.removeClass(activeClass);
},
function(){
$firstArticle.addClass(activeClass);
}
);

We need to polish the CSS a bit so things look a little nicer.


ul.latestNews {
position:relative;
height: 134px;
border-top:1px solid #ffffff;
border-bottom:1px solid #ffffff;
overflow:hidden;
}
ul.latestNews li {
border-bottom:1px solid #FFFFFF;
background-color:#F3D154;
}
ul.latestNews li p {
margin:0 0 0 200px;
}
ul.latestNews li a {
font-size:16px;
font-family: "Trebuchet MS", sans-serif;
height:40px;
padding:2px 6px 2px 4px;
display:block;
overflow:hidden;
}
ul.latestNews li img {
position:absolute;
left:0;
top:0;
width:200px;
}
ul.latestNews li a:link, ul.latestNews li a:visited {
text-decoration:none;
color:#666;
}
ul.latestNews li a:hover,ul.latestNews li a.activeArticle {
background:#F3D154 url(images/newsLatest_bg.png) repeat-x scroll 0 0;
color:#fff;
}
ul.latestNews li a:hover img, ul.latestNews li a.activeArticle img{
z-index:1;
}

Implementation

I've created a unique skin for the page and a css file with the same name. All the above css will go in the myskin.css file and will only be loaded with this page.
I've added the script to the bottom of the skin file (in this case an .ascx file) and included the jQuery library (you may already have this on your page):-

You can get rid of the flicker as the images are loaded by giving them a style of display:none and using jQuery or JS to make them visble once they have loaded.
This solution won't degrade gracefully if no JS is available. You can avoid this using the noscript tag in your header.

Simple Gallery slide show

2009-05-21T09:09:00.000-07:00

As a big fan of Ventrian modules I wanted to create a simple image slide show plugin for my sites. The result uses the Simple Gallery Random module and a little jQuery and CSS.

You can see the final results in action in the sandbox.

Simple Gallery Settings
First, you're going to need to add the Simple Gallery Random module to your page and point it a the Simple Gallery containing the images you want to cycle through. The results are going to look and perform best if all the images are about the same size, although larger images will be cropped.
You can specify as many photos as you want, but remember that these will all be loaded with your page so don't overdo it. I tend to set the Max Count to 5 or so images.

We don't need the slideshow functionality and the "Include jQuery" option will not do anything if Launch Slideshow is not selected, so we'll need to add jQuery manually.

The border style is not important and we'll not be needing the compression settings. In the template setting we going hack a direct path to the image on disk and add a little markup around it.

You'll need to add in your own portal path in place of /Portals/0/ if you are not using the default home portal. The tokens [HOMEDIRECTORY] and [FILENAME] in the URL should have square brackets round them - asomething that so far I haven't worked out how to do.

OK that's it for the module, all being well you should now see 5 images vertically displayed on the page.

CSS

Now we're going to add a little CSS to style the slide show. You can add the following to the skin.css file.
First we are going to add relative positioning to the table containing the Random Module content. This will ensure that our stacked images stay within the table flow.


table.RandomView {
position:relative;
}

Now the image containers. We'll give these specific dimensions and hide any overflow, effectively cropping the image. Adding the absolute positioning will stack all the images into the size of our frame.


.slideShowFrame{
height: 250px;
width: 360px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}

We don't need style the image unless we want to resize it and only crop in one dimension. Just set one of the dimensions to the same value as the containing DIV.


.slideShowFrame img{
width:360px;
}

jQuery
We not actually going to write any jQuery, we're just going to turn to Mike Alsup's excellent Cycle Lite plugin. I'd recommend you download the minified version of the plugin.

I use the Google hosted jQuery libraries, there's a good chance that when they hit your page, the user will already have this in their local cache and save the 19KB download.

The best place for your jQuery to go is at the bottom of your skin content, before the closing body tag.
I use ascx files for skins - so no body tag in the skin file, and I suggest you add it before the Google tracking code if you are using analytics

Copy the cyclelite plugin to your server and update the path to reflect the location and filename you are using.

Missing the minor release number on the jQuery url (i.e. 1.3 not 1.3.2) will ensure you always pick up the latest 1.3.n release.

Our jQuery just consists of invoking the cycle plugin.

The only essential argument is slideExpr, this identifies the actual "slides" in the show.
The timeout value sets the wait between transitions and the speed, the transition speed.
There are several options available and if it's not enough, you can look at the full cycle plugin (follow the same link above) with it's transition effects (or write your own effects!).

Tidying up
So that's more or less it. You might notice if you install the above, that the collection of slides flickers as the images are loaded and before the jQuery kicks in. We can tweak things to avoid this effect by hiding the images until the page has finished loading.


.slideShowFrame img{
display: none;
}

Adding display none to the image style will ensure that the images are not visible when the page is loaded and the flicker is avoided. We would normally have to show the image explicitly with jQuery; in this case, the job is done for use as part of the cycle plugin internals.

We are still left with one final issue. The slideshow won't degrade gracefully if the client does not have javascript enabled, instead there will just be a hole in your skin where at least a static image would nice. We introduced this problem when we fixed the flicker issue. To get round this we can add some extra css if javascript is not loaded.

You'll need to add this to the top of the content of your skin. Strictly speaking this needs to be in your page header and will not validate as transitional XHTML in the body (although in the world of Dotnetnuke, little does).