topical media & game development
lib-jquery-plugin-captify-sample.htm / htm
<html>
<head>
<title>jQuery Captify Demo</title>
<link rel="stylesheet" type="text/css" href="lib-jquery-plugin-captify-sample.css?t=1" />
<script type="text/javascript" src="lib-jquery-plugin-captify-jquery.js"></script>
<script type="text/javascript" src="lib-jquery-plugin-captify-captify.js"></script>
<script type="text/javascript">
document.ready(function(){
$('img.captify').captify({});
});
</script>
</head>
<body>
<div id="wrapper">
<h1><strong>jQuery Captify</strong> Plugin <span class="ver">v1.1.0</span></h1>
<p>
<a href="http://plugins.jquery.com/project/captify">Captify</a> is a plugin for <a href="http://jquery.com">jQuery</a> written by <a href="http://masterfidgeter.com">Brian Reavis</a> to display simple, pretty
image captions that appear on rollover. It has been tested on Firefox, Chrome, Safari, and the <a href="http://www.howtocreate.co.uk/wrongWithIE/">wretched Internet Explorer</a>. Captify was inspired by
<a href="http://plugins.jquery.com/project/imagecaptions">ImageCaptions</a>, another jQuery plugin for displaying captions like these.
</p>
<p>
The goal of Captify is to be easy to use, small/simple, and completely ready for use in production environments (unlike ImageCaptions at the moment).
</p>
<h3>Update (February 28, 2009) v1.1:</h3>
<p>
With some great help from Dan Ryan, Captify got some love…
<ul>
<li>Captions now can slide in from the bottom or top.</li>
<li><strong>New animation options.</strong> Now, in addition to 'slide', there
is 'fade' and 'always-on'.</li>
<li>Slight adjustments + bug fixes.</li>
</ul>
</p>
<h2>Samples:</h2>
<h3>Using the ALT-tag method:</h3>
<div class="images">
<a href="http://www.flickr.com/photos/bcreavis/3116710710/"><img class="captify" src="http://farm4.static.flickr.com/3084/3116710710_f2d45b57ac_m.jpg" width="160" height="240" alt="Orion: African Hunter" /></a>
<a href="http://www.flickr.com/photos/bcreavis/3193708652/"><img class="captify" src="http://farm4.static.flickr.com/3364/3193708652_c6f73b72f9_m.jpg" width="164" height="240" alt="My Pup, Cider" /></a>
<a href="http://www.flickr.com/photos/bcreavis/3115883639/"><img class="captify" src="http://farm4.static.flickr.com/3180/3115883639_90b9253ced_m.jpg" width="166" height="240" alt="Me Freezing" /></a>
<br class="c" />
</div>
<code><img src="theimage.jpg" <strong>class="captify" alt="Caption Text"</strong> /></code>
<h3>DIV-linked-by-REL-attribute Method:</h3>
<div class="images">
<a href="http://www.flickr.com/photos/bcreavis/3192901879/"><img class="captify" title="Pilot and Index Peaks by Brian Reavis, on Flickr" rel="caption1" src="http://farm4.static.flickr.com/3082/3192901879_8132bdd1c4.jpg" width="500" height="304" alt="Pilot and Index Peaks" /></a>
<div id="caption1"><a href="http://flickr.com"><span style="color: #00a2ff">Flick</span><span style="color: #ff0084">r</span></a> <span style="color: #454545">//</span> Pilot & Index Peaks — Wyoming</div>
</div>
<br class="c" />
<code style="line-height: 225%"><img src="theimage.jpg" <strong>class="captify" rel="caption1"</strong> /><br />
<strong><div id="caption1"> Flickr // Pilot and Index </div></strong></code>
<h2>How do I use it?</h2>
<p>First off, if you haven't downloaded it already, <a href="http://masterfidgeter.com/projects/captify/captify-1.1.1.zip">download Captify here</a>.</p>
<pre><code>document.ready(function(){
$('img.captify').captify({
<span class="comment">// all of these options are... optional</span>
<span class="comment">// ---</span>
<span class="comment">// speed of the mouseover effect</span>
speedOver: 'fast',
<span class="comment">// speed of the mouseout effect</span>
speedOut: 'normal',
<span class="comment">// how long to delay the hiding of the caption after mouseout (ms)</span>
hideDelay: 500,
<span class="comment">// 'fade', 'slide', 'always-on'</span>
animation: 'slide',
<span class="comment">// text/html to be placed at the beginning of every caption</span>
prefix: '',
<span class="comment">// opacity of the caption on mouse over</span>
opacity: '0.7',
<span class="comment">// the name of the CSS class to apply to the caption box</span>
className: 'caption-bottom',
<span class="comment">// position of the caption (top or bottom)</span>
position: 'bottom',
<span class="comment">// caption span % of the image</span>
spanWidth: '100%'
});
});</code></pre>
<p>This javascript above should be wrapped in a <span style="font-family: monospace"><script></span> tag and then be placed in the <span style="font-family: monospace"><head></span>
of your document, after you've
included <strong>jquery.js</strong> and <strong>captify.tiny.js</strong>.</p>
<p><span class="note">Note:</span> Also, you need to copy-and-paste the necessary items out of the <a href="lib-jquery-plugin-captify-sample.css">sample stylesheet</a> into
your own website's stylesheet. When you open it up, you'll see what needs to be copied right away.</p>
<p>One side-effect of the captions is that the captified images become wrapped in divs that float left. If you have text clinging to their right side,
clear the float by adding this line right after the image:</p>
<code style="line-height: 225%"><br class="c" /></code>
<p>If you don't want to take that route, just take out this block from the stylesheet, and that'll
do the trick too :)</p>
<pre><code>.caption-wrapper {
float: left;
}</code></pre>
<h2>What do you think?</h2>
<p>If you need help or just want to make a comment, wander to the <a href="http://masterfidgeter.com/2008/12/jquery-captify/">blog post</a>.</p>
</div>
</body>
</html>
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
