Contenu principal
WPcaptionSlice

WPcaptionSlice : jQuery plugin for WordPress captions

30 Déc 2010

With this jQuery plugin you can easily slice the WordPress captions into smaller other captions.
Many parameters are available.
Look at the demo page to see it in action.

Why you should be using WPcaptionSlice

  • Supports lots of lightboxes and you can manipulate the link and image attributes, like title and alt, and copy one to another.
  • Lightweight: less than 5ko of javascript.
  • Use the CSS of your WordPress theme, and just add a few CSS if you want it.
  • Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
  • Written in jQuery plugin format and can be chained with other jQuery commands.
  • Generates W3C valid XHTML.

Tested with Firefox 3.6+, Chrome 8+, Safari 5+, Opera 10+, IE6, IE7.

Instructions

  1. Put WPcaptionSlice folder in ‘/wp-content/themes/your-theme/js/‘.
  2. Load WPcaptionSlice CSS in <head> if you want, after your theme style. 
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/js/WPcaptionSlice/WPcaptionSlice.css"/>
  3. The script needs to use a blank.png. You have to indicate your template directory to the script like this: 
    <script type="text/javascript">var templdir="<?php bloginfo('template_directory'); ?>";</script>
  4. Finally, load the script (after jQuery, and before your lightbox script if you have one). 
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/WPcaptionSlice/jquery.WPcaptionSlice.js"></script>

The selector must be the image. Remember, the default WordPress caption HTML looks like this:

123456

<div id="attachment_278" class="wp-caption alignnone" style="width: 570px">
    <a href="image.jpg">
        <img src="image-560x374.jpg" alt="image alt" title="image title" width="560" height="374" class="size-large wp-image-278" />
    </a>
    <p class="wp-caption-text">Caption text</p>
</div>

The WPcaptionSlice method takes a key/value object.
Format: 

$('selector').WPcaptionSlice({key:value, key:value, key:value});

Example: 

$('img').WPcaptionSlice();

Example: 

$('.size-large').WPcaptionSlice({width:168, height:168, captionPos:4});

Example: 

$('.wp-image-279').WPcaptionSlice({width:120, height:120, cols:4, lines:3, whiteSpace:false, linkToImg:false});

See the demonstration page for more examples.

Parameters and default values:

Key Default Type Description
width 150 Number with for the images (px)
height 150 Number Height for the images (px)
cols 3 Number Number of columns
lines 2 Number Number of lines
xmin 5 Number Minimum background-position (horizontal) for images (%): in the new captions, the plugin uses the original image for background
xmax 95 Number Maximum background-position (horizontal) for images (%)
ymin 0 Number Minimum background-position (vertical) for images (%)
ymax 100 Number Maximum background-position (vertical) for images (%)
captionPos 0 Number Caption text position.

  • 0: no caption text,
  • 1: caption text under the first image,
  • 2: caption text under the second image,
  • …
whiteSpace true Boolean
or String		 White space under the images.

  • true: an empty space is displayed under each image,
  • false: no white space under the images,
  • ‘string’: a custom text is displayed under each image.
galleryClass  » String Additional class for the gallery
shuffle false Boolean
or String		 Shuffle mode.

  • true: shuffle images order. If the caption text is displayed, it moves with its image (see captionPos).
  • false: classic images order.
  • ‘fixedCaption’: shuffle images order. The caption text stay in the « captionPos »th position.
imgAlt true Boolean The original image alt attribute is used or is empty
imgTitle true Boolean The original image title attribute is used or not
linkToImg true Boolean Links configuration.

  • true: each small image links to the original image.
  • false: no link.
  • false, and the original image is wrapped into a link: each small image links to the original link.
linkTitle false Boolean The original link title attribute is used or not
linkRel false Boolean
or String		 Use link rel attribute or not.

  • true: use the original link rel attribute,
  • false: no rel attribute for the links,
  • ‘string’: a custom rel attribute is used for the links.
imgAltToLinkTitle false Boolean Take the original image alt and put it into links title
imgTitleToLinkTitle false Boolean Take the original image title and put it into links title
boxDeltaWidth 10 Number The div.wp-caption width minus the image width (px). In the default WordPress template, this value is 10.
boxTag ‘div’ String The HTML tag for each image wrapper.
textTag ‘p’ String The HTML tag for each caption text.