Kimler Sidebar Menu
Kimler Adventure Pages: Journal Entries
Introducing Photo-caption Zoom (version 3)! If you liked earlier versions, you'll love PZ3. The IE z-index bug is squashed, no more image resizing, choose thumb sizes 'on-the-fly' & do it with 70% less code. The easiest PZ ever. This version does more, with much less.
EZ PZ3 - Better, easier, lighter.
Images in this article utilize the newest, third version of a pure-CSS image zooming technique I've named "Photo-caption Zoom" ( or PZ3 ). When you move your mouse over an image, it will 'zoom' to reveal a larger image with a caption. There are a variety of pure-CSS image zooming methods, but this was the first to combine an image with a caption. It saves page real estate, it looks nice and this third version is more robust and easier to use than ever.
Although the end results of PZ3 appear identical to the last version (PZ2), the underlying CSS methodology is completely different! PZ3 offers significant improvements over PZ2 and does it with nearly 70% less code. It does more, with a lot less!
PZ3 satisfies most everything on my original wish list for a photo-caption solution. This version is the culmination of over a year's-worth of trial & error, of CSS/XHTML learning & experimentation and of countless hours searching the Internet for existing solutions. The results of PZ3 speak for themselves.
- PZ HZtory -
Photo-caption Zoom is a pure-CSS, xhtml-valid technique that I developed over a year ago. It zooms a thumbnail image on mouseover, showing a larger picture with a caption. It uses a single, simple image for both the thumbnail and zoom. It's designed to be easily deployed.
- PZ1 - Jan 31, 2005: The original. It rearranges page flow, making room for the zoomed image and its caption. (i.e., one can still read the document when the image is zoomed).
- PZ2 - Jun 15, 2005: Version 2. The zoomed image overlays the document, which means that page elements no longer shift or migrate. (A IE z-index bug is documented and a work-a-round is achieved, which limits usage).
- PZ3 - Apr 11, 2006: This third version supercedes its predecessor - PZ2. The IE z-index bug that limits PZ2 has been fixed, it's 70% lighter (less code), and pixel-perfect thumb/zoom sizes are defined in the HTML. Basically, it rocks! It's so easy, I'm calling it EZ-PZ.
- PZ3 - 30-Jun-2008: Version numbers added (dated version numbers, starting with "v080630", have been added to the CSS file, so users can tell at a glance if they have the latest CSS/XHTML code)
CSS corrected to allow correct toggling of the caption (Cap|noCap option)
If you're new to the Photo-caption Zoom technique, I recommend you begin here, which has links to all the Photo-caption Zoom pages on this website and covers 9 different methods, in detail. (Even those that I investigated early on). Each has cut'n-paste CSS/XHTML code you can use on your own pages.
Collaborating to develop PZ3 proves that two heads are better than one. This code resulted from batting it back and forth, across the Atlantic Ocean, to my U.K. business partner and mate, ¥åßßå. I owe him a deep debt of gratitude for his efforts and the time he spent helping me. Thanks ¥åßßå!
(Items in RED are enhancements over PZ2)
• Valid XHTML code
• Cross-browser/Cross-platform compliant
• Single image for both thumb/zoom
• Nice-looking (customizable) caption
• Overlays document (no layout shifting)
• IE z-index bug: SQUASHED!
• No image resizing necessary!
• Thumb sizes defined on the fly!
• Toggle borders on|off
• Toggle link cursor on|off
• Toggle caption on|off
• Code reduced by nearly 70%
• Quirks-mode support
• 30-Jun-2008 - Version numbers added
• Easiest PZ ever - EZ-PZ!
The code is cross-browser/platform compatible: PC Browsers tested - MSIE (IE6, IE7 & IE8), Firefox (v1.5, v2.0 & v3.x), Netscape (v8 & v9), & Opera (v8.x, v9.02§, v9.x); winSafari; Google Chrome (v1 & v2); Flock (v1 & v2); Mac Browsers tested - Firefox, Opera and Safari (v2.x & v3.x).
To date, there have been no reported browser problems. Please comment on viewbility if you're using a different [O/S|browser] combination.
To get the code and learn more about PZ3, please continue ...
Consumer Thoughts After Buying a Casio EX-Z850 Digital Camera
The population of the United States is roughly ten times that of Canada. It's no surprise then, that the U.S. has a much more efficient consumer marketplace than Canada. I recently discovered just how much more efficient, after purchasing a Casio EX-Z850 digital camera.
Firstly, I should state that I have no great patriotic allegiance when it comes to making consumer purchases. "Made in the U.S.A.", Canada, China, Taiwan or Mexico, I don't really care. All things being equal, I will buy local, to support the local economy, but in truth, I'm after the best quality/price ratio I can find, with a leaning toward one end of the spectrum or the other, depending on the product. I mean no disrespect to either the U.S. or Canada, as I think both are great. Rather, my experience reflects a growing dissatisfaction over the disparity in pricing, availability, shipping costs, regulations and red tape associated with purchasing products to obtain the best deal.
The EX-Z850 is very new to the marketplace. It was debuted at the PMA Annual Convention & Trade Show in Orlando, Florida, on February 26th (press release). I was happy to get my hands on one at a price well below the MSRP of $399.99(USD), but the convolutions I had to go through, in order to accomplish this, underscores the marketplace differences between Canada and the U.S. This is something that NAFTA is supposed to help fix, but it doesn't really seem to be working too well.
Read on to learn about my purchase choices in Canada, versus the United States and the creative methods employed to obtain the better deal.
"Latest News" - Site Feature Added
Blogging isn't as easy as one might imagine. (Of course, nothing is easy when you're a perfectionist) - cough, cough - but even still, it does take TIME to cobble blog entries together. You need to find a topic worthy of an entry, then get images organized, edited, optimized and transferred. Correct spelling and XHTML coding count ... which takes additional time. Links need to be added and checked. The blog entry length must be "just so" (not too long to bore anyone, but long enough to wrap around how ever many photos there are). Having a 'liquid layout' also means making sure the entry doesn't 'break' in super wide screens (high resolution) and still works for 800x600 resolution. XHTML validation, special CSS coding ... all these things must be taken care of. Plus, I like to add special formatting that (I think) helps make each entry unique and (hopefully) visually appealing and interesting.
Whew! It's a lot of work!
So, I've created a "Randsco News" icon in the Site Tools section, in the sidebar. (It's the newspaper - 3rd row down in the Site Tools section, first icon on the left).
It links to a special blog entry, called "news", which contains the absolute LATEST news. Stuff that happened today and yesterday - though you can also paw backward in time too. Each entry is brief and presently, none contain photos (though I'm thinking of adding some, but just not sure if I want to). The goal is to keep is short and simple, but UP-TO-DATE. Rather than having to spend an hour or more typing up a complete blog entry, I can just add a paragraph to the existing "news" one and then blammo ... it's been added.
If you want the lasted scoop ... then this is the place to go. Not everything posted in "news" will make it into a blog entry, so it will also contain information above and beyond what's posted on the front page.
I've also coded it so that it's easy to see if we have any 'breaking news'. If, within the past 24-hours, anything has been added to the news page, the newspaper icon will be animated. If there hasn't been any news with the past 24 hours, the newspaper icon will be static. Here's an example:
We hope you find it useful.
Putting the "Good" into Good Boating
If there has been a lack of journaling on our randsco site, it's because I've been working with my UK mate on a number of projects, through our joint website AstonishMe!. You can read more about the various projects we've completed, on our portfolio page.
While we've been waiting for the beta version of b2evolution to be released (since November), we've been active on a number of fronts. We're investigating blogging SPAM (comment and trackback SPAM, primarily), are collecting data and making some serious inroads into methods to not only thwart it, but flip the tables, taking an offensive position, rather than a defensive one. (Of course, this is all super-secret work and I can't reveal anything, otherwise I'd have to shoot you and that's too offensive, even for us. )
Lately, our focus has been on helping Hilltop Marine and Walker Marine, come up with a completely new and highly integrated website. The concept is to blend two commercial boating businesses (one in Cincinatti, on the Ohio River and the other, in Kentucky, on Lake Cumberland), integrating several informational (magazine-style) blogs, into a single web presence. The "portal site", called 'Good Boating', will also include a free blogg sign-up (boaters can create and write their own boating stories), a forum, picture gallery and more. By fostering an active, online community of avid boaters, we hope to develop strong customer ties to the commercial operations and a 'must-see' regional boating reference site.
As you might imagine, the project is involved and multi-faceted. It involves much custom programming, web-design and creativity ... just the kind of task that AstonishMe! wants. The project is moving along and we recently completed a mock up of our vision for the "Good Boating" portal site. The client was thrilled with our work and we'll be stepping forward with the 2nd of five phases.
As you can see, entries may not be coming at a rapid clip here at randsco, but it's not because we've been sitting on our duff, watching icicles grow.
I went to find an enjoyable TV ad from the year 2000, but had a difficult time finding it on the web. The collective attention span for humans is short and most of the movie links were broken. So, in an effort to preserve a tiny piece of humorous history, I've posted it here, along with a rare "alternative ending". Enjoy.
"Oh Look, an Eagle!"
It was some time ago that I first saw this ad, via some email link a friend sent. I'm not sure what made me think about it the other day, but I went on a hunt for it. It's still out there, but many of the links have dried up and now there are sites that want you to pay money to see the thing. (Sorry, there isn't much added value to see something that used to be aired for free )
I'm not much of a museum curator and maybe it was more the challenge, than the preservation, but regardless ... I went on a hunt to find the original video, convert it to Flash and preserve it for your viewing pleasure (and the inadvertent, sustained promotion of John West Salmon). While hunting down the videos, I learned a lot! The spot won several awards, there was an alternate ending (shown in the full article) and to whom credit goes to for this humorous advertisement.
To learn more about the John West Bear Fight ad, read on ...