Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40

PZ2 - How2

Filed in:CSS

PZ2 - How2

October 14th, 2005  · stk

Instructions: Three Steps to Zooming

(1)   Insert the CSS

The first step is easy. Just copy the CSS and insert it into the CSS file that you are using for your page. It doesn't matter where you place the code in the file and it will not change your existing formatting (unless you're using "PZoom" or "PZ" class names, which is unlikely).

Special Notes: b2evolution users version 1 users

/* Photo-Caption PZ2 CSS */

/* PlaceHolder Div */
.fill.left { float:left;
    margin:5px 10px 0 0; }
.fill.right { float:right;
    margin:5px 0px 5px 20px; }

/* MSIE z-index work-a-round */
/* reversing natural z-index */
.PZleft,.PZright { position:relative; }
.PZ1 { z-index:900; }
.PZ2 { z-index:890; }
.PZ3 { z-index:880; }
.PZ4 { z-index:870; }
.PZ5 { z-index:860; }
.PZ6 { z-index:850; }
.PZ7 { z-index:840; }
.PZ8 { z-index:830; }
.PZ9 { z-index:820; }
.PZ10 { z-index:810; }
.PZ11 { z-index:800; }
.PZ12 { z-index:790; }
.PZ13 { z-index:780; }
.PZ14 { z-index:770; }
.PZ15 { z-index:760; }
.PZ16 { z-index:750; }
.PZ17 { z-index:740; }
.PZ18 { z-index:730; }
.PZ19 { z-index:720; }
.PZ20 { z-index:710; }

/* Mozilla z-index bliss */
.PZleft a,.PZright a { z-index:0; }
.PZleft a:hover,.PZright a:hover
    { position:absolute; z-index:900; }

.PZoom a { position:absolute; cursor:default; }
.PZoom.Link a { cursor:pointer; }

.PZleft .PZoom a:hover,.PZright .PZoom a:hover {
    border:0; background:none;
    text-decoration:none; }

.PZright .PZoom { float:right;
    margin:5px 0px 5px 10px;
    position:relative; left:16px; top:-3px; }

.PZleft .PZoom { float:left;
    margin:0; position:relative; }
.PZleft .t100 { right:115px; }
.PZleft .t150 { right:165px; }
.PZleft .t200 { right:215px; }
.PZleft .t250 { right:265px; }
.PZleft .t300 { right:315px; }
.PZleft .t350 { right:365px; }

.t100 img { width:100px; }
.t150 img { width:150px; }
.t200 img { width:200px; }
.t250 img { width:250px; }
.t300 img { width:300px; }
.t350 img { width:350px; }
.PZoom img { border: 1px solid #369; }

.PZoom.noBrdr img { border:none; } /* border off */

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

.PZoom .PZcap { display:none; }

.PZoom a:hover .PZcap {
     display:block;  background:#369;
     border:1px solid #369;
     font-size:9pt; line-height:12pt;
     color:white; margin-right:-2px; }

.PZoom a:hover .PZpad { display:block;
     padding:3px 5px 5px 5px; }

.PZoom.noCap a:hover .PZcap { display:none; }

/* ZoomOpen Positions */
/* Left */
.PZleft .PZoom a:hover { left:1px; top:1px }
/* Right */
.PZright .t100 a:hover { right:-109px; top:1px; } /*MSIE-specific*/
     .PZright>.t100 a:hover { right:-107px; }     /*Mozilla-specific*/
.PZright .t150 a:hover { right:-159px; top:1px; }
     .PZright>.t150 a:hover { right:-157px; }
.PZright .t200 a:hover { right:-209px; top:1px; }
     .PZright>.t200 a:hover { right:-207px; }
.PZright .t250 a:hover { right:-259px; top:1px; }
     .PZright>.t250 a:hover { right:-257px; }
.PZright .t300 a:hover { right:-309px; top:1px; }
     .PZright>.t300 a:hover { right:-307px; }
/* End Photo-Caption Zoom CSS */

(2)   Add the XHTML

Adding the XHTML to your page is easy, but it's the considerations and changes that make it complex. As you work with PZ2, it will begin to make sense. For now, however, we'll make it simple. Just copy and paste the code below and make the necessary changes in the highlighted parameters. With any luck, you'll have your first PZ2 zoomed image on the first go.

<div class="fill right" style="height:145px; width:100px;"></div>
<div class="PZ PZ1 PZright">
  <p class="PZoom t100 w250 Brdr Cap noLink">
    <a href="" onclick="return false"> <img src="" alt=" Topobo " title="" />
      <span class="PZcap"> <span class="PZpad">
        <strong>Topobo: </strong>A demonstration of the new PZ<sup>2</sup> photo zoom technique.

The Highlighted Parameters (one by one):

height:145px declaration: This is the height of a 100px-wide thumbnail image (To determine this value, take the image you want to zoom, resize it (using the same aspect ratio) to a width of 100px, then make a note of the height. Do NOT save the resized image. PZ2 needs only the larger image). Technical Note

w250 class name: This is the width of your full-sized image, which should be resized to a multiple of 50px, between 100px and 700px (e.g. - If you full size image is 350px wide by 450px high, change this class name to "w350") Technical Note

<img> src="http://...": This is the location of the image file you wish to zoom. Technical Note b2evolution users

<img> alt="...": It's good accessibility practice to assign an alternate image attribute (for XHTML-valid pages, it's a requirement). This text will display, in place of the image if, for whatever reason, the image cannot be displayed.

<img> caption: Type whatever caption you would like to accompany your photo here. Any XHTML-valid code can be added, allowing full control over the caption from within the XHTML document.

BOOM. You should now have your first PZ2 zoomed image! Wunderbar! b2evolution users

Make things easy on yourself...

Adding a PZ2 zoome image/caption to a document, blog entry or page requires the above XHTML code. So far, we've only added one image. Multiple images require additional consideration and another block of XHTML code. Who can remember all that code? Who wants to type it in each time? I'm lazy. I want to hit one button and have all that code magically appear.

If you're using CMS or blog-ware to author your content, then a one-button macro may be available. b2evolution users.

b2evo only - html-checker

It's great that b2evo is written to standards and that the html-checker makes certain that the user isn't authoring poorly-formed code, BUT ... it can create problems. Two that I know, which might be causing you problems with the PZ2 code, can be quickly remedied by editing the _formatting.php file in the /conf/ folder.

The first is the "style" attribute. It's not (by default) allowed, which (I think) is an egregious mistake, as it allows inline CSS to be added to posts and is fully XHTML-valid. To correct this globally, all one needs to do is add "style" as a "core attribute".

Edit the _formatting.php file. Around line 103, you'll see "define('A_coreattrs', 'class title');" Simply change 'class title' to 'class title style'.

That's all there is to it.

The second is that, by default, javascript: is an invalid-URL. To change this, again edit the _formatting.php file. Around line 312 look for $allowed_uri_scheme = array. Add 'javascript', to the list.

BTW - I'm going to put in a plug for a hack I made (which I've been told is going to be added to the "Phoenix" version, due out Nov 2005 sometime ... so it may ALREADY be in there). I've never liked that the html-checker error messages don't provide more feedback about WHAT the problem is. So I made a hack (very simple changes) that provides more detailed feedback.

b2evo only - quick toolbar button instructions

To add a "PZ2" toolbar button that automagically inserts the PZ2 XHTML code into your entries, you need to edit the "_quicktag.toolbar.php" file in the /plugins/toolbars folder. Insert the code below, 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.) version 1 users

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

b2evoButtons[b2evoButtons.length] = new b2evoButton('b2evo_pz2'
    ,'<div class="fill right" style="height:XXXpx; width:100px;"></div><div class="PZ PZ1 PZright"><p class="PZoom t100 w250 Brdr Cap noLink"><a href="" onclick="return false"> <img src="" alt="" title="" /><span class="PZcap"> <span class="PZpad"><strong>BOLD: </strong>Your Caption</span></span></a></p></div>',''
    ,'<?php echo T_('PZ2 Image/Caption Zoom [Alt-Z]') ?>'

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

You need to change the highlighted section to the fully-qualified path to your blog image files.

You can change the above code to your liking [e.g., selecting a default image width that's larger than 250px (w250), 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. :)

(3)   PZ2 Options (The Simple Version)

Now that you (presumably) have your first image zoomed and a relatively painless method of inserting the XHTML code into your page, you'll next want to play around with some of the PZ2 features. This section is meant to provide a "quick and dirty" set of instructions. Let's dig in.

•   Image Numbering: Because of a z-index limitation in IE it is necessary to number each image used in an entry. The PZ2 code provides for 20 images in an entry. The first photo on the page (first being the highest in the XHTML code) uses a class name of "PZ1". The next - "PZ2" ... and so on, to the last image in the entry.

•   Image Placement: PZ2 provides two places to float the photo - left or right. The code above floats the image right. When you want to place the image to the left, you must specify it TWICE in the XHTML code. Simply change the classnames from right/PZright to left/PZleft.

•   Toggles: PZ2 provides a series of toggles (using multiple class names):

•   Border: Use the "Brdr" classname when you want a border around both the image and the caption. Use "noBrdr" when you don't.

•   Caption: Use the "Cap" classname when you want an invisible caption that shows when the image is zoomed. Use "noCap" when you don't want a caption at all, either with the thumb OR the zoomed image.

•   Link: Use the "noLink" classname when the image is linked to href="" onclick="return false" (doesn't go anywhere). Use "Link" when you've changed the link to a valid URL and you want the cursor to change when the reader is hovering over the image, so they know the image is actually a link. (It's also recommended to utilize the <img> "title" attribute, which then provides fly-over (or bubble) text that gives the reader a bit more information about the link. This further emphasizes that the image is a link AND (perhaps) let's them know if it opens in a new window, what the link might contain, etc.)

The "noJavaScript.html" file is simply a page a reader is directed IF they have javascript disabled (if it's on, the link will be "dead", because of the javascript onclick function. When it's off, they'll go to the the noJavaScript.html page, where you can tell them "Looks like your javascript is off, use the browser "back" button, to return to the entry.")

•   Limits: PZ2 can be modified to do as you please, but these are the "out-of-the-box" limits:

•   Number of PZ2 Images: (per Entry or Page) - 20 ("PZ1" - "PZ20")

•   Thumbnail Widths: 100px to 350px, every 50px ("t100" - "t350")

•   Full Image Widths: 100px to 700px, every 50px ("w100" - "w700")

Well, that sums up the 'quick-and-dirty' on PZ2. You might well just jump off board at this point and go along your merry way, never needing any more information than that. If, however, you're still having problems or would like further information about some of the limitations and considerations of PZ2 (or look at the examples) ... read on.

(4)   PZ2 Usage & Considerations

NOTE (Feb 2006): I was returning to this article, to change the [javascript:void(0)] to [href="" onclick="return false"], because it's a more accessible solution AND because b2evo 1.6+ doesn't allow "javascript". Then I found this half-written (and hidden) section (4). I thought I'd unhide it, in case anyone finds it useful. I have no idea what it says, what state it's in or IF it will be helpful. But what the heck ... it might be.

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


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.

(26-Feb-06) javascript:void(0) & Phoenix: The new "Phoenix" version of b2evolution does NOT allow "javascript" links of any kind and a new method was devised. This new method involves killing the link with javascript, but direting the user to an HTML file (which you will need to make), if they have javascripting disabled. The new link is of the form [href="" onclick="return false"]. The javascript onclick function kills the link (for visitors with javascript enabled), otherwise, they're directed to a "noJavaScript.html", where you politely tell folks "It appears your javascripting is disabled, you'll need to use your browser back button to return to the entry". (Or something equivalent).

Views: 61247 views
13 Comments · GuestBook
default pin-it button
Updated: 26-Feb-2006
Web View Count: 61247 viewsLast Web Update: 26-Feb-2006