Before WPcaptionSlice, with Tentyten theme
Default Wordpress caption HTML:
<div id="attachment_278" class="wp-caption alignnone" style="width: 570px">
<a href="http://farm3.static.flickr.com/2668/3937457435_d8b9755732_o.jpg">
<img src="images/3937457435_d8b9755732_o-560x374.jpg" alt="Monsieur Ferraille" title="Que Monsieur Ferraille soit avec toi" width="560" height="374" class="size-large wp-image-278" />
</a>
<p class="wp-caption-text">Monsieur Ferraille</p>
</div>
With WPcaptionSlice
Default WPcaptionSlice params:
$('.wp-image-279').WPcaptionSlice();
Custom image size and caption text under the 4th image:
$('.wp-image-280').WPcaptionSlice({ width: 168,
height: 168,
captionPos: 4
});
Don't use the image itself for the links, but the href attribute from the initial <a>
tag, and set the links title to the image title:
$('.wp-image-281').WPcaptionSlice({ width: 168,
height: 168,
captionPos: 6,
linkToImg: false,
imgTitleToLinkTitle: true
});
Custom number of columns and lines, no white space under the images:
$('.wp-image-282').WPcaptionSlice({ width: 120,
height: 120,
cols: 4,
lines: 3,
captionPlace: false,
linkToImg: false
});
Custom background position (in %), no white space under the images, but keep the caption text under the 5th image, empty images alt:
$('.wp-image-283').WPcaptionSlice({ xmin: 25,
xmax: 85,
ymin: 0,
ymax: 80,
whiteSpace: false,
captionPos: 5,
imgAlt: false
});
The same... with shuffle! The caption text moves with the 5th image:
$('.wp-image-284').WPcaptionSlice({ xmin: 25,
xmax: 85,
ymin: 0,
ymax: 80,
whiteSpace: false,
captionPos: 5,
imgAlt: false,
shuffle: true
});
The same with shuffle, but the caption text is allways in the 5th position, and with a custom "empty" caption text:
$('.wp-image-285').WPcaptionSlice({ xmin: 25,
xmax: 85,
ymin: 0,
ymax: 80,
whiteSpace: '↑ ↑',
captionPos: 5,
imgAlt: false,
shuffle: 'fixedCaption'
});