Displaying Random Images in Wordpress

Vailancio Rodrigues — Thu, 29 Oct 2009 17:07:09 +0000

Small code snippet that will allow you to display random images, every time the page loads. Major advantage of using it is that you no longer have to make use of scripts (JavaScript) which can be bulky, especially on the older browsers. Though we have used this code with images only, it can be easily used for any other object to be displayed in random order. It’s more of PHP than Wordpress.

Code

Place this code anywhere in your Wordpress template – header, footer, etc, with appropriate changes to CSS.

Change (1,4) depending upon the number of images.

CSS

Add this CSS code to the Wordpress template CSS file.

#image1 {
background:url(img/image1.jpg);
width:500px;
height:100px;
}
#image2 {
background:url(img/image2.jpg);
width:500px;
height:100px;
}
#image3 {
background:url(img/image3.jpg);
width:500px;
height:100px;
}
#image4 {
background:url(img/image4.jpg);
width:500px;
height:100px;
}

Create a Typing Text Effect using jQuery

Vailancio Rodrigues — Wed, 26 Aug 2009 12:20:04 +0000

For long now flash has been dominating the interactive web animation, using JavaScript was a daunting task. But introduction of frameworks like jQuery, MooTools, Scriptaculous, etc have made animating web component much easier. Another advantage of using these frameworks over flash is that they are search engine friendly. Though search engine do not index JavaScript, actual content is present in html or other SEO friendly code.

You must have seen this text effect on many flash websites. jTicker is a jQuery plugin that can be used for creating such effect without the use of flash. This effect comes in handy when you want to force the visitor to read the text. But should be used wherever necessary, as the usability suffers. jTicker can be declared on any element and can be stylized using CSS. You can also use event buttons to play, stop and control the speed of the effect.

HTML

Let us start with html markup. Make sure that you have linked the .js files correctly.

jticker | Demo

jTicker Demo

What does jTicker do?
jTicker takes an elements' children and displays them one by one, in sequence, writing their text 'ticker tape' style. It is smart enough to ticker text from an element heirarchy, inserting elements back into the DOM tree as it needs them. That means almost any content can be 'tickered'.
It can be controlled with jQuery events.
next

Not my cup of tea, really, ...
annoying little blinky things trying to distract attention when you want to get on with the serious business of reading a website, but if it's your thing, here it is.

jTicker has some neat features:

jTicker can be declared on any element, and it respects that element's DOM tree, printing it back out with the same hierarchy.
jTicker handles any number of alternating cursors (or just one).

jTicker's cursor container is styleable using the class .cursor, or can be defined as your own jQuery object
jTicker reacts to jQuery events "play", "stop" and "control". You can try them out below.

There is one caveat:

But obviously not with those brackets. That's another thing, jTicker is not good at handling html character entities. So make that two caveats.

CSS

Add this code to your CSS file or to the

Pixel Art » Tutorials