Cross check again Cross check again
Don's Space Rohz space Rohz space Geek Stuff   <<Select one of our Webspaces

Post details: Pure CSS Photo-Caption Zoom

05/27/05

•  Posted at 03:40:50 am by DontheCat in: Codes, Recommended   •   253 views   •   Permalink

Pure CSS Photo-Caption Zoom

Once in a while, we come across a Tool or a Code or a Tech thing that not just make life easier but also enhance the creative process.

I was actually thinking how to put thumbnails in posts which would show the bigger images inside the post itself w/out the need to open a separate window. While mulling, I was surfing the b2evo Forum and chanced upon Scott's Pure CSS Photo-Caption Zoom. This was a God-send or should I say Scott send?

A neat piece of code that changed the way I'm gonna look at image manipulation not just in my blogs but in all the site. Well, an using just one image for both the thumb and original. Cool, I say.

To get an idea what I'm talking about, just click the image.

Brilliant, eh ? Gives text wrapping a whole new dimension. Not just that, I can now place just thumbnails of images in my site pages without occupying space. Should work wonders for the Alpine T-shirt gallery I'm planning to upload soon. I could probably fit in a fair amount of images along with product descritpions withot making my page look like invaded Iraq.

What makes Photo Zoom a favourite is the ease of customisation and complete control over the image with just a bit of tweaking the CSS. Though the width attributes are specified in the CSS, one can use class names, almost like variable definitions, choosing options in the HTML code. .

You choose widths (100px-600px, every 50px) for both the thumbnail AND larger image. You also choose float (left/right) to wrap text the way you like it. I also found out that I could link from the image to an external URL rather than the image by changing the a href tag. This cartoon opens up Scott Kimler Caption no.2 (Production Code)page which provides the CSS and the html code.

Users of b2evo can find out Blog integration How-to and more goodies from b2evo realted category on what Scott calls Scott & Rachel's Adventure Pages

I started heading for my earlier posts with a vengance, but then remembered the old jungle saying - WHAT IS DONE IS DONE, DONT UNDONE, SO WELL DONE. But, lemme tell ya, PZ is gonna be apart of my life from now on.

Thanks, Scott...

Comments:

scott [Visitor] · http://randsco.com
Thanks for the compliment and you're welcome. I'm glad that you find my Photo/Caption Zoom useful.

The caption is key, I think, however, if you don't want a caption, there is a super simple image zoom using javascripting. It's also possible to overlay the image onto the text, but it's a bit more complicated.

See more at the original CSS Photo-Caption Zoom article.

PS - The cartoon image links to our home page, not to the (production code) page. ;)
PermalinkPermalink 05/27/05 @ 19:13

Comments are closed for this post.



May the Force be with You

And the Source with Everyone

Search

Categories

Misc

XML Feeds

What is RSS?

Who's Online?

  • Guest Users: 11

Listed on BlogShares

BlogStreet

Best Blogs in Asia

Blogwise - blog directory

Blog Explosion

Listed in LS Blogs

Globe of Blogs

Blog Soldiers

powered by
b2evolution