Clickable JavaScript-less thumbnails

A project required some clickable JPGs, and I somehow became determined to attempt it without the boggy overhead of JavaScript. The plan was to generate thumbnails with a Bash script and then manipulate the rest with Cascading Style Sheets (CSS).

---

Note: At the bottom of the entry here, however, I found a lightweight and probably foolproof java script. Additionally, in the search for the CSS solution, I ran across a notable introductory CSS tutorial here, and one that explains how to create rounded corners here.

thumbnail generation

In lieu of a Bash script, I downloaded a small thumbnail generator application, jpgtn. It compiled but threw errors on first use:

$ jpgtn -H -s 128 -d "./thumbs/" -p "tn_" *.jpg

Using strace an unstated dependency on ld.so seemed to be the problem:

access("/etc/ld.so.preload", R_OK) = -1 ENOENT (No such file or directory)

Although ld.so was indeed lacking, the module had long been deprecated. The problem was operator error: I specified "jpg" in the command, and that limited jpgtn to processing only files with a lowercase ".jpg" extension. Other extensions -- JPEG, jpeg, JPG, or even, TXT -- caused jpgtn to exit with an error. The program also exits with an error if a "thumbs" sub-folder has not previously been created. So, verified or renamed all the JPG's with a lowercase "jpg" extension, and created a "thumbs" subfolder, jpgtn processed the photos into "thumbs" very rapidly.

mouseover text

For ease, mousing over the thumbnail should provide a text description of it,, but I wanted to do this without the pain of java, and within CSS. Several solutions appeared. The first good description of how to understand CSS mouseover options was here, but it appeared to deal mostly with links. A more complete description using span was found here, but this involved editing the style sheet in some way I didn't understand. The site ultimately with a page by page solution was this one. The author apparently wished to insert some effects on his MySpace page. MySpace apparently allows CSS but not java.

Using the code from the site, I put a thumbnail on the page with the mouseover text "Statics Class 2005", in the following way:

<div class="popuptext0">
<center>
<a class= "hoverTest" href="stats.jpg">
<img src="tn_stats.jpg"> <br>
<span class="popUpSpan">Statics Class, 2005 </span>
</a>
</center>
</div>
<style>
div.popuptext0 {width:150px; height:auto}
a:hover img {filter:none;}
a img {border:0px !important;}
a.hoverTest {width:150px; height:auto; }
a span.popUpSpan {visibility:hidden;}
a:hover span.popUpSpan {visibility:visible; display:block; border:1px silver solid}
a span.popUpSpan {color:black; font-size:13px}
a:link, a:hover {text-decoration:none !important;}
</style>

This worked fine - it named the photo and recalled the larger photo when clicked. But what about having multiple thumbnails across a page, in gallery format, with text available, how to arrange this?

lightweight JavaScript solution

Eventually, I found a partial JavaScript solution which was lightweight, meaning it didn't require pages of code. Additionally, it automatically generated the thumbnails for me. I found a micro script at dynamicdrive which did the trick and didn't require many resources. Problem solved, pretty easily.