Taking tutorial submissions! Please email them to dave[AT]icemelon[DOT]com for review. Thanks!

Latest Tutorials
IceMelon IM: Add IM Functionality to phpBB [Misc] Want to add site-wide member IM to your phpBB community? Sure you do. Simple step-by-step instructions inside.

IceMelon IM: Add IM Functionality to vBulletin [Misc] Want to add site-wide member IM to your vBulletin community? Simple step-by-step instructions inside.

Crawl Your Site for PageRanks [PHP] So you know your site has a PageRank of 8. What about the PRs of all the inner pages? This tutorial will teach how you to automate the process of grabbing all these PRs.

Create CAPTCHA images [PHP] Worried about bots? Then create CAPTCHA images to prevent bots from taking advantage of your site.

Convert SHN and FLAC files to MP3 [Misc] Low on disk space and have an insensitive ear? Here are some steps to converting SHN and FLAC files to MP3 format.

[View All]

Become a sponsor for $15/month. Link is sitewide - PR5 homepage, 20+ PR4 pages, 90+ PR3 pages. Email dave[AT]icemelon[D0T]c0m.

Awesome Tutorials

Slide Show Script
By dave

This tutorial will teach you how to write a very simple, easy-to-implement slide show system. The user will advance the slideshow by clicking the current image. I find this to be more effective than having the image change based on a set time interval. Well, anyway, below is a demo. The full set of images can be found here [http://www.hibot.com/images.php?x=asiankid].

And, here's the code:

var i = 0;
gallery = Array();
gallery[0] = "http://www.hibot.com/images/interesting/asiankid/mrbean.jpg";
gallery[1] = "http://www.hibot.com/images/interesting/asiankid/shrek.jpg";
gallery[2] = "http://www.hibot.com/images/interesting/asiankid/titanic.jpg";
function nextImg() {
    i = (i < (gallery.length-1)) ? i+1 : 0;
    document.galleryImage.src = gallery[i];
<a href=javascript: onClick="nextImg()"><img src=http://www.hibot.com/images/interesting/asiankid/mrbean.jpg name=galleryImage style='border:1px gray solid'></a>

We start off by initializing a counter variable 'i' to 0 and creating a blank array called 'gallery.' Then, we populate 'gallery,' where each element is an URL to an image. In the code above, we rotate between 3 images. To add more images just add more elements to the 'gallery' array.

The function that does all the work is 'nextImg,' which is only 2 lines:
» Line 1 increments 'i.' If 'i' gets too large, we set it to 0. If you're unfamiliar with that tertiary operator ('?'), here's how it works:

// general format
variable = (statement) ? value1 : value2;
// equivalent to..
    variable = value1;
    variable = value2;

» Line 2 changes the image. It does this by setting the image source of an image named 'galleryImage' to 'gallery[i].' If you look a little further down, at the HTML, you will notice that the name of our image is set to 'galleryImage.' What a coincidence!

The HTML is pretty straightforward. Each time the image link is clicked, the 'nextImg' function (explained above), is called. You can easily add links for 'next image' and 'previous image.' To display the previous image, just create another function like this:

function prevImg() {
    i = (i > 0) ? i-1 : gallery.length;
    document.galleryImage.src = gallery[i];
Remember that arrayName.length will return the length of arrayName.

Alright, it's a wrap.

P.S. Check out my new site TheManWhoSoldtheWeb.com, where I publish guides and scripts on Internet Marketing and SEO. Here is a limited time freebie: the Rapid Google Indexer.

» Bookmark this Tutorial
» Bookmark IceMelon
Icemelon -- Slide Show Script -- PHP, CSS, Javascript Tutorials, & More!
  © 2005-2010 Icemelon.com   Email: dave[AT]icemelon[D0T]c0m