Kimler Sidebar Menu
Search Journal
Local Weather
Site Tools
Randsco Visitors: Count, Country, Time & What
There are 6 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 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
FEATURED DONOR: Green Man T-Shirts is a super environmentally-friendly clothing company based in California. Their mission is to sell organic t-shirts and save the World. The second is a doozy, but with 25% of their profits donated to environmental causes and groups, they're off to a good start. Green Man T-Shirts uses Photo-Caption Zoom
Green Man T-Shirts is an environmentally-friendly purveyor of - you guessed it - tee shirts. (The name says it all, eh?)
And apparently more, because the "Green Man" is a legendary pagan deity that roams the woodlands of England and Europe. He is usually depicted as horned and peers out of a mask of leaves. He archetypically promotes "being one with the Earth".
Dave Urban & Rob Juszak, co-owners of Green Man T-Shirts, sell only 100% organic cotton and bamboo t-shirts made by the most ethical and environmentally conscious companies in the apparel world. In addition they also give 25% of their profits to support environmental causes and organizations.
Green Man T-Shirts utilizes Photo-Caption Zoom on a number of product-related pages. They know it's important for customers to get a detailed view of their tee shirt designs, and Photo-caption Zoom provides the added ability of including an engaging textual description with the detailed photo. It's also search-engine friendly and because it doesn't rely on Flash, JavaScript or other add-on dependent technologies - their message gets across to EVERY VISITOR.
Make Environmentalists Green with Envy
More Shout OutsKimler Adventure Pages: Journal Entries
PZ2 - How2
Getting Photo-Caption Zoom (version 2) Up & Running on Your Site
(Instructions, Examples & Considerations)
In an effort to deflect a myriad of questions from readers who wanting to implement the pure-CSS photo/caption zoom (version 2) on their site - demonstrated with the photo here - I'm making this "How-to" guide. It contains the information needed to install and use it.
This photo/caption zoom technique is written to CSS 2.0 and XHTML 1.1 standards (which you can verify, using the validation buttons at the bottom of this page, if you so desire). It's been tested on both IE and FireFox. (Note: When IE7 comes out - which will support the :hover pseudo-class for all elements - the code will likely be re-written more succinctly).
PZ2 is the second version of "photo/caption zoom". This newer version overlays the text (eliminating 'text and element migration'), it allows larger images to be displayed on a page (because the image can overlay menu items and other DIVS) and it has some built-in display toggles (you can turn the caption on/off, for example). All that good stuff, unfortunately, comes at a price. The code is longer, more complex and therefore, trickier to use. (Hence the need for this tutorial.)
If you're new to the "photo/caption zoom" method displayed here, it's recommended that you read "CSS Photo-Caption Zoom" to start. It provides a history behind its development, as well as a demonstration of various 'photo zoom' techniques.
If you just want to get PZ2 working on your page (special instructions for b2evolution users), by all means, READ ON ...
Really great job !
Thx a lot (I like the style, too!)
Cat
I bet "photo caption zoom" works! (Or any others you see in the Top 40 Search Term List).
Anyway ... glad you found us! Let me know if you have any questions.
I think I searched for "tutorial hover image" or similar.
I am having some difficulties tweaking the images in the tables of my website, I'm hoping to still find some more in depth step by step information on changing borders and re-sizing the images. My tables also jumped and changed size on me when I added this code.
I look forward to searching every written word on this site to help find the answers!
* Is there a way to make the zoom float above (higher than) the image? or must they always be below?
* Is there a way to have the zoomed image appear over the other floating images? if I have several in a row, the zoomed image appears larger, but underneath the other floating images.
Thanks!!
Is there any way to have the images zoom to a percentage of their actual size instead of zooming out to full size?
The visitor has to download the full image size, whether a %age is shown or the full image.
It's a lot more efficient to have the visitor download only that which is shown. (e.g., if full size is 100KB and 650px by 450px and you show only 325px by 225px ... the visitor still has to download the 100KB file AND suffer visual loss of a hardware image reduction).
Better to resize the image to 325px by 225px and have the visitor download that (Better image, smaller file).
To answer your question though, I suppose it would be possible to do that. While it's configured to zoom to "natural size", I would imagine you could restrict the zoom to XX px by YY px (mind you, you'd have to calculate and specify this for every image).
I guess I'll have to find a solution that uses some javascript or something. Anyway, thanks for getting back to me - I greatly appreciate it!
Is there a way to make the zoomed image float above (higher than) the image? or must they always be below & to the left? I'm trying to create a small portfolio gallery and the images to the left are being cut off the page. It'd be nice if the left images would float right.
Any suggestions?
There are several options, but first, some explanations.
One of the restrictions with using one image tag for both the thumb and the zoomed image is that the zoomed image must overlie the thumb (horrid flickering results if you don't do this, as the browser can't decide which image to show).
Having the zoomed image zoom out from either the upper left (and down) or upper right (and down) requires no additional CSS instructions.
OKAY ... so ... now, your options:
1) Use two image tags, one for the thumb and one for the zoomed image, and place the zoomed image anywhere you want.
2) Have the zoomed image fly out from the lower left, lower right or center (and up). (Unless all your images are the same aspect ratio and sizes, this will require "per-image" CSS directives).
3) Add padding to the bottom of the page, so images near the bottom have "room" to expand into (this is what we do here, on randsco.com)