Kimler Sidebar Menu
Search Journal
Local Weather
Site Tools
Randsco I.M. Contact (AIM)
Randsco Visitors: Count, Country, Time & What
There are 14 visitors.Click to see their country & what they're reading.
Randsco Readers - World Distribution Map
Subscribe: RSS, Atom & RDF XML Feed (via Feedburner)
Top 40 Search Terms
Sign our Guestbook
Read the Guestbook
Join Our Fight Against Email SPAM
Kimler News
Multiple, Historical Stock Quote Service
Randsco Site Map
Site MapAgain, this is something that I've been wanting to do for some time and I believe that a site map is necessary to help those people out that have a hard time figuring out what is what on our site. I'd like to think that our menu system is easy and will work, but some people just require a site map to figure it out. So ... here you go ... a site map. :)
About the Kimlers
about usThis is where visitors can find out about Randsco and the Kimler family. Who are we? How did we come to be? What motivates us on our adventures. It's kinda like the old "meet scott and rachel" section on our PCT WebPage, but this "about us" section will be a stand-alone page.
Random Photo (linked to blog entry)
Kimler Login Page
Recently Updated Entries
Journal Archives
Journal Categories
Thank You
There aren't many folks running a b2evolution blog that don't owe this Brit some sort of "thanks" for helping them with their blog. This amazingly generous bloke is a first-class coder & is also very giving with his time. It's appropriate to kick off the *NEW* "Shout Out" section, with a post about ¥åßßå - and his "Tacky Pad" website ... (Note: Post not done yet, which is, ironically ... the story of my life!)
Okay ... wow ... how do I start? It's appropriate that my first "shout out" should go to my fellow b2evo buddy, friend and "business partner" ¥åßßå, but it's not all that easy, introducing someone you've never actually met (especially if you don't want it to sound like a eulogy). 
On the plus side, ¥åßßå is super helpful and an amazing coder (if you can keep the bottles of beer tucked out of sight). He's also pretty wicked at growing Dahlias (championship-like wicked), but that's another story. At other times, he's just plain wicked. 
Chances are, however, if you have a b2evolution blog and ever gone onto the b2evo forums, he's either helped you directly or "opened the door" so you can help yourself.
I guess it's high time to tip a hat to this bloke and his coding-spiffy, but styling-wasteland of a "tacky pad" website - Innervisions.org.uk (that's ORG dot UK, not UK dot ORG, so try to get it right). So here goes ... my tribute to ¥åßßå ... a sort of "stream-of-conscience" thing that may (or may not) change over time. You know ... how we met, what a wanker *cough* - great guy he is and a bit about how he's single-handedly battling SPAM and fighting to make b2evolution better than ever.
If you're lucky, I might even reveal his *gasp* real name, as well as other semi-embarrasing things ... all of which, I'm sure, he'll get me back at me for, in due time.
Yeah, yeah, you know the drill ... click "Read Full Story" to get the skinny on this skinny Brit (I'm gonna be totally hosed if I ever change "Read Full Story" to something else, but then again ... I like to hard-code stuff!)
Kimler Adventure Pages: Journal Entries
Photo-Caption Zoom v3
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.
Morning Light: The lowest lake in Pioneer Basin (John Muir Wilderness, CA) only a few miles from the PCT. EZ PZ3 - Better, easier, lighter.
Latest Version: v080630 Changes: see red text w/yellow background, where applicable.
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.
Afternoon Light: The same Pioneer Basin view, looking toward 3rd & 4th Recess, later in the day. 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 ¥åßßå!
Feature List
(Items in RED are enhancements over PZ2)
• Valid XHTML code
• Pure-CSS (no javascript)
• 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 (v6.sp2, v7), Firefox (v1.5, v2.0), Netscape (v8), & Opera (v8.x, v9.02§, v9.10, v9.24); Mac Browsers tested - Firefox, Opera and Safari (v2.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 ...
Get the Code
It's recommended that you begin by reading this post, because it contains all of the Photo-caption Zoom links, code, alternatives, examples, techniques, history and the original wish-list of features.
If you want to cut to the chase and get the latest PZ3, then you can cut'n-paste the XHTML/CSS from this page (Updated 30-Jun-2008).
Installation
I still haven't made time to put together a "How To" article, but it'll show up here, when it is complete.
In the meantime, the installation and usage is similar to PZ2 and you can probably use the PZ2 How2 article as a guide.
Some Fancy Examples
One of the nice things about Photo-caption Zoom, is that it can be used as the underlying engine for many different types of image zoom applications. While it was originally designed for deploying images (and captions) inside of inline text, on a valid-XHTML page, it has successfully been used on some of the following pages:
(1) PZ3 "Image-Maps": On one hand, why not have your image map reveal further information? PZ3 to the rescue. On the other hand, traditional image maps are invalid in XHTML v1.1 ... not when you use PZ3!
(2) PZ3 Photo Gallery: Many people love PZ3, but try to use it (out of the box) as a photo gallery. It wasn't designed for that and falls short. Have a look my first pass at a PZ3 Photo Gallery (improvements coming soon) helps to rectify that.
Keep in mind that ALL of these examples co-exist with each other - PZ3 image maps, PZ3 photo gallery, PZ3 images, earlier versions (PZ2 and PZ1) - without conflict! There's more to PZ3 than meets the eye. ;)
Copyright
Our copyright policy is very straight-forward. Photo-caption Zoom code is FREE for personal use. If you plan on using it for commercial purposes (i.e., on a site that is intended to make money), then we ask for a donation or that you hire us to install it for you. Our goal isn't to get rich, but we believe it's appropriate to acknowledge the time & value that it takes to develop such a useful feature. We think this is a generous copyright policy and we appreciate your honoring it.
If you have any questions or wish to deploy any of our code on a commercial site, please contact us. Here's the link to the Randsco Copyright Policy.
If you've deployed EZPZ on your personal or commercial website, we'd certainly appreciate a backlink. Here are some buttons we've made, that you could use (click to download):
Usage and Considerations
Here's the very short version:
• The "PZ3-l" classname floats an image LEFT. "PZ3-r" (RIGHT).
• Use Bdr|noBdr to toggle caption/image borders on|off.
• Use Cap|noCap to toggle captions on|off.
• Use noLnk|Lnk to change hover cursor for linked|unLinked images.
• The height/width of the DIV determines the thumbnail size. (You will need to be careful about keeping the correct aspect ratio).
• The "noJS.html" is an HTML page to which visitors are directed, in the event visitors have javaScript turned off. (The link can go elsewhere, but this is the recommended method of "killing the link")
• The width of caption is the width of the zoomed image and is set in the XHTML "PZ31cap" SPAN.
• Tables: PZ3 breaks inside an IE <table>. This should only affect a semantically-correct, tabular data display (i.e. - You shouldn't be using tables for layout).
That's it (in a nutshell). You might want to print this off, but using PZ3 isn't rocket science. It's really the easiest Photo-caption Zoom to use. :)