I actually saw this on your site before I noticed this post, and it seems like an awesome feature! I'm still getting the hang of b2evo myself, but I may have to give this a test run once I start working on my art blog.

That's awesome!

Is the thumbnail just a resized version of the full image?

Flames,

Glad you like it. The method is described in detail on the [url=http://www.randsco.com/index.php/2005/01/31/css_photo_caption_zoom]post[/url], but yes, the thumbnail is a scaled-down version of the full-sized image (why have two, when just a change of width will give you both?!) PS - I like the static menu on your page.

Tabard,

Since you've seen it before, perhaps you've seen me plinking away at our site, trying to get it the way we want. I still have feedback.php to customize & another site- whew, it takes time.

Yeah, actually I ran across your blog the other day (can't remember if it was a random search or somewhere on here), and thought it looked familiar when I saw it today :)

I've been kind of all over the place working on mine, messing with skinning and getting the layout I want and everything. It takes a little while, but these forums have been a HUGE help so far!

this seems to be very promising.
I gave it a very quick look, I know the principles, now I will *try to* implement it in my site.

Just upgraded the code to allow for a range of thumbnail image sizes, rather than just "vertical" and "horizontal".

Now (if one wished) the image can SHRINK when you put your cursor on it. (WHY anyone would want to do this, is beyond me.)

I think it'd be neat if clicking on it would keep it full sized, then clicking again would reduce it to a thumb until the next click. In other words, do the photozoom thing until clickage happens then toggle the size on click.

That DOES sound interesting. Hmmm.

The only way I know to do the clickage thing is using the onmouse functions (which are javaScript) and would void the sanctity of the pure-CSS solution.

Still, it might be useful. I'll futz around and see what I can come up with.

That is seriously smart - love it!

I'm no programmer, but I can cut-n-paste with the best of them, I would appreciate some idiot guidance notes on what I need to tweek in the code to implement this in the editor toolbar.

Thanks,
John

jko - Glad you like it.

Here is a copy of the relevant section of my _quicktags.toolbar.php file. (That's the only file you need to modify).

Don't forget to make a copy of the original, so in case you mess it up, you can always go back. (Very handy indeed!)

I replaced the 'strong' button, which is why you see that on the first line. I wasn't sure what that line did, so I just left it. (Works!) ;)

Here's the code:

                b2evoButtons[b2evoButtons.length] = new b2evoButton('b2evo_strong'
                                                                                                                                                                                        ,'Zoom'
                                                                                                                                                                                        ,'<div class="Zoom Zright Zleft w400 t100 Brdr"> <a href="http://yourSite.com/_img/blog/05.jpg"> <img src="http://yourSite.com/_img/blog/05.jpg" alt="chgMe" title="" /> <span class="caption"> <span class="inner"> <strong>: </strong> </span></span></a></div>',''
                                                                                                                                                                                        ,'z'
                                                                                                                                                                                        ,'<?php echo T_('CSS Img-Cap Zoom') ?>'
                                                                                                                                                                                        );

                b2evoButtons[b2evoButtons.length] = new b2evoButton('b2evo_em'

You should just be able to cut-n-paste the whole thing, between the existing "strong" and "em" buttons - cause they haven't been changed. (It's an oddly formatted file, because (I think) all of the commands are hugely long lines. It's important NOT put a carriage return in there. THe command must be one continuous line.

I use different selector names than the cut-n-paste CSS code I pasted on my site, but I edited it so you should be good to go. Just hasn't been tested. (Let me know if you have probs).

I've added "Brdr" for a border on/off switch, but I haven't modded the CSS yet to do it. Should be simple. (Having it in there (or NOT) WON'T affect the operation - so leave it or dump it).

I try to type as much into the macro button as I can (to avoid typing later), like as much of the image path as possible.

Once you mod the file (put in your own site & stuff), upload it & you should be ready. When you edit or write a post, just hit the "Zoom" button (or ALT-z) and all that code will be blasted right into your blog entry. Choose float - right or left - (by deleting the other), choose a big image size, thumb size, exact image location, alt, title & caption. BOOM you're rockin the CSS world!

Cheers,

-Scott

PS - I lied about the _formatting.php file. I don't think any edits need to be performed for the pure-CSS version. (Only the javaScript one). But, if you get a message when you post, that indicates otherwise, let me know. (IF it happens and you still want to make a post, edit the _formatting.php file & look for "use html checker" ... turn switch from 1 to 0. Save your entry, then turn switch back on. Prolly won't need to do this, but just in case.)

Scott,
Many thanks for that. Got it working after removing one or two gremlins. On your example page - http://randsco.com/_miscPgs/cssZoom06FINAL.html - your css references Czoom when it should be Zoom.

Also, rather than replace one of the existing toolbar buttons I created a new one and stuck it in after the img one:

      b2evoButtons[b2evoButtons.length] = new b2evoButton('b2evo_zoom'
                                                                     ,'Zoom'
                                                                     ,'<div class="Zoom Zright Zleft w400 t100 Brdr"> <a href="http://yoursite/media/pic.jpg"> <img src="http://yoursite/media/pic.jpg" alt="chgMe" title="" /> <span class="caption"> <span class="inner"> <strong>: </strong> </span></span></a></div>',''
                                                                     ,'z'
                                                                     ,'<?php echo T_('CSS Img-Cap Zoom') ?>'
                                                                     ); 

I'm just about to go and have a play with the image upload code so that the inserted code after an upload will put in the zoom version rather than a simple img tag (even better, a choice of standard or zoom).

Thanks again,
John

OK, been having a play with admin/b2upload.php and I've modified it to give the option of normal image code or zoom image code being pasted into the main edit box. Here's what I did:

Open: admin/b2upload.php
On line 156 (or thereabouts), find:

$piece_of_code = "<img src="$fileupload_url/$img1_name" border="0" alt="$imgdesc" />";

Insert after:

	$piece_of_zoom_code = "<div class="Zoom Zright Zleft w400 t100 Brdr"> <a href="$fileupload_url/$img1_name"> <img src="$fileupload_url/$img1_name" alt="chgMe" title="" /> <span class="caption"> <span class="inner"> <strong>: </strong> </span></span></a></div>";

On line 171 (or thereabouts), find:

<input type="button" name="close" value="<?php echo T_('Add the code to your post !') ?>" class="search" onclick="targetopener('<?php echo $piece_of_code; ?>')" /><br />

Insert after:

<input type="text" name="imgpath" value="<?php echo $piece_of_zoom_code; ?>" size="40" class="large" /><br />
<input type="button" name="close" value="<?php echo T_('Add image zoom code to your post !') ?>" class="search" onclick="targetopener('<?php echo $piece_of_zoom_code; ?>')" />

Hope this might be useful.
John

JKO - Thank for posting the info about the CSS code (you're right ... Czoom is what I use on MY site ... must've missed changing that, but it IS correct in the CSS on the actual page). Anyway .. sorry about that. I hope that it didn't cause you too many problems.

Thanks to your message ... it's now fixed.

Can't say much RE the uploading, because I don't use it. It failed the 1st time I tried to use it and frankly, I've been doing thing manually for so long, I just skipped the whole FIXING of it and just went about business as usual.

Did you put up your site link? I'm eager to see the code being used at someone else's site!

Cheers.

Scott

PS - THXS for the info RE a NEW button. Would never have known!! (Just been using B2EVO for a month ... well, OKAY ... it's more like 1.5 MOS :lol: )

I've been playing with this CSS Image Zoom for a few hours now, and can't seem to get the b2evo admin pane to accept a "relative" path to the image file. I have to put a fully qualified URL or the b2evo admin pane comes back with:

Found invalid URL: Invalid URL

Likewise, In regards to the link that the image points to, I get the same error if I try to use a null link "#". As soon as I put a fully qualified URL for both the href and the path to the image, the admin pane allows the post to go through.

[edit: also, the zooms don't work for me in IE, but are fine in firefox... can't seem to figure out where that's going wrong]

jj.

jibberjab wrote:

I have to put a fully qualified URL or the b2evo admin pane comes back with:

Found invalid URL: Invalid URL

That is standard behavior.
You can't put in a relative URL

JJ ... Hmm. Even tho I have "notify me when a reply is posted" turned on, I never received an email when you (or Topanga) posted. :(

You can always email me from my site, if you're having problems getting the photo zoom working. :)

Topanga is correct, b2evo requires a fully qualified path. As my code was intended for a generalized web audience (not specifically b2evo users), I used a relative one in the example. Guess I should add a "how to get this going in b2evo section" on my site.

The method works equally well in IE or FireFox, so I don't know what might be the cause of your problem.

I'll pop over an have a look (assuming that you've got a site link defined). EDIT: Too bad you haven't added your blog URL to your profile, as I can't just click on the WWW and have a look.

Cheers,

Scott

Added April 27, 2005: [url=http://www.randsco.com/index.php/2005/04/23/photo_zoom_b2evo_how_to]b2evo install instructions[/url]
(Including how to add a quicktag toolbar button)

After someone emailed a "please help" message, I finally took the hint and added a "How to" blog entry that's b2evo-specific for this feature.

If you're wanting to install the photo/caption zoom, it should be useful.

Cheers,

Scott

Scott

Thank you for your generosity.
I'm very, very new at this and new to B2 and I appreciate instructions that I can comprehend. I was freaking out over my MT posts going whacko in b2 - not knowing this stuff is daunting.
But i actually got it and the proof is that I didn't crash my site and it is great solution for me as I rely on images.
I really love what your code does.
Is there something I can change for Firefox (1.0.3), that would avoid their pop-up blocker. It works great as an "allowed site" but goes big to slightly bigger when blocked.

http://ohioboating.net/b2

Thank you again,
Ann

Ann, You're welcome & I'm glad you found the tutorial useful. It is daunting when you first begin, but familiarity with MT will only help.

Regarding your Ffox issue: I visited your site, as I am using ffox v1.0.3 as well. I don't normally have the pop-up blocker on, but I did turn it on (and have no sites 'allowed'). The zoom behaves as expected and matches the results seen in MSIE. I cannot duplicate the problem, as all appears fine.

I cannot understand why the pop-up blocker would have an effect, as the code is pure-CSS. I can only suggest "Clearing All" browsing information (tools -> options -> privacy -> clear all); rebooting your computer; or looking at the photos on our site (do they do the same thing?).

If you're still having problems, please feel free to email me and I'll try to help.

Cheers,

Scott :)

Hello
I removed my name from the "allowed", kept pop up on and now it is perfect.

So who knows! I'm just having a good time moving my posts over now that images are dealt with.

Be Well
Ann

Looks fantastic, Scott!

I do notice it doesn't work super well in Safari, but apple comes out with their new version on friday, so we'll see if it is more CSS compliant.

When I mouseover the image, it zooms and captions appear as I would expect. however when I mouse off, the image returns to small size, but it's justification is screwey and the text doesn't re-arrange as it should. I blame safari.

-R

Ann - Glad you got things sorted and are happy! :D

Rocketdyke - Happy you like, thanks for the comment and the Safari feedback. Interesting. I think there's plenty of room to add some Safari-specific CSS properties that might help handle the mouseout caption. As it stands, both the "caption" <span> (and it's IE avoid-the-box-model "inner" <span>) are collapsed with a "span.caption {display:none}" (which works fine for Ffox and IE) ... maybe Safari needs more?

Perhaps the "inner" <span> also needs to be specified with a {display:none}?

Or both ".Zoom a" and ".Zoom a:visited" need some extra properties (like font-size:0 or line-height:0 )?

Or maybe Safari doesn't like the span.caption {display:none} on mousout and requires {font-size:0 or line-height:0} here?

Plenty of things to try that might fix Safari, without bungling up MSIE or Ffox.

Browsers :: Can't code for 'em, can't see without 'em, can't shoot 'em! 8|

-Scott

well, testing it on the new safari shows that the CSS handling is the same between os10.3 and os10.4.

so, I'll have to dig in and see what extra style info safari requires.

-R

Like the zoom effect on th pictures very much. Get good responses aswell. However i have a question. Is there a way to use the effect when you use multiple images next to eachother like in :
http://weblog.kemper.nu/index.php?title=khota_baru_malaysia

The zoom does not work well in that case, since it moves the pictures.

Will not be able to update any code, since i am travelling ;)

Great Stuff, Hats Off Dude. Not just my blog, but will attempt tp use it wherever possible. :D

Just a query. How do I align the Thumbnail to the right of the text ? As you can see in the Bob Dylan Post in my blog, both images are aligned left. I wanted the Bob Unplugged image to appear on the Right. Tried with div center tags, but nothing happened.

My Blog is [url=http://donblog.quicksilverhq.com/]Raves at Opportune Moments[/url]

Cheers

Solved the issue with multiple pictures on one line for the moment. Had a bright :idea: yesterday evening. Just choose the right dimensions for the picture and the zoomed picture B) .

Hitchcock,

Share the wisdom in English ? :D

Cheers

What english don't you understand ?

If you have a look at my blog http://weblog.kemper.nu you now see that i only have two pictures aligned in one row.

Specially for you i changed one post to how it used to be. You can see them both now at http://weblog.kemper.nu/?blog=3&page=1&disp=posts&paged=2

The only thing i changed was the [w400 t100] to [w250 t150] B)

Hitchcock,

What english don't you understand ?

I was just kidding abt the English bit. Just an expression, no offense meant.

Checked out the links. Thanx. Nice blog too....

Cheers

No offense taken. I do also like the blog, but i like travelling more B) . Just check out the website http://www.kemper.nu

Scott

Entering photos is working perfect, still one problem I cannot solve. :-/
I want to put two photos on the first line and the next two on the second line.
Entering a break <BR> in the post after the first two photos gives an error message:
Cannot update, please correct these errors:

* Tag div is not allowed within tag br
* Tag div is not allowed within tag br
* Parser error: mismatched tag: br near </div></body>

What's going wrong??

hakkelar, try <br/>

I tried Donthecat, the error message is gone :D but unfortunately it doesn't work :'(

I left a message on your blog about doing this ... did you get it?

-stk ;)

Have got your message and changed a couple of things.
It's now working just as I wanted. :D

PS
Yes, I know "Zoom Zleft" and "Zoom Zright" at the same time is ....ehhhh :oops: :oops:

Introducing ... (bing batta boom) ...
[url=http://www.randsco.com/index.php/2005/06/15/intrdoducing_photo_caption_zoom_2]Photo/Caption Zoom version 2 (PZ²)[/url]

This version does all the first version does, but it OVERLAYS the text, rather than 'find room to fit'.

Anyway, it's ABSOLUTELY brand new, so it's gonna take me a while to get the code ready for distribution, but you can come round and have a look [url=http://www.randsco.com/index.php/2005/06/15/intrdoducing_photo_caption_zoom_2]HERE[/url] and [url=http://www.randsco.com/index.php/2005/06/14/april_showers_may_flowers]HERE[/url]

Cheers,

stk :D

Atta Boy, Scott

Way 2 go..... :D

Looking forward to the Final Cut.. Though there never is a Final Cut...The Music just gets better....(Zappa said that ?) B)

Long live the concept of PZ2 and..

May Your Tribe Increase

Cheers Dude

:D :D Took about 5 mins what a great feature!!

Thanks
DrWit

http://www.drwit.com

Just released ... instructions for getting the overlay version (PZ2 or "Pure CSS Photo/Caption Zoom - version 2") running on your site.

Advantage ? ... the photos overlay the text (instead of push it out of the way).

Disadvantage ? ... more code, more complex.

Still ... practical, pure-CSS XHTML-valid, one image file, includes a styled caption ... PLUS ... additional features. Check it out.

Here's the link:

http://www.randsco.com/index.php/2005/10/14/photo_caption_zoom_version2_how_to

If you're looking for background material, check out:

1) The [url=http://www.randsco.com/index.php/2005/01/31/css_photo_caption_zoom]first pure CSS Photo/Caption Zoom[/url]

2) [url=http://www.randsco.com/index.php/2005/04/23/photo_zoom_b2evo_how_to]How to get PZ1 running in your b2evo blog[/url]

3) [url=http://www.randsco.com/index.php/2005/06/15/introducing_photo_caption_zoom_2]Introducing PZ2[/url] (version 2)

4) [url=http://www.randsco.com/index.php/2005/09/11/changing_z_index_on_hover]IE limitation - Changing Z-Index for Hovered Elements [/url]

Bumping this to let people know that a better, lighter version of PZ has been developed! Photo-caption Zoom Version 3.

[url=http://randsco.com/index.php/2006/04/10/photo_caption_zoom_version_3]Introducing Photo-caption Zoom Version 3 (PZ3)[/url]
(Introduction w/link to cut'n-paste XHTML/CSS code)
(Supercedes Version 2)

Special thanks to ¥åßßå for his contributions to this version. You rock dude! :D

Features:

• pure-CSS (no javascript)

• valid XHTML (v1.0 strict/transitional and v1.1)

• displays BOTH thumbnail and larger image using only one image file (containing a single image).

• Save page real-estate - display small thumb till mouseover, when large image shows with a caption.

• nice-looking caption, which can be customized

• In the blog entry, you can specify:

  • PZ3 - ANY thumbnail size/aspect ratio.

  • float image (right/left)

  • PZ3 - Zoomed image size (no resizing necessary).

  • PZ2/PZ3 - Toggle image/caption borders on|off.

  • PZ2/PZ3 - Toggle caption on|off.

  • PZ2/PZ3 - Toggle image link cursor linked|unlinked.

  [/list:u]

  • easy to use

  • PZ3 - Uses almost 70% less code than PZ2. :D

  • no need to modify CSS, specify everything inside blog post

  • (can code a b2evo back office toolbar button to add PZ code into a blog entry) <-- makes adding a zoomed image super simple! ;)

  [/list:u]

  Tested in MSIE6 (sp2), FireFox (v1.5) & Opera (v8).

Sweet. I'll give it a try today.

Thanks,

Jeff