Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40

Photo-Caption Zoom v3

April 10th, 2006  · stk

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.

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.

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 (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 ...


§ Problems with Opera v9.02?

Read full story...

(Permalink)
Views: 248376 views
158 Comments · GuestBook
default pin-it button
Updated: 6-Sep-2011
Web View Count: 248376 viewsLast Web Update: 6-Sep-2011

Canada & USA Free Trade

April 7th, 2006  · stk

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.

Read full story...

(Permalink)
Views: 134605 views
29 Comments · GuestBook
default pin-it button
Updated: 3-Jun-2006
Web View Count: 134605 viewsLast Web Update: 3-Jun-2006

Let Fido Fetch Our News

April 6th, 2006  · stk

"Latest News" - Site Feature Added

news dog

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.

newsnew news
Old
New

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. ;)

(Permalink)
Views: 8535 views
Leave a Comment · GuestBook
default pin-it button
Updated: 7-Apr-2006
Web View Count: 8535 viewsLast Web Update: 7-Apr-2006

Where I've Been

April 4th, 2006  · stk

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. :| )

An associate of ours, Danny, has completed a page design for Software & Tools (an Austrailian, high-tech blogging site). He put a lot of effort into it and we think it turned out great.

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. ;)

(Permalink)
Views: 8793 views
2 Comments · GuestBook
default pin-it button
Updated: 5-Apr-2006
Web View Count: 8793 viewsLast Web Update: 5-Apr-2006
Filed in:Humor
Informative

Far Side of North

April 2nd, 2006  · stk

Edmonton Grafitti

Usually, it's the female complaining, "I have a headache", but this street artist puts a different spin on things here. Maybe someone sprayed the penguins and someone ELSE added the commentary? We'll never know. Either way, this witty bit of street art caught our attention during an afternoon stroll, along the North Saskatchewan River Parkway, on this warm (50°F/10°C) and blustery, early spring day.

The penguin might be an appropriate symbol of cold Edmonton winters, but the geographic mark is several thousand kilometers in error, as penguins are indigenous to the southern pole, not the northern one.

The remark by the male (clearly the brighter of the two, as males are often more highly decorated than females) has a double meaning, which is hopefully lost on younger readers. Was "fish" added as an afterthought, or was the artist simply a poor planner?

How do YOU feel about grafitti? It seems to be everywhere. Is it modern art? Expressionism? Vandalism?

I've often thought that railroad companies were missing a golden opportunity. Let others pay for the paint and labor, so they can make a 'statement' on railroad cars, thereby protecting metal from rusting. Railroad companies could surreptitiously erect "scaffolding" , so taggers can put grafitti on the tops of railroad cars too.

As further proof that the Internet contains information on EVERY subject, I searched for "Edmonton Grafitti" and turned up this site, which features artistic grafitti from several different Canadian locations. Nicely done, too. (I especially liked the bit about Mosquito Creek, in N. Vancouver, which is a stones throw from our old stomping grounds on E. Hastings). ;)

(Permalink)
Views: 36849 views
2 Comments · GuestBook
default pin-it button
Updated: 4-Apr-2006
Web View Count: 36849 viewsLast Web Update: 4-Apr-2006