Contenu principal
WPcaptionSlice

WPcaptionSlice : jQuery plugin for WordPress captions

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:

KeyDefaultTypeDescription
width150Numberwith for the images (px)
height150NumberHeight for the images (px)
cols3NumberNumber of columns
lines2NumberNumber of lines
xmin5NumberMinimum background-position (horizontal) for images (%): in the new captions, the plugin uses the original image for background
xmax95NumberMaximum background-position (horizontal) for images (%)
ymin0NumberMinimum background-position (vertical) for images (%)
ymax100NumberMaximum background-position (vertical) for images (%)
captionPos0NumberCaption text position.

  • 0: no caption text,
  • 1: caption text under the first image,
  • 2: caption text under the second image,
whiteSpacetrueBoolean
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 »StringAdditional class for the gallery
shufflefalseBoolean
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.
imgAlttrueBooleanThe original image alt attribute is used or is empty
imgTitletrueBooleanThe original image title attribute is used or not
linkToImgtrueBooleanLinks 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.
linkTitlefalseBooleanThe original link title attribute is used or not
linkRelfalseBoolean
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.
imgAltToLinkTitlefalseBooleanTake the original image alt and put it into links title
imgTitleToLinkTitlefalseBooleanTake the original image title and put it into links title
boxDeltaWidth10NumberThe div.wp-caption width minus the image width (px). In the default WordPress template, this value is 10.
boxTag‘div’StringThe HTML tag for each image wrapper.
textTag‘p’StringThe HTML tag for each caption text.