Skip to content

April 30, 2011

KwicksCaptions

KwicksCaptions is an adaptation of the original script by Jeremy Martin. This adaptation makes it possible to have captions on the kwicks. The captions are minified when not in use and will show full size when the kwick is activated. This script is optimized for horizontal function of the original script.

Demo

Javascript

Plugin Download

$().ready(function() {
		jQuery('.kwicks').kwicks({
			max : 535,
			spacing:0,
			sticky:false,
			captions: true, //true or false
			miniCaption: '.slide-minicaption', //selector for mini captions
			caption: '.slidecaption' //selector for full size captions
		});
});

More documentation available here. This script uses same settings as the original, but the commented options above were added.

CSS

#kwicks{overflow:hidden; width:588px; z-index:1000; float:left;  height:212px;}
.kwicks { /* recommended styles for kwicks ul container */
	list-style: none; position: relative; margin: 0; padding: 0; float:left; background:#101010;}
.kwicks ul{margin:0;}
.kwicks li { width: 196px; height:212px;}
.kwicks li { /*do not change these */
	display: block; overflow: hidden; padding: 0;  /* if you need padding, do so with an inner div (or implement your own box-model hack) */ }
.kwicks.horizontal li { /* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
	margin-right: 0px; /*Set to same as spacing option. */ float: left; }
.kwicks.vertical li { /* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
	margin:0px; /*Set to same as spacing option. */ }
.slide-minicaption {bottom:0px; left:20px; position:absolute; color:#111; padding:10px 10px 10px 10px; font-size:12px; line-height:1.3em; background:#fff; width: 120px; }
.slide-minicaptiontitle {letter-spacing:0; color:#111; display:block; line-height:18px; }
.slidecaption {bottom:20px; left:20px; position:absolute;  color:#222; padding:20px; font-size:12px; line-height:1.5em; background:#fff; width:300px; }
.slidecaption h3{margin:0 0 10px 0; line-height:1.2em; padding:0;}
.slidecaption a {color:#222; }
.slidecaption a:hover {text-decoration:none; }
p.captiontitle { letter-spacing:0px; display:block; color:#222; margin-bottom:4px; font-size:26px; }
.slidecaptiontitle h2 a {color:#222; margin-top:0;}
.slidecaptiontitle h2 a:hover {color:#555; text-decoration:none; }
#slideshow-wrapper{height:460px;}

HTML

Repeat the structure within #kwicks as necessary. Classes and IDs are arbitrary.

<div id="kwicks">
	<ul class="kwicks horizontal">
	<li id="slide3">
		<div>
			<a href=""><img src="files/Slide3.jpg" alt=""></a>
			<!-- Mini Caption when slide closed -->
			<p style="display: block; opacity: 0.8;" class="slide-minicaption"> 
				<span class="slide-minicaptiontitle">3 mini</span> 
			</p>
			<!-- Big Caption on Hover -->
			<div style="display: block; opacity: 0;" class="slidecaption"> 
				<h3><a href="">3</a></h3>
				<a href="">3 big</a>
			</div> 
		</div>
	</li>
	</ul>
</div>
Read more from Scripts

Share your thoughts, post a comment.

(required)
(required)

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments