(i.e. Lightboxes)
I’ve been really into web development lately, especially anything requiring a lot of JavaScript control of the DOM and CSS control over layout and style. I’ve spent a solid week (at least) working on adding lightboxes to replace some of my lighter scripts: image viewing and downloads. I’ve been pretty fascinated by lightboxes ever since I saw them on addons.mozilla.org. The idea to actually employ one on this site didn’t come to me until I was doing the remake of the content system and thought it would be awesome to combine a lightbox with the ability to preview the contents of archives (rar and zip files).
Although there are tens if not hundreds of lightbox implementations, I felt like creating my own to avoid all the code bloat and because I’m that much of a control freak. The first hurdle was figuring out how the hell these other lightboxes could be triggered on the click of a link without navigating to the link URL immediately after the script finishes. Googling didn’t turn up any leads, but I eventually found out the answer by just reading the code comments of another lightbox. It’s simple and makes sense but isn’t obvious: the onclick function must return false. It kinda works like a message chain in Windows.
From there, I just kept chugging out JavaScript. On DOM readiness, the script adds onclick events to trigger the lightbox to any existing links to image or download pages. On click, the script does the appropriate HTTP request (AJAX) for the content to fill the lightbox. On request received, it puts the HTML into a lightbox container that automatically enlarges to fit content. Meanwhile, the script is fading in the obligatory black overlay; I chose to fade it in not only because it looks awesome but it also helps your eyes to adjust to change in light. It’s all a delicate ballet of scripting, but surprisingly IE performs quite well with it and only minimal hassles (e.g. filter: alpha(opacity=#); instead of opacity: #.#; for overlay opacity in CSS).
It didn’t stop with lightboxes, though. I’ve also been wanting for a while to have a display of the most recent uploaded images on the front page but was underwhelmed by the prospect of cramming only a few images on there. Then I got to thinking about how I might make a scrolling marquee for the images and realized it wasn’t too hard to code. You simply need an inner container for the images with position: relative and an outer container with overflow-x: hidden and on button script events move the inner container’s style.left property by negative the amount to scroll. Then, obviously, you have to do some code to detect the beginning and end of the marquee to keep it within bounds among other things. Quite snazzy.
I also made another slight change to front page (beyond adding the latest blogs). I was a little displeased by my method of finding the most popular content given that it merely sorts the database by the total downloads. Thus, it’s not at all responsive to changing trends. For example, if file A gets 1000 downloads over five years but not much recently, and file B has only 300 downloads over a couple months but gets several hits a day, then file B is obviously more popular than file A. The best solution to calculate what’s more popular would be to log all the hits for a day for every file and calculate popularity trends often, but that’s a logistical nightmare and too much hassle for this small site. However, I came up with a simple solution that requires only one new field in the database (last_dl_count) and a monthly cron job to do UPDATE `content` SET `last_dl_count`=`dl_count`;. Finally, I switched the front page popular query to the following:
SELECT `id`, `title`, `sshots`, `dl_count`, (`dl_count`-`last_dl_count`) as `delta_count` FROM `content` WHERE `type` = '$type' ORDER BY `delta_count` DESC, `dl_count` DESC LIMIT 2;
It works fairly well, except at the beginning of the next period after the update cron runs. Since all the deltas are 0, you get only the all-time popular again until someone downloads something.
Well, I think that’s enough web developer theory for now. However, I’d like to point out three academic columns I recently added. There’s one from Fortran Programming class with all my source code and most of my documentation. The second is on the Parallel Programming with PVM project I did last year, including a Flash slideshow (first mentioned here), presentation notes, and source code. The last is a paper I wrote on the Aspects of Overpopulation, a subject that greatly concerns me; too bad the class it was for was completely worthless.
