Random pics.

This may come in handy:

This little gadget may add a nice variety to Your website. There are many ways in which You could use it - for example some time ago I designed a website dedicated to "Moomins") (a Japanese-Dutch anime television series with a pretty original trait). As a decorative element I decided to choose random characters from the story, displayed in a form of a small figurines. Each post has its own - randomly chosen - figurine, which was automatically placed somewhere next to it (so it looked pretty fancy when looking at a bunch of posts). Moreover, for this purpose I've find animated .gifs, therefore the whole concept added not only a nice visual variety, but it also brought more life into the project.

You could, however, use "the engine" of this concept in many other ways, according to Your Own imagination. It may be a random picture from Your life, or a random photograph of Your pet, or... sky's the limit. And in case You would like to have even more "extravagance" :) - You may prepare a similar, but a little bit more complex concept of graphics which are time-dependent .

This time let's see, how You could do randomly-displayed pics, powered by jQuery.

It works like this: to each post jQuery adds a container which will be used to display random pictures. Then in CSS You define each picture as a single .class with background image (at this point You need to have all the pictures uploaded somewhere - and have all their addresses at hand). The last step will be to add a small snippet of jQuery code which will ascribe a random .class to the container created before. That's it.

Let's look at the code - first let's create a container for displaying random pictures:

$(".post-body").append( "<span class='Moomins'></span>" );

Second step: in CSS let's define this container, and - more importantly - each picture which may be displayed within it (in a form of a CSS background image):

.Moomins
{
position: absolute;
left: 320px; bottom: 0px;
display: block;
width: 50px; height: 50px;
}

Note that I use .class because I'm gonna to display random graphics next to each post - so there will be often more than one random graphics displayed on the site at once. In such a case it's a better practice to use .class instead of #ID - because #ID's serve as names for individual objects, while .classes are names for objects which can be present on the site multiple times simultaneously.

The important part of this code is the orange one, which 1) transforms an in-line span object into a block container, in order for You to be able to ( 2) ) define its height and weight. Those two characteristics should correspond to Your random pictures/images ones.

Now, still in CSS, let's define a common part of all random pics (let's say, there are three of them): the way they will be displayed (regarding the container mentioned above):

.randomPic1, .randomPic2, .randomPic3
{
background-position: top left;
background-repeat: no-repeat;
}

Now, let's define each single picture of Your set, one by one - the code pattern for a single pic could look like this:

.randomPic1
{
background-image: url(http://theFirstPictureAddress.gif);
}

All right, this is all about CSS, let's switch back to jQuery. Below the code You've placed before (mentioned earlier on) add a snippet for randomizing pictures (by ascribing a random .class to Your dedicated container):

$(document).ready(function(){
var classes = ["randomPic1", "randomPic2", "randomPic3"];
$(".Moomins").each(function(){
$(this).addClass(classes[~~(Math.random()*classes.length)]);
});
});

If You follow this blog You may recognize this solution as the one I've used as a part of "fancy headers" effect described here. Therefore both cases are good examples of how useful jQuery may be - if You combine it with Your Own imagination :) .