For a long time I wanted to have the possibility to make a simple photo gallery. The idea was to have a simple script which takes pictures in a folder and makes a gallery out of it. This could probably have been accomplished with some sort of javascript library, but as I can only do perl, this is what I used. It took me some time to get into it again, I haven't been doing any coding for some years, but in the end I managed. The hardest part was to get the css right to have the arrows in the middle of the page. Behold,
my pictures from my trip to Canada.
And here is the script:
#!/usr/bin/perl -U
use CGI::Carp qw/fatalsToBrowser/;
use CGI':all';
my $dir="/srv/http/hiawatha/images/photos/Canada";
my $webdir="/images/photos/Canada/";
my $config_FilesExtension="jpg";
my @tempentries=();
my @entries=();
my $page = escapeHTML(param('page'));
if($page eq ''){ $page = 0;}
my $back=$page-1;
my $forward=$page+1;
opendir(DH, $dir);
foreach(readdir DH)
{
unless($_ eq '.' or $_ eq '..' or (!($_ =~ /$config_FilesExtension$/)))
{
push(@tempentries, $_);
}
}
@entries=sort(@tempentries);
my $newStyle=<<END;
<!--
body {
background: #000;
}
.arrow {
border: solid white;
border-width: 0 5px 5px 0;
display: inline-block;
padding: 30px;
}
.left {
position: absolute;
left: 30px;
width: 50px;
margin-top: 20%;
}
.right {
position: absolute;
right: 30px;
width: 50px;
margin-top: 20%;
}
img {
height: 100vh;
display: block;
margin-left: auto;
margin-right: auto;
}
.forward {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.back {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
-->
END
print header();
print start_html( -title=>'Gallery',-style=>{-code=>$newStyle});
unless($back == -1)
{
print '<div class="left"><a class="arrow back" href="?page='.$back.'"></a></div>';
}
unless($forward == scalar(@entries))
{
print '<div class="right"><a class="arrow forward" href="?page='.$forward.'"></a></div>';
}
print '<div><img src="'.$webdir.@entries[$page].'"/></div>';
