Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40

Photo Zoom: b2evo How-to

Filed in:b2evo
CSS

Photo Zoom: b2evo How-to

April 23rd, 2005  · stk

Getting the Photo/Caption Zoom Working in your Blogs

When I posted the CSS Photo-Caption Zoom entry, it was meant for a larger web audience than just b2evolution users. However, since I posted an entry about it on the b2evolution forums, I've been getting some questions about how (exactly) to get it going in a b2evoution blog.

The nail was hit squarely on the head, when Bomani left a comment saying:

I've searched your site and I'm trying to find explicit instructions on "how" and "where" to enter the code to use the Photo-Zoom feature in b2volution.

I see the code (html, css), but I have no idea on where they should be inserted.

Please help!

If beaten about the head soundly enough emails, comments and the like, even I can take a hint! ;)

To get the photo/caption zoom working on your b2evo blog, read on!

Three Steps to Zooming

ONE: Insert the CSS

The first step is very easy. Just copy the CSS and insert it into the CSS file that you are using for your custom skin (or skins, if you allow skin switching). It doesn't matter where you place the code into you CSS file and inserting the CSS will not change your existing formatting at all (unless you're already using a class name of "Zoom", which is highly unlikely).

/* beg Kimler Photo-Caption Zoom */

.Zright { float:right; margin:5px 0px 2px 10px; }
.Zleft { float: left; margin:5px 10px 2px 0px; }

.Zoom img { border: 1px solid #369; }
.Zoom.t100 img { width:100px; }
.Zoom.t150 img { width:150px; }
.Zoom.t200 img { width:200px; }
.Zoom.t250 img { width:250px; }
.Zoom.t300 img { width:300px; }
.Zoom.t350 img { width:350px; }
.Zoom.t400 img { width:400px; }
.Zoom t450 img { width:450px; }
.Zoom.t500 img { width:500px; }
.Zoom.t550 img { width:550px; }
.Zoom.t600 img { width:600px; }

.Zoom .caption { display:none; }

.Zoom a { padding:0; }
.Zoom a:hover { padding:0; border:none;
     margin:0; } /* IE picky here */
.Zoom a:visited { padding:0px;
     text-deocoration:none; }

.w100 a:hover img,.w100 a:hover .caption {width:100px}
.w150 a:hover img,.w150 a:hover .caption {width:150px}
.w200 a:hover img,.w200 a:hover .caption {width:200px}
.w250 a:hover img,.w250 a:hover .caption {width:250px}
.w300 a:hover img,.w300 a:hover .caption {width:300px}
.w350 a:hover img,.w350 a:hover .caption {width:350px}
.w400 a:hover img,.w400 a:hover .caption {width:400px}
.w450 a:hover img,.w450 a:hover .caption {width:450px}
.w500 a:hover img,.w500 a:hover .caption {width:500px}
.w550 a:hover img,.w550 a:hover .caption {width:550px}
.w600 a:hover img,.w600 a:hover .caption {width:600px}
.Zoom a:hover img { margin-bottom:5px;}

.Zoom a:hover .caption {
     display:block;
     background:#eef;
     border:1px solid #339;
     font-family:verdana,sans-serif;
     text-decoration:none;
     text-align:justify;
     font-size:10pt;
     color:#339; }

.Zoom a:hover .inner {
     display:block;
     padding:5px 8px; }
     /* no IEboxModelHack */

/* end Kimler Photo-Caption Zoom */


TWO: Add a Toolbar Button

Rather than type in the XHTML that's required each time you want to add a caption/zoom image to your blog, it's much easier to add a "Zoom" toolbar button that does the typing for you. To do this, all you need to do is edit the "_quicktag.toolbar.php" file in the /plugins/toolbars folder. Just insert the following code into the file, wherever you would like the toolbar to show up. I recommend a position next to the existing image button, like the following example. (Note: The light gray text just shows you WHERE you are in the file. Don't add that, just the middle section.)

b2evoButtons[b2evoButtons.length] = new b2evoButton('b2evo_img'
    ,'img'
    ,'',''
    ,'g'
    ,'<?php echo T_('IMaGe [Alt-G]') ?>'
    ,-1
    ); // special case


b2evoButtons[b2evoButtons.length] = new b2evoButton('b2evo_zoom'
    ,'Zoom'
    ,'<div class="Zoom Zright Zleft w400 t100"> <a href="http://yoursite.com/blogs/media/.jpg"> <img src="http://yoursite.com/blogs/media/.jpg" alt="" title="" /> <span class="caption"> <span class="inner"><strong> : </strong> </span></span></a></div>',''
    ,'z'
    ,'<?php echo T_('Kimler Image-Caption Zoom [Alt-Z]') ?>'
    );


b2evoButtons[b2evoButtons.length] = new b2evoButton('b2evo_link'
    ,'link'
    ,'','</a>'
    ,'a'
    ,'<?php echo T_('A href [Alt-A]') ?>'
    ); // special case

You will want to change the highlighted section to the fully-qualified path to your blog image files. (If you use multiple directories, this will likely be the directory branch just above the this. Keep in mind, this is only to help keep you from typing all this stuff ... you can edit this to be whatever you like when you make your blog entry.)

You may wish to change the above code to your liking, by selecting a default image width that's different from 400px (w400), or a thumbnail width other than 100px (t100). Feel free to do this, but I'd recommend getting the thing working properly FIRST, then making personal changes LATER. :)

THREE: Usage & Considerations

With the CSS added and a nifty new toolbar button, you're ready to give the image/caption zoom a spin around the block. Go make (or edit) a blog entry like you would normally. To insert a zoomed image, all you need to do is place the cursor where (in the blog edit window) you want the image to show up in the final blog.

With your cursor positioned in the edit window, just click the new "Zoom" button (or press "ALT-Z" on the keyboard). Code will be added and your edit pane will look similar to this image.

  • Using the "Zoom"
  • To float the image left - delete the "Zright" class name.
  • To float the image right - delete the "Zleft" class name.
  • Input the image width - 100px to 600px, every 50px (where "w300" means "width=300px").
  • Determine the thumbnail width - 100px to 600px, every 50px (where "t150" means "thumbnail-width=150px").
  • Input the specific image directory, filename & extension (whatever isn't already filled out by the quicktag toolbar "Zoom" button).
  • Add an ALT and/or TITLE attribute, as you see fit. (Note: ALT="" will pass validation, but for accessibility considerations, it is suggested you add some descriptive text, in case the image cannot be displayed, for whatever reason.)
  • Add a comment title, between the "<strong>" and ": </strong>", then the caption description immediately after the "" closing tag. The default caption format looks like: "Caption Title: Whatever caption description you want to type."
  • Considerations
  • It's important to know that b2evo expects an absolute image path name (i.e.- "http://yoursite.com/image.jpg"). You will experience difficulty with the html-checker if you try and use relative path names (i.e. - "../../image.jpg").
  • If your image is, say, 238px wide, you might get by using "w250". (The 12px "stretch" may not be visually displeasing and this saves you the effort of having to resize the image). Discrete image widths is one of the trade-offs with a pure-CSS solution, but I haven't found it too onerous. I edit most of my posted images anyway (cropping and reducing file size) so resizing to the nearest 50px is no big deal. You may define a finer increment (every 25px, say) in the CSS file, if this suits your needs.
  • The smallest image width is pre-set to 100px and the largest to 600px. If you commonly work with images larger or smaller than this, you can modify the CSS file to allow for those sizes.
  • Like the blog skins, you can customize the style of the image/caption zoom by modifying style properties in the CSS file. Change the border color, background color, border width, etc. It should be pretty obvious which properties control which elements and you are encouraged to customize the CSS to fit with your site.

That's it for the basic installation and operation of the image/caption zoom. I hope that you like it, that were able to understand the instructions and get it working in a quick and painless fashion. Your feedback is valuable for any fixes, changes and/or enhancements. Monetary donations are always accepted. ;)

Addendum

This section contains answers to the questions brought up by people who were installing the photo/caption zoom on their system. It will also contain information regarding updates and/or changes to the code. The content here is driven by people like you, which is why feedback is so important.

(29-Apr-05) JPG -vs- jpg: One user had difficulty getting the code to work, because their images were saved with a "JPG" file extension (all caps). UNIX is case sensitive, so "image.JPG" is NOT the same as "image.jpg". The fix is easy: rename the file so it has a lowercase 'jpg' extension.

(29-Apr-05) Image Link: In order to do its zoom 'magic' in MSIE, the XHTML code needs to be placed inside of a link. By default, the image is linked to itself (which is why the image file must be written TWICE - first as the link, second as the link object). There is no reason why you must use the image as the link. You could have the image link to any website of your choosing, OR, if you want, it could be linked to a dead-end (i.e. go nowhere) using href="javascript:" or href="javascript:void(0)".

NOTE: IF you want to use the javascript 'dead-end' option, you will need to add 'javascript', to the $allowed_uri_scheme array in the /conf/_formatting.php file (around line 320), so that it will pass the HTML-checker without throwing a "Invalid URL" error upon save.

(Permalink)
Views: 44824 views
20 Comments · GuestBook
default pin-it button
Updated: 14-Oct-2005
Web View Count: 44824 viewsLast Web Update: 14-Oct-2005

Your Two Sense:

XHTML tags allowed. URLs & such will be converted to links.


Subscribe to Comments

Auto convert line breaks to <br />

1.flag Ann Walker Comment
04/28/05
Thank you for your generosity.

I'm very, very new at this and new to b2evo and I appreciate instructions that I can comprehend.

I really love what your code does.

Thank you again,

Ann
2.flag Ysbrand Galama Comment
05/06/05
That was easy! And it worked! Thanks...
3.flag Sieg Comment
05/09/05
I can have more pics on each story with out making the page 10 feet long!! BoooYaaa!!

Thanks Buddy.
4.flag Murali Comment
05/25/05
Wow ! This is amazing ! Kudos Scott ! Thanks for this great stuff.
5.flag Ann Comment
11/05/05
Hi there, I'm trying to use this code into the skin 'Uneven". I placed it in the right stylesheet, but for some reason it isn't working. Do you know if that template has something in it that might prevent the zoom function? I'm crossposting a post that works fine in a 'custom template but the same post won't zoom small in this "uneven' template.
6.flag Chris Berks Comment
03/15/06
Do i have to change _formatting.php as I am getting an error message with PZ2 saying cannot have style attribute??
7.flag stk Comment
03/15/06
Chris,

This tutorial is for the original version of PZ (Photo-Caption Zoom, or "PZ1"). It doesn't require the style attribute in the XHTML.

You are correct though, that PZ2 does.

You'll want to follow the instructions in this post, the situation is explained in detail.
8.flag Chris Birks Comment
03/15/06
Thanks for the quick reply - I missed that yellow part. I should have looked more carefully.

PZ2 is a great feature!!!
9.flag Joachim Comment
11/24/06
great plugin! I will use it!
10.flag Kelli Comment
03/01/07
I have tried this code, and it kept giving me separate windows. I am still clueless. I am using Dreamweaver 8
11.flag Misty Comment
10/11/07
Hi,

I've just begun using Wordpress theme to start my blog. There is neither _quicktag.toolbar.php nor toolbars directory under plugin directory.

What should I do?
Thanks.
12.flag stk Comment
10/11/07
Misty,

What version of b2evolution are you using?

(We're currently using 1.9.3 and the file you want to modify is now called /plugins/_quicktags.plugin.php)

Note to self: I should update this post, for changes to b2evo files AND to use PZ3, instead of PZ2.

Hope this helps.
-stk

13.flag Misty Comment
10/11/07
Hi Scott,

I am so excited to have found your plugin - Photo-Caption Zoom.

I am using Wordpress for my blog. There is no directory named toolbars under plugin (Step 2 of instruction) in Wordpress. I've tried step 1 and step3 with one of your zoomed photos with Wordpress, it didn't work for me.

Could you please give me some pointers? Thanks so much.

http://wordpress.org/support/topic/138378?replies=1#post-630805
14.flag stk Comment
10/11/07
Misty,

LOL ... that explains the b2evolution version bit. ;)

Photo-caption Zoom isn't a plug-in. It's a "technique". It's applicable to any HTML page (which means it'll work in Wordpress, b2evolution, or any HTML page).

For a start, where's the blog that you're trying to deploy it?

I've not worked much with Wordpress, but the idea is the same as b2evolution. You just need to put the CSS into your template CSS file (or call it separately). Then put the XTHML code into a post. You CAN do it manually, the first few times, but after a bit, this becomes tedious. So ... you just need to find a way (within wordpress) to get it to spit out the bulk of the code, then just change the salient details.

I've emailed you (privately) to help you find a solution.

Cheers,
-stk
15.flag Deborah Comment
04/09/08
This is a great css code. I do have one problem, however. On your example of the flowers, a person can hover but cannot click through. On my page, the hover works fine, but the viewer can also click on the thumbnail and it will open a new page with the image. How do I stop the ability of clicking through?
Thank you.
16.flag stk Comment
04/09/08
Deborah - Glad you like Photo-caption Zoom! Good question.

The image comes up on its own page because that's how the link is set (i.e. you probably have something like   <a href="blah.jpg">  )

While this is considered good form, I think that because the image is zoomed on the page, it's superfluous (and annoying) to click and get a new page with the same zoomed image, all by itself. To avoid this behavior, just "kill the link". There are several ways of doing this. Here's two:

1)   <a href="#">   is simple and works. What you're doing is linking to a blank bookmark. The good thing about this method is that it doesn't employ javascript, so it will work for everyone. The bad thing about this is that on a long page, it will scroll the visitor to the top of the page.

2)   <a href="http://randsco.com/noJS.html" onclick="return false">   - what we use. It uses javascript (onclick) that essential says, "If the user clicks, return a value of 'false', which makes the browser think that the click didn't happen". I link to a noJS.html file that's for visitors that have javascript disabled. (Read the file to see what it says).

Nerdy Detail: I keep the cursor as a pointer, when hovering over images (which is different than the "hand" that normally shows when you're over a link). This is to further emphasize that the Photo-caption Zoom images aren't links (aren't "clickable"). One can revert back to a hand, if the image IS LINKED to another page (or itself), by using the "Lnk|noLnk" classname in the PZ3 DIV.

Hope this helps.
-stk
17.flag Deborah Comment
04/09/08
Stk,
Thanks for your fast and accurate reply! I used the "#" theory and it now works perfectly! I'm thrilled!
Thanks,
Deb
18.flag stk Comment
04/09/08
Yay! I'm happy you're happy! :D
19.flag Bud Myers Comment
07/27/09
I would just like to know how you style your comment boxes to light gray with the light purple header that includes the poster's name and date.

I use b2evolution and looked at all the css files and changed a few things but I can't get it like yours.

Thx in advance if I ever get a response...
Bud
20.flag stk Comment
07/27/09
Bud - Where's your blog (link)? I can probably come around and show you how. My comments file is fairly heavily modified, to suit my needs, but it shouldn't be too much to replicate what you indicated.