Intro
I know, I know, there are thousands of ways to display your pictures on the web. I did a 60 second search and settled on one approach that looked interesting to me. Then I quickly ran into some limits and made some improvements. That’s why there are now thousands plus one more as of today! The app I improved upon is good for previewing pictures in a directory where there are lots of nice pictures. It makes the downloading more pleasant and shows large-ish thumbnail images that can be enjoyed in their own right while you wait for more images to download.
Thankyou Alexandru Pitea
So I just downloaded the stuff from his fine tutorial, How to Create an Infinite Scrolling Web Gallery. I unpacked his the downloaded zip file: worked first time. That’s a good sign, right? That doesn’t always happen. Then I started to make changes and ruined it.
As previously documented I use Goodsync to sync all my home pictures to my server. So all pictures are present in various folders. But they’re big. I needed thumbnails for this gallery app. I wrote a very crude thumbnail generator. I basically have to edit it each time I work on a different directory. One day I’ll fix it up. I call it createthumbs.php:
<?php function createThumbs( $pathToImages, $pathToThumbs, $thumbWidth ) { // open the directory $dir = opendir( $pathToImages ); // loop through it, looking for any/all JPG files: while (false !== ($fname = readdir( $dir ))) { // parse path for the extension $info = pathinfo($pathToImages . $fname); // continue only if this is a JPEG image if ( strtolower($info['extension']) == 'jpg' ) { echo "Creating thumbnail for {$fname} <br />"; // load image and get image size $img = imagecreatefromjpeg( "{$pathToImages}{$fname}" ); $width = imagesx( $img ); $height = imagesy( $img ); // calculate thumbnail size $new_width = $thumbWidth; $new_height = floor( $height * ( $thumbWidth / $width ) ); // create a new temporary image $tmp_img = imagecreatetruecolor( $new_width, $new_height ); // copy and resize old image into new image imagecopyresized( $tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height ); // save thumbnail into a file imagejpeg( $tmp_img, "{$pathToThumbs}{$fname}" ); } } // close the directory closedir( $dir ); } // call createThumb function and pass to it as parameters the path // to the directory that contains images, the path to the directory // in which thumbnails will be placed and the thumbnail's width. // We are assuming that the path will be a relative path working // both in the filesystem, and through the web for links createThumbs("img/2012_05/","thumb/",200); ?> |
Notice these are pretty big thumbnails – 200 pixels. That’s how the gallery program works best, and I think it is a good size for how you will want to browse your pictures.
Then I moved the original img directory to img.orig and made a symbolic link to one of my pictures’s folders (which I had run through the thumbnail generator).
img -> /homepic/pictures_chronological/2012_05/
It worked. But there were a couple annoying things. First, the picture order seemed nearly random. Apparently the order reflected the timestamp of the file, but not a sort by name order. I found it was simple to sort them by name, which produced a nice sensible order, by adding:
... // sensible sort $sortbool = sort($files,SORT_STRING); ... |
to getImages.php.
The other annoying thing was the infinite scroll. Not sure what the attrtaction was to that. Many comments on his post asked how to turn it off. Turns out that was easy:
// prevent annoying infinite scroll
//$response = $response.$files[$i%count($files)].’;’;
$response = $response.$files[$i].’;’;
in the same file.
One astute user noticed the lack of input validation in the argument to GET, which should always be a non-negative integer. So I incorporated his suggestion for argument validation as well.
The full getImages.php file is here:
<?php // input argument validation - only numbers permitted function filter($data) { if(is_numeric($data)) { return $data; } else { header("Location: index.html"); } } $dir = "thumb"; if(is_dir($dir)){ if($dd = opendir($dir)){ while (($f = readdir($dd)) !== false) if($f != "." && $f != "..") $files[] = $f; closedir($dd); } // sensible sort $sortbool = sort($files,SORT_STRING); $n = filter($_GET["n"]); $response = ""; for($i = $n; $i<$n+12; $i++){ // prevent annoying infinite scroll //$response = $response.$files[$i%count($files)].';'; $res = $files[$i]; if (isset($res)) $response = $response.$res.';'; } echo $response; } ?> |
I’ve only done a couple tests a couple folders but in those tests they both showed all the pictures and then stopped scrolling, as you naturally would want. So that’s why what I have produced is a progressive scroll, not an infinite scroll the useful progressive scrolling part of the original code was preserved.
I think he even used bigger thumbnails than 200 pixels. For these smaller ones it makes more sense to grab pictures 12 at-a-time. So I made a few changes in index.html to take care of that.
Alexandru also had his first nine images hard-coded into his index.html. Again, I don’t see the point in that – makes it a lot harder to generalize. So I chucked that and appropriately modified some offsets, etc, without any terrible side-effects.
Putting it all together that code now looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0, minimum-scale=1.0" />
<title>Web Gallery | Progressive Sroll</title>
<link rel="stylesheet" href="style.css" />
</head>
<body onload="setInterval('scroll();', 250);">
<div id="header">Web Gallery | Progressive Scroll</div>
<div id="container">
</div>
</body>
</html>
<script>
//var contentHeight = 800;
var contentHeight = document.getElementById('container').offsetHeight;
var pageHeight = document.documentElement.clientHeight;
var scrollPosition;
var n = 0;
var xmlhttp;
function putImages(){
if (xmlhttp.readyState==4)
{
if(xmlhttp.responseText){
var resp = xmlhttp.responseText.replace("\r\n", "");
var files = resp.split(";");
var j = 0;
for(i=0; i<files.length; i++){
if(files[i] != ""){
document.getElementById("container").innerHTML += '<a href="img/'+files[i]+'"><img
src="thumb/'+files[i]+'" /></a>';
j++;
if(j == 3 || j == 6 || j == 9)
document.getElementById("container").innerHTML += '<br />';
else if(j == 12){
document.getElementById("container").innerHTML += '<p>'+(n-1)+" Images Di
splayed | <a href='#header'>top</a></p><br /><hr />";
j = 0;
}
}
}
if (i < 12) document.getElementById("container").innerHTML += '<p>'+(n-13+i)+" Images Displayed |
<a href='#header'>top</a></p><br />";
}
}
}
function scroll(){
if(navigator.appName == "Microsoft Internet Explorer")
scrollPosition = document.documentElement.scrollTop;
else
scrollPosition = window.pageYOffset;
if((contentHeight - pageHeight - scrollPosition) < 200){
if(window.XMLHttpRequest)
xmlhttp = new XMLHttpRequest();
else
if(window.ActiveXObject)
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
else
alert ("Bummer! Your browser does not support XMLHTTP!");
var url="getImages.php?n="+n;
xmlhttp.open("GET",url,true);
xmlhttp.send();
// 12 pictures at a time...
n += 12;
xmlhttp.onreadystatechange=putImages;
contentHeight = document.getElementById('container').offsetHeight;
//contentHeight += 800;
}
}
</script> |
Notice I also played around with the scrolling function because that gave me difficulty. I set the condition contentHeight – pageHeight – scrollPosition to be less than 700, a requirement that is easier to meet, since in my tests I was often getting no scrolling whatsoever.
That’s it!
So to use my improvements you could download the source files from Alexandru’s site, then overwrite getImages.php and index.html from a cut-and-paste from this page.
To do list…
Naturally the first person to try it tried from an Android Smartphone using the Opera browser and it only showed him the first 12 pictures and didn’t do any scrolling. I developed for IE/FF on PC. I’ve just now tried Opera on PC and that worked fine. I’ll have to understand what is happening on Smartphones. So…I learned there is webkit for Smartphone compatibility. I added a meta tag concerning viewport (which I’ve already included in the html source file above). Now the pictures are a little large on my Android browser, and the progressive scrolling takes a nudge to get going, but it basically does work, which is an improvement. But still not on Opera mini! And not that well on Blackberry…
I’d also like to add a folder-browser plug-in.
Conclusion
Pages load fast initially in a progressive scroll approach. So this could be a useful program as a way to display your pictures on your own web site. We fixed up some of the undesirable behaviour of Alexandru’s original version.
5 replies on “How to create a Progressive Scrolling Web Gallery”
[…] browse and , ultimately, take some action such as displaying all the folder’s images in the imageviewer I wrote earlier. <!DOCTYPE html> <html> <head> <script type="text/javascript"> // […]
Great tutorial! Thank you for improvements over Alexantru’s work 🙂
What if I would like to have progressive scroll but horizontally from right to the left? Where do I need to apply the changes?
This is awesome! Except when I view it on my iPhone the images are bigger than the screen. Normally big images just resize to fit on mobile screens. Do you know why this isn’t happening?
I don’t know. I don’t have access to an iPhone to test with, but even if I did I’m probably too much a newbie to figure it out without breaking all the other devices!
If I ever manage to get quality testing time with an iPhone I will try to look at this.
The problem is due to non responsive design.
Chk out http://twitter.github.com/bootstrap/scaffolding.html#responsive for responsive CSS design