I’ll explain a simple way to create an automatic image rotator using jQuery. First have a look at the demo page (opens in a new tab) to understand what we’re trying to accomplish. You can also download the tutorial’s source code.

In the example, the initial image will be displayed on the left of a paragraph containing some sample text:

<div id="test">
  <img id="myImage" src="test1.png" alt="image test" />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</div>

First, we have to store the filenames of our images in an array. We also have to initialise a counter.

var images = new Array ('test1.png', 'test2.png', 'test3.png');
var index = 1;

The next step is to create the function which will rotate the images. We’ll call it rotateImage(). At the beginning, the currently displayed image fades out. Then, we load the next image from the images array (the counter we introduced before is being used here) and we fade it in. At the end of the function, we deal with the counter (either increment it, or reset it if all the imaged were displayed).

function rotateImage()
{
  $('#myImage').fadeOut('fast', function()
  {
    $(this).attr('src', images[index]);

    $(this).fadeIn('fast', function()
    {
      if (index == images.length-1)
      {
        index = 0;
      }
      else
      {
        index++;
      }
    });
  });
}

The last step is to call the rotateImage function repeatedly inside the $(document).ready function using setInterval. In the example, the function rotateImage() is being executed every 2.5 seconds (2500 milliseconds).

$(document).ready(function()
{
  setInterval (rotateImage, 2500);
});

The complete JavaScript code:

var images = new Array ('test1.png', 'test2.png', 'test3.png');
var index = 1;

function rotateImage()
{
  $('#myImage').fadeOut('fast', function()
  {
    $(this).attr('src', images[index]);

    $(this).fadeIn('fast', function()
    {
      if (index == images.length-1)
      {
        index = 0;
      }
      else
      {
        index++;
      }
    });
  });
} 

$(document).ready(function()
{
  setInterval (rotateImage, 2500);
});

HTML:

<div id="test">
  <img id="myImage" src="test1.png" alt="image test" />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</div>

If you haven’t done it already, have a look at the demo page (opens in a new tab). You can also download the tutorial’s source code.

In order to complete this tutorial you will need to apply for a flickr API key. You will also need to download a copy of phpFlickr API Kit. The use of an API Kit makes the use of flickr’s API methods easier. You can also view the demo page of the tutorial (opens in a new tab).

Let’s begin. First, we need to include the phpFlickr main file and then create a new phpFlickr object which is stored in the $phpFlickrObj variable. Make sure you enter the correct path (where you extracted the phpFlickr files) and also enter your flickr API key.

require_once("phpFlickr/phpFlickr.php");
$phpFlickrObj = new phpFlickr('Your_Flickr_API_Key');

The next step is to obtain your NSID by using your flickr username (in the example I’m using my flickr username), which is stored in the $user variable. Using this NSID, we get the url to the specific user’s photos and we store it in the $user_url variable. Finally, we get an array ($photos) containing all the relevant information (id, title, etc.) of the last four (if you want to change the number of photos, just change the number) photos appearing in the user’s photostream.

$user = $phpFlickrObj->people_findByUsername('stathisg');
$user_url = $phpFlickrObj->urls_getUserPhotos($user['id']);
$photos = $phpFlickrObj->people_getPublicPhotos($user['id'], NULL, NULL, 4);

In this example we use only the id and the title of each photo. If you want to view all the information contained in the array, you can use print_r($photos).

The final step to display the photos, is to convert the multidimensional array into an array of one dimension and use a loop to display everything. The following code, displays the photos. The photos can be displayed in six different sizes. To change the size, you need to alter the “square” value. The available sizes are: square, thumbnail, small, medium, large and original.

foreach ($photos['photos']['photo'] as $photo)
{
  echo '<a href="'.$user_url.$photo['id'].'" title="'.$photo['title'].' (on Flickr)" target="_blank">';
  echo '<img alt="'.$photo['title'].'" src="'.$phpFlickrObj->buildPhotoURL($photo, "square").'" />';
  echo '</a>';
}

The complete code is diplayed below. You can also view the demo page of the tutorial (opens in a new tab).

require_once("phpFlickr/phpFlickr.php");
$phpFlickrObj = new phpFlickr('46dea5f6abb12aed7a823adb7ecf5816');

$user = $phpFlickrObj->people_findByUsername('stathisg');
$user_url = $phpFlickrObj->urls_getUserPhotos($user['id']);
$photos = $phpFlickrObj->people_getPublicPhotos($user['id'], NULL, NULL, 4);

foreach ($photos['photos']['photo'] as $photo)
{
  echo '<a href="'.$user_url.$photo['id'].'" title="'.$photo['title'].' (on Flickr)" target="_blank">';
  echo '<img alt="'.$photo['title'].'" src="'.$phpFlickrObj->buildPhotoURL($photo, "square").'" />';
  echo '</a>';
}

If you are using twitter’s API to display your tweets in your Website you have probably faced the problem that your mentions (e.g. @burnmind) and URLs are displayed as plain text and not as active links. You can fix this in a very easy way, using regular expressions in php.

Assuming that you have stored your tweet in the variable named $tweet, you’ll only need the following two lines of code to convert the mentions and URLs to links:

$tweet = preg_replace("/((http)+(s)?:\/\/[^<>\s]+)/i", "<a href=\"\\0\" target=\"_blank\">\\0</a>", $tweet );
$tweet = preg_replace("/[@]+([A-Za-z0-9-_]+)/", "<a href=\"http://twitter.com/\\1\" target=\"_blank\">\\0</a>", $tweet );

If you don’t know how to retrieve your tweet using the twitter’s API you can learn how by reading the following tutorials:

how to retrieve and display your latest tweet using PHP
how to store and retrieve your latest tweet from an XML file

Retrieving and displaying a tweet using the twitter API in real-time as discussed in “how to retrieve and display your latest tweet using PHP” can sometimes produce errors due to twitter’s inability to handle a lot of simultaneous request from multiple users. To deal with that, you can store the tweet in an XML file and retrieve it from there, so you don’t have to rely on twitter’s availability. This way is more efficient and will improve the loading time of the page.

First, you need to create a file named loadtweet.php which will load the latest tweet the usual way, will perform a check to find out if the result is an actual tweet and not an error message by computing the tweet’s length (it must have a maximum length of 140 characters) and will finally save the whole respond to an XML file called tweet.xml:

$twitter_url = 'http://twitter.com/statuses/user_timeline/yourTwitterUserName.xml?count=1';
$buffer = file_get_contents($twitter_url);

$xml = new SimpleXMLElement($buffer);
$status_item = $xml -> status;
$status =  $status_item -> text;
$length = strlen($status);

if ($length < 141)
{
$file = fopen("tweet.xml", "w");
fwrite($file, $buffer);
fclose($file);
}

Your Web Server can be scheduled to execute this file automatically, for example every one minute, using a Cron Job (reffer to your Web Server’s Control Panel or your Hosting Company to find out how to schedule a Cron Job).

To retrieve the tweet from the XML file and display it wherever you want in your page, use the following code:

$xml = simplexml_load_file("tweet.xml");
$status_item = $xml -> status;
$status =  $status_item -> text;
echo $status;

Retrieving your latest tweet from twitter is a very simple process. First, you need to request your latest tweet from twitter using its API and then parse the xml response and select your tweet. It’s much simpler than it sounds!

It’s a useful bit of code to use on your site, and allows people to see whether you’re working, playing online bingo or out on the town without going through the motions of manually accessing your twitter page whilst browsing your site content.

You can request your latest tweet from twitter just by using a simple URL: http://twitter.com/statuses/user_timeline/YourUserName.xml?count=1. By replacing YourUserName with your twitter username, you’ll get an xml file containing your latest tweet (you can request more tweets by changing the “count=1” with the appropriate number of tweets) along with some information about your profile.

Using the following PHP code, you’ll get the content of the xml response to the $buffer variable:

$twitter_url = 'http://twitter.com/statuses/user_timeline/burnmind.xml?count=1';
$buffer = file_get_contents($twitter_url);

Now that you have the xml content, you just need to parse it so you can retrieve your tweet. Using SimpleXML, which is a PHP extension that allows users to easily manipulate/use XML data, the content is converted to a set of nodes. The $status variable holds the “status” node and then the $tweet variable gets the child-node named text, which is your tweet. Finally, the tweet is displayed using the echo command.

$xml = new SimpleXMLElement($buffer);
$status = $xml -> status;
$tweet =  $status -> text;
echo $tweet;

Simple, right?

You can also use an alternative way: how to store and retrieve your latest tweet from an XML file

First have a look at the demo page (opens in a new tab) to understand what we’re trying to accomplish. You can also download the tutorial’s source code.

For the blinking cursor effect, we’re going to simulate a DOS prompt. The CSS code of the tutorial is very simple. We just have to align all the paragraphs that will include the text parts in one line:

p
{
float: left;
}

The HTML code includes one paragraph that contains the characters “C:\” (the DOS prompt) and another paragraph named cursor that contains the “|” character, our cursor:

<p>C:\</p><p class="cursor">|</p>

To make the cursor blink, we will create a Javascript function named cursorAnimation(). Using jQuery’s animate() function we first make the cursor disappear setting its opacity setting to 0% and then appear again setting its opacity setting to 100%:

function cursorAnimation()
{
  $("p.cursor").animate(
  {
    opacity: 0
  }, "fast", "swing").animate(
  {
    opacity: 1
  }, "fast", "swing");
}

We want this function to run continuously from the loading of the page, so we’re going to use the jQuery’s $(document).ready() function along with the setInterval() method that calls a function at specified intervals (in milliseconds):

$(document).ready(function()
{
  setInterval ( "cursorAnimation()", 600 );
});

Now that we have the blinking cursor we’re going to create the typing effect (based on this tutorial). First, we have to alter our HTML code. We will include a paragraph called caption, a textbox so we can write our preferred caption in there and a button to test the typing effect:

<input type="text" id="userCaption" value="Type something here!" />
<input type="submit" name="submit" value="Test Typing Effect" onclick="testTypingEffect()"/>
<p>C:\</p><p class="caption"></p><p class="cursor">|</p>

First, we define the variables captionLength and caption. When pressed, the button calls the testTypingEffect() function, that sets the textbox’s value to the caption variable and then calls the type() function. The type() function uses the substr() method to cut our preferred caption one letter forward each time it’s called and type it inside the paragraph named caption. Until all the letters of the caption are typed, the type() function calls itself with a delay of 50 milliseconds using the setTimeout() method.

var captionLength = 0;
var caption = "";

function testTypingEffect()
{
  caption = $("input#userCaption").val();
  type();
}

function type()
{
  $('p.caption').html(caption.substr(0, captionLength++));
  if(captionLength < caption.length+1)
  {
    setTimeout("type()", 50);
  }
  else
  {
    captionLength = 0;
    caption = "";
  }
}

For the eraser effect, we will alter again the html code adding another button which when pressed will call the testErasingEffect() function:

<input type="submit" name="submit" value="Test Erasing Effect" onclick="testErasingEffect()"/>

To create the eraser effect, we’ll create the reversed process. The testErasingEffect() function sets the caption paragraph’s content to the caption variable and then computes its length. If there isn’t any content, it types automatically sample content (just for testing reasons) and calls itself. Now that it has a content, it calls the erase() function which cuts letter-by-letter the caption until it’s all gone with a delay of 50 milliseconds.

function testErasingEffect()
{
  caption = $("p.caption").html();
  captionLength = caption.length;
  if (captionLength>0)
  {
    erase();
  }
  else
  {
    $('p.caption').html("You didn't write anything to erase, but ok!");
    setTimeout("testErasingEffect()", 1000);
  }
}

function erase()
{
  $('p.caption').html(caption.substr(0, captionLength--));
  if(captionLength >= 0)
  {
    setTimeout("erase()", 50);
  }
  else
  {
    captionLength = 0;
    caption = "";
  }
}

If you haven’t done it already, have a look at the demo page (opens in a new tab) to test the effects. You can also download the tutorial’s source code.

We’re going to create our favicon example, using Photoshop CS3. The favicon needs to be in .ico format and since Photoshop doesn’t have a build-in way of saving an image in .ico format, you have to download this freeware plugin from Telegraphics (supports all versions of Photoshop). After downloading the plugin, you need to place the .8bi file in Photoshop’s plugins folder and restart Photoshop (if already open).

In Photoshop, create a new 16×16 RGB 8-bit image. There is the option to resize an existing image or to create a new one pixel by pixel. As an example, i created pixel by pixel an “E” character using the pencil tool.

When you’re done, save the file as favicon.ico and upload it to your root WordPress folder. If you are not using WordPress, upload it wherever you want.

To use it, insert the following code in the head tag of every page that you want to display the favicon. If you are not using WordPress, make sure that the path to the image corresponds to the uploaded directory.

The most common way is

<head>
[...]
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
[...]
</head>

while the W3C way is

<head>
[...]
<link rel="icon"
type="image/png"
href="favicon.ico" />
[...]
<head>

As far as i know, both ways work correct in every browser that displays favicons. Here’s an example of how the example favicon looks on a firefox tab:

Enjoy!