Articles

Powerful PERL: A Simple Online Slideshow

By Stephen Akiki

Here is the situation: You have a bunch of images in a directory. You want to show all their thumbnails in a useful and compact way. You also want to be able to click on a thumbnail and still be able to navigate by use of "Next" and "Back" buttons. Sound hard? Not for PERL.

Let's check out a script called the "Simple Online Slideshow." The script has comments in it that will guide you through the logic. View a Live Example

#!/usr/bin/perl

# Slideshow.pl - Displays a thumbnail view of all, or individual photos at "full" size depending
#   on the argument passed.  With no argument, script defaults to thumbnail view

use CGI;

$cgi = new CGI();


$mode = $cgi->param('mode');
$url = $cgi->param('url');
$number = $cgi->param('num');

print "Content-Type: text/htmlnn";

@PictureURL = (); 

#  Linux sometimes capitalizes the filetype so watch out for that
@pngArray = glob('*.png');
@PNGArray = glob('*.PNG');
push(@PictureURL, @pngArray);
push(@PictureURL, @PNGArray);

@jpgArray = glob('*.jpg');
@JPGArray = glob('*.JPG');
push(@PictureURL, @jpgArray);
push(@PictureURL, @JPGArray);

@gifArray = glob('*.gif');
@GIFArray = glob('*.GIF');
push(@PictureURL, @gifArray);
push(@PictureURL, @GIFArray);



# This is the 'display all' mode'
if ($mode eq "") {

# Print some HTML for nice formatting
print '

<html>
<body>


<table width="75%" align=center>
<tr>
<td>
';

# What this loop does is print out links/images with the appropriate GET parameters set
#   Notice, the link sets the mode to "ind"
my $i = 0;
foreach my $temp (@PictureURL) {
    
print '<a style="text-decoration:none" href="slideshow.pl?mode=ind&url=' . $temp;
print '&num=' . $i . '"><img border="0" width="10%" src="' . $temp . '"> </a>'. "n";
$i++;
}
print '
</td>
</tr>
</table>

<div align=center>

<h6> Stephen Akiki - http://akiscode.com </h6>
</div>
</body>
</html>
';
}


# Set mode to 'Individual'
elsif ($mode eq "ind") {

my $nextURL;
my $prevURL;

print '

<html>
<body>

<div align=center>
<h2> Picture: ' . $url . '</h2>
</div>

<table width="75%" align=center>
<tr>
<td align= center>
';



# Cycle through the Picture URL Array and find the number specified in the URL
# Then find the next and prev values
my $i = 0;
foreach my $temp (@PictureURL) {
    if($i == $number) {
    $nextURL = $PictureURL[$i+1];
    $prevURL = $PictureURL[$i-1];
    last;   
    }
$i++
}
print' <img border="0" src="' . $url . '">'. "n";

print '<div align=center>';

if($number == 0) { # To avoid subtracting and going into negative numbers we stop the user here
print '<br> Previous';
}

else {
print '<br> <a href="slideshow.pl?mode=ind&url=' . $prevURL . '&num=' . ($number-1) . '">Previous</a>';
}

print '&nbsp;&nbsp;&nbsp;&nbsp;'; # Spacing

print '<a href="slideshow.pl">Thumbnail</a>';


print '&nbsp;&nbsp;&nbsp;&nbsp;'; # Spacing Again

# To avoid adding and going to an out of bounds index of the array, we stop the user here
if($number == $#PictureURL) { 
print 'Next';
}

else {
print '<a href="slideshow.pl?mode=ind&url=' . $nextURL . '&num=' . ($number+1) . '">Next</a>'; 
}

print '
</div>
</td>
</tr>
</table>

<div align=center>
<h6> Stephen Akiki - http://akiscode.com </h6>
</div>
</body>
</html>
';

}

else { # Someone tried to screw with the program
print "Invalid Inputn";
}