tests.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>caption.js | Tests</title>
	<meta name="description" content="An open-source jQuery plugin to easily and semantically add captions to images."/>
	<link rel="icon" type="image/png" href="site/favicon.png"/>
	<!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script><![endif]-->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>


	<!--///////////////////////////// Required Stuff /////////////////////////////-->
	<script src="dist/jquery.caption.js" type="text/javascript"></script>
	<link rel="stylesheet" href="dist/captionjs.css"/>

	<!--///////////////////////////// Sample CSS /////////////////////////////-->
	<style>
		.captionjs figcaption {
			font-size: 13px;
			line-height: 1.5;
			padding: 10px 15px;
			border: 1px solid #ddd;
			border-top: none;
			background-color: #eee;
		}
		.captionjs.captionjs-stacked figcaption {
			background-color: rgba(0, 0, 0, 0.75);
			color: #fff;
			border: none;
		}
		.captionjs.captionjs-animated figcaption {
			border-top: 1px solid rgba(255, 255, 255, 0.3);
			background-color: rgba(0, 0, 0, 0.75);
			color: #fff;
			border: none;
		}
		.captionjs.captionjs-hidden figcaption {
			border-top: 1px solid rgba(255, 255, 255, 0.3);
			background-color: rgba(0, 0, 0, 0.75);
			color: #fff;
			border: none;
		}
		.captionjs a {
			color: #fff;
		}
		.captionjs.captionjs-default a {
			color: #000;
		}

		img {
			float: left;
			/*position: absolute;*/
			position: relative;
			left: 5px;
			margin: 15px 15px 15px 0;
		}
	</style>

	<!--///////////////////////////// Sample JS /////////////////////////////-->
	<script type="text/javascript">
		$(window).load(function(){
			$('#img-2').captionjs({
				'mode' : 'default',
				'inherit_styles'  : true,
				'force_dimensions': true
			});
			$('#img-3').captionjs({
				'mode' : 'animated',
				'inherit_styles'  : true,
				'force_dimensions': true
			});
			$('#img-4').captionjs({
				'mode' : 'stacked',
				'inherit_styles'  : true,
				'force_dimensions': true
			});
			$('#img-5').captionjs({
				'mode' : 'hidden',
				'inherit_styles'  : true,
				'force_dimensions': true
			});
			$('#img-6').captionjs({
				'mode' : 'animated',
				'inherit_styles'  : true,
				'force_dimensions': false,
				'is_responsive'   : true,
				debug_mode: true
			});
		});
	</script>
</head>
<body>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem,
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		<img id="img-1" class="caption" data-link="http://google.com" src="http://farm9.staticflickr.com/8378/8360655820_df685ca91e_m.jpg" data-caption="The busy Khao San Road in Bangkok, Thailand."/>
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
	</p>
	<hr style="clear:both;">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem,
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		<img id="img-2" class="caption" data-link="http://google.com" src="http://farm9.staticflickr.com/8378/8360655820_df685ca91e_m.jpg" data-caption="The busy Khao San Road in Bangkok, Thailand."/>
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
	</p>
	<hr style="clear:both;">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem,
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		<img id="img-3" class="caption" data-link="http://google.com" src="http://farm9.staticflickr.com/8378/8360655820_df685ca91e_m.jpg" data-caption="The busy Khao San Road in Bangkok, Thailand."/>
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
	</p>
	<hr style="clear:both;">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem,
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		<img id="img-4" class="caption" data-link="http://google.com" src="http://farm9.staticflickr.com/8378/8360655820_df685ca91e_m.jpg" data-caption="The busy Khao San Road in Bangkok, Thailand."/>
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
	</p>
	<hr style="clear:both;">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem,
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		<img id="img-5" class="caption" data-link="http://google.com" src="http://farm9.staticflickr.com/8378/8360655820_df685ca91e_m.jpg" data-caption="The busy Khao San Road in Bangkok, Thailand."/>
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
	</p>
	<hr style="clear:both;">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem,
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		<div style="width:50%;">
			<img id="img-6" class="caption" data-link="http://google.com" src="http://farm9.staticflickr.com/8378/8360655820_df685ca91e_m.jpg" data-caption="The busy Khao San Road in Bangkok, Thailand."/>
		</div>
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
		aut magnam impedit nesciunt numquam nihil nisi possimus architecto
		culpa hic repellat eveniet animi a exercitationem officiis.
		Omnis ipsam laudantium tempora?
	</p>
</body>
</html>