https://sohoeditors.com/js/jquery.capty.js

1/**
2 * jQuery Capty - A Caption Plugin - http://wbotelhos.com/capty
3 * ---------------------------------------------------------------------------------
4 *
5 * jQuery Capty is a plugin that creates captions over the images.
6 *
7 * Licensed under The MIT License
8 *
9 * @version         0.2.1
10 * @since           12.18.2010
11 * @author          Washington Botelho dos Santos
12 * @documentation   wbotelhos.com/capty
13 * @twitter         twitter.com/wbotelhos
14 * @license         opensource.org/licenses/mit-license.php MIT
15 * @package         jQuery Plugins
16 *
17 * Usage with default values:
18 * ---------------------------------------------------------------------------------
19 * $('#capty').capty();
20 *
21 * <img id="capty" src="image.jpg" alt="Super Mario Bros.&reg;" width="150" height="150"/>
22 *
23 */
24
25;(function($) {
26
27	$.fn.capty = function(settings) {
28		var options = $.extend({}, $.fn.capty.defaults, settings);
29
30		if (this.length == 0) {
31			debug('Selector invalid or missing!');
32			return;
33		} else if (this.length > 1) {
34			return this.each(function() {
35				$.fn.capty.apply($(this), [settings]);
36			});
37		}
38
39		var $this		= $(this),
40			name		= $this.attr('name'),
41			$caption	= $('<div class="' + options.cCaption + '"/>'),
42			$elem		= $this;
43
44		if ($this.parent().is('a')) {
45			$elem = $this.parent();
46		}
47
48		var $image		= $elem.wrap('<div class="' + options.cImage + '"/>').parent(),
49			$wrapper	= $image.wrap('<div class="' + options.cWrapper + '"/>').parent();
50
51		$wrapper.css({
52			height:		$this.height(),
53			overflow:	'hidden',
54			position:	'relative',
55			width:		$this.width()
56		});
57
58		$caption.css({
59			height:		options.height,
60			opacity:	options.opacity,
61			position:	'relative'
62		})
63		.click(function(evt) {
64			evt.stopPropagation();
65		})
66		.appendTo($wrapper);
67
68		if (name) {
69			var $content = $(name);
70
71			if ($content.length) {
72				$content.appendTo($caption);
73			} else {
74				$caption.html('<span style="color: #F00;">Content invalid or missing!</span>');
75			}
76		} else {
77			$caption.html($this.attr('alt'));
78		}
79
80		if (options.prefix) {
81			$caption.prepend(options.prefix);
82		}
83
84		if (options.sufix) {
85			$caption.append(options.sufix);
86		}
87
88		if (options.animation == 'slide') {
89			$wrapper.hover(
90				function() {
91					$caption.animate({ top: (-1 * options.height) }, { duration: options.speed, queue: false });
92				},
93	    		function() {
94					$caption.animate({ top: 0 }, { duration: options.speed, queue: false });
95				}
96	    	);
97		} else if (options.animation == 'fade') {
98			$caption.css({
99				opacity:	0,
100				top:		(-1 * options.height) + 'px'
101			});
102
103			$wrapper.hover(
104				function() {
105					$caption.stop().animate({ opacity: options.opacity }, options.speed);
106				},
107	    		function() {
108					$caption.stop().animate({ opacity: 0 }, options.speed);
109				}
110	    	);
111		} else if (options.animation == 'fixed') {
112			$caption.css('top', (-1 * options.height) + 'px');
113		} else {
114			debug($this.attr('id') + ': invalid animation!');
115		}
116
117		return $this;
118	};
119
120	function debug(message) {
121		if (window.console && window.console.log) {
122			window.console.log(message);
123		}
124	};
125
126	$.fn.capty.defaults = {
127		animation:	'slide',
128		cCaption:	'capty-caption',
129		cImage:		'capty-image',
130		cWrapper:	'capty-wrapper',
131		height:		30,
132		opacity:	.7,
133		prefix:		'',
134		speed:		200,
135		sufix:		''
136	};
137
138})(jQuery);