Lately I’ve been working a lot with modern JS frameworks like JQuery, MooTools, and Prototype. Coming from a procedural programming background the emphasis on anonymous functions, chaining, and some other things took some getting used-to. Although these frameworks are powerful and convenient, it can be nice to work with just pure Javascript sometimes for the sake of speed and to minimize dependencies on libraries outside of the browser.
Since being a kid, I occasionally have been prone to taking dozens of photographs as I travel or even during day-to-day strolls about the neighborhood. Around 2004 I looked into a few solutions for hosting and displaying my photos over the web. Overall I was disappointed with how heavy-weight and non-portable many of these solutions seemed to be. For example, there was no way most of these would render on my flip-phone and still look halfway decent on a full browser. So, I decided to scrounge around the web for Javascript code to do the job, and after adding a preloader, and more event handling came up with a super-simple, light-weight back-end/front-end solution in PHP & JS.
var num_of_slides = 35; var slide_num = 0; // start at the beginning var desc = new Array(num_of_slides); // optional per image var pics = new Array(num_of_slides); // file paths var imgs = new Array(num_of_slides); // the actual image data var auto = 0; // auto-advance? this could be boolean var interval; // ms between slide in auto-mode var tID = null; // timeout between slides in auto-mode var load_cnt = 0; // number of images that have been pre-loaded var lID = null; // timeout for preloading all images // most of the following are self-explanatory function setInterval(i) { interval = i; } function closeWindow() { window.close(); } // following functions ignore requests if in auto-mode function firstSlide() { if (!auto) { slide_num = 0; changeSlide(); } } function prevSlide() { if (!auto) { slide_num = slide_num - 1; if (slide_num < 0) { slide_num = 0; } changeSlide(); } } // only function that needs to differentiate between user/auto request function nextSlide(called_by) { if (slide_num == num_of_slides - 1) { // if on last slide turn off auto auto = 0; document.getElementById('autoOn').checked = false; } else { if ((auto) && (called_by == "usr")) { return; } slide_num = slide_num + 1; changeSlide(); if (auto) { tID = setTimeout('nextSlide(auto)', interval); } } } function lastSlide() { if (!auto) { slide_num = num_of_slides - 1; changeSlide(); } } function changeSlide() { // following may not need to be evals eval('document.picbox.src = pics[slide_num]'); eval('document.descform.descbox.value = desc[slide_num]'); } function toggleAuto() { if (document.getElementById('autoOn').checked == true) { auto = 1; tID = setTimeout('nextSlide(auto)', interval); } else { clearTimeout(tID); auto = 0; } } // called when either all images are preloaded, or the preload timeout has fired function slidesReady() { clearTimeout(lID); lID = null; // swap "still-loading" content for slideshow content document.getElementById('content').style.display = 'block'; document.getElementById('loading').style.display = 'none'; } function isLoaded() { // keep track of how many images preloaded and stop when done if (++load_cnt >= (num_of_slides-1)) { slidesReady(); } } function preload() { // set a timeout for preloading. Currently set to 300 ms per image, // could be more dynamic given info about image size and connection speed lID = setTimeout('slidesReady()', 300*num_of_slides); for (i = 0; i < num_of_slides && lID != null; i++) { imgs[i] = new Image(); imgs[i].src = pics[i]; imgs[i].onLoad = isLoaded(); // example of functional-style/callback } } window.focus(); // following block parses the URL query string // equivalent of $_GET['start'] only on the client side // no error-checking is done here. var loc_str = window.location + ""; URL_array = loc_str.split(/\?/); var query_str = URL_array[URL_array.length - 1]; params = query_str.split(/&/); for (i = 0; i < params.length; i++) { if (params[i].match(/start=/)) { slide_num = parseInt(params[i].replace(/start=/, "")); } } // --------------------------------- desc[0] = "An invisible 747"; pics[0] = "/photos/101.jpg"; desc[1] = "A Green Giraffe on Rollerblades"; pics[1] = "/photos/a_photo.jpg"; // ... // slide data is statically defined here. of course it could come from anywhere, such as an AJAX request or crunching a hidden content on the page
Looks kinda-like Java but with more built-in front-end web functionality. This is how it renders on my 2008 Blackberry with its tiny, sharp display:
This is the gallery that points to the slides: