@{
	ViewBag.Title = "Usage";
	Layout = "~/Views/Shared/_WidgetLayout.cshtml";
}
@section header
{
	<script type="text/javascript">

		$(document).ready(function () {
			$("#lightbox").wijlightbox();

			$("#lightbox2").wijlightbox();

			$("#lightbox3").wijlightbox();

			$("#nowrap1").wijlightbox();
			$("#nowrap2").wijlightbox();
		});
	</script>
}
<h2>Usage</h2>
		<div class="main demo">
			<!-- Begin demo markup -->
			<h3>
				Links + Images</h3>
			<div id="lightbox">
				<a href="../Content/Images/Sports/1.jpg" rel="wijlightbox;player=img">
					<img src="../Content/Images/Sports/1_small.jpg" title="Sports 1" alt="Sports 1" /></a>
				<a href="../Content/Images/Sports/2.jpg" rel="wijlightbox;player=img">
					<img src="../Content/Images/Sports/2_small.jpg" title="Sports 2" alt="Sports 2" /></a>
				<a href="../Content/Images/Sports/3.jpg" rel="wijlightbox;player=img">
					<img src="../Content/Images/Sports/3_small.jpg" title="Sports 3" alt="Sports 3" /></a>
				<a href="../Content/Images/Sports/4.jpg" rel="wijlightbox;player=img">
					<img src="../Content/Images/Sports/4_small.jpg" title="Sports 4" alt="Sports 4" /></a>
			</div>
			<h3>
				Links + Images UL</h3>
			<div id="lightbox2">
				<ul class="ui-helper-reset ui-helper-clearfix">
					<li><a href="../Content/Images/Cities/1.jpg" rel="wijlightbox;player=img">
						<img src="../Content/Images/Cities/1_small.jpg" title="Sports 1" alt="Sports 1" /></a></li>
					<li><a href="../Content/Images/Cities/2.jpg" rel="wijlightbox;player=img">
						<img src="../Content/Images/Cities/2_small.jpg" title="Sports 2" alt="Sports 2" /></a></li>
					<li><a href="../Content/Images/Cities/3.jpg" rel="wijlightbox;player=img">
						<img src="../Content/Images/Cities/3_small.jpg" title="Sports 3" alt="Sports 3" /></a></li>
					<li><a href="../Content/Images/Cities/4.jpg" rel="wijlightbox;player=img">
						<img src="../Content/Images/Cities/4_small.jpg" title="Sports 4" alt="Sports 4" /></a></li>
				</ul>
			</div>
			<h3>
				Links + Images Gallery</h3>
			<div id="lightbox3">
				<a href="../Content/Images/Sports/1.jpg" rel="wijlightbox[stock];player=img">
					<img src="../Content/Images/Sports/1_small.jpg" title="abstract 1" alt="abstract 1" /></a>
				<a href="../Content/Images/Sports/2.jpg" rel="wijlightbox[stock];player=img">
					<img src="../Content/Images/Sports/2_small.jpg" title="abstract 2" alt="abstract 2" /></a>
				<a href="../Content/Images/Sports/3.jpg" rel="wijlightbox[stock];player=img">
					<img src="../Content/Images/Sports/3_small.jpg" title="abstract 3" alt="abstract 3" /></a>
				<a href="../Content/Images/Sports/4.jpg" rel="wijlightbox[stock];player=img">
					<img src="../Content/Images/Sports/4_small.jpg" title="abstract 4" alt="abstract 4" /></a>
			</div>
			<h3>
				No Wrapper</h3>
			<a id="nowrap1" href="../Content/Images/NightLife/1.jpg" rel="wijlightbox;player=img">
				<img src="../Content/Images/NightLife/1_small.jpg" title="Night life" alt="Night life" /></a>
			<h3>
				No Wrapper with Lightbox compatibility</h3>
			<a id="nowrap2" href="../Content/Images/Animals/1.jpg" rel="lightbox;player=img">
				<img src="../Content/Images/Animals/1_small.jpg" title="Animals" alt="Animals" /></a>
			<!-- End demo markup -->
			<div class="demo-options">
				<!-- Begin options markup -->
				<!-- End options markup -->
			</div>
		</div>
@section description
{
  <p>This sample demonstrates the various usage scenarios based on markup.</p>
}