spree_slider 1.1.0 → 1.2.0

data/vendor/assets/anything-slider/demos/css/page.css

@@ -1,148 +0,0 @@
-/********************
-  Overall Demo pages
- ********************/
-body                   { font: 12px Georgia, Serif; background: #fff; color: #000; }
-a, a img               { border: 0; text-decoration: none; }
-
-#page-wrap, #demo2     { width: 90%; padding: 0 15px; margin: 0 auto 50px; position: relative; }
-
-h1                     { font: bold 60px Helvetica, Sans-Serif; letter-spacing: -2px; margin: 20px 0; text-align: center; }
-h2                     { font: bold 30px Helvetica, Sans-Serif; letter-spacing: -1px; margin: 0 0 10px 0; color: #002266; }
-h2.title               { text-align: center; }
-h3                     { font: bold 20px Georgia, Serif; margin: 0 0 10px 0; color: #003388; }
-h5, .header            { font: bold 15px Georgia, Serif; text-align: center; }
-pre, code              { font: 13px/1.8 Monaco, MonoSpace; margin: 0 0 15px 0; padding: 5px; background: #f5f5f5; block: inline; width: 100%; overflow-x: auto; }
-blockquote             { margin-left: 30px; }
-
-ul                     { margin: 0; padding-left: 35px; }
-ul li                  { font: 15px Georgia, Serif; margin: 0 0 8px 0; }
-
-#nav                   { display: block; width: auto; margin: 10px auto; text-align: center; white-space: nowrap; line-height: 3em; }
-#nav a                 { text-align: center; background: black; color: white; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 10px; }
-#nav a.git             { background: #006; }
-#nav a.play            { background: #060; }
-#nav a.issue           { background: #600; }
-#nav a:hover, #nav a.current { background: #666; }
-
-.themeselector         { margin: 0 auto; text-align: center; }
-
-#status                { color: #00a; font-weight: bold; }
-.alert                 { color: #f00; font-weight: bold; }
-.alert a, .attention   { color: #a00; }
-.data                  { width: 100%; border: #555 1px solid; border-collapse: collapse; }
-.data td, .data th     { border: #555 1px solid; padding: 0 5px; }
-.data th               { background: #eee; }
-.data .col             { width: 200px; }
-
-/*****************
-  Main demo page
- *****************/
-#main #slider1         { width: 800px; height: 390px; list-style: none; }
-#main #slider2         { width: 800px; height: 390px; list-style: none; }
-
-/* Set slider1 panel 5 stuff - adding padding directly to the panel will
-   shift panels after it, so we need a wrapper */
-#main #slider1 .panel5 ul { width: 200px; margin: 0 5px; }
-
-/* Set slider2 panel sizes, Main & FX demo pages */
-#slider2 .panel1 { width: 500px; height: 350px; }
-#slider2 .panel2 { width: 450px; height: 420px; }
-#slider2 .panel3 { width: 680px; height: 317px; }
-#slider2 .panel4 { width: 100%; } /* With no specific size, it defaults to wrapper size; except in IE7, it needs a width defined, so set to 100% */
-#slider2 .panel5 { width: 680px; height: 317px; }
-#slider2 .panel6 { width: 450px; height: 300px; }
-
-/* For Specific Slides, these also apply to FX demo pages */
-.textSlide             { padding: 10px 30px; }
-.textSlide h3          { font: 20px Georgia, Serif; }
-.textSlide h4          { text-transform: uppercase; font: 15px Georgia, Serif; margin: 10px 0; }
-.textSlide ul          { list-style: disc; margin: 0; padding-left: 20px; }
-.textSlide ul li       { display: list-item; }
-.rightside             { float: right; margin: 0 0 2px 10px; }
-
-.quoteSlide            { padding: 20px; }
-.quoteSlide blockquote { font: italic 24px/1.5 Georgia, Serif; text-align: center; color: #444; margin: 0 0 10px 0; }
-.quoteSlide p          { text-align: center; }
-
-/***************************
-  FX Demo Page
- ***************************/
-/* Demo page accordions */
-.accordion             { width: 70%; margin: 0 auto; }
-.accordion .ui-widget-content a { color: #004499; }
-
-/** Demo 1 **/
-/* colorbox images to full size */
-#demo2 #slider1        { width: 400px; height: 300px; list-style: none; }
-#cboxPhoto             { width: 100%; height: 100%; margin: 0 !important; }
-#cboxTitle             { color: #000 !important; }
-
-/* Change metallic slider defaults to show thumbnails -
-  using #demo2 (page wrapper) to increase this CSS priority */
-#demo2 div.anythingSlider-metallic .thumbNav a { background-image: url(); height: 30px; width: 30px; border: #000 1px solid; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
-#demo2 div.anythingSlider-metallic .thumbNav a span { text-indent: 0; }
-
-/* border around image to show current page */
-#demo2 div.anythingSlider-metallic .thumbNav a:hover,
-#demo2 div.anythingSlider-metallic .thumbNav a.cur { border-color: #fff; }
-/* reposition the start/stop button */
-#demo2 div.anythingSlider-metallic .start-stop { margin-top: 15px; }
-
-/** Demo 2 **/
-#demo2 #slider2        { width: 600px; height: 350px; list-style: none; }
-
-/** Demo 3 **/
-#demo2 #slider3        { width: 500px; height: 400px; list-style: none; }
-
-/* expand image */
-#slider3 img           { width: 100%; height: 100%; position: relative; }
-#slider3 .panel        { position: relative; }
-
-/* position caption close button */
-.caption-top .close,
-.caption-right .close,
-.caption-bottom .close,
-.caption-left .close   { font-size: 80%; cursor: pointer; float: right; display: inline-block; }
-
-/* captions */
-/* set to position: relative here in case javascript is disabled, script sets captions to position: absolute */
-#slider3 .caption-top,
-#slider3 .caption-right,
-#slider3 .caption-bottom,
-#slider3 .caption-left { background: #000; color: #fff; padding: 10px; margin: 0; position: relative; z-index: 10; opacity: .8; filter: alpha(opacity=80); }
-
-/* Top caption - padding is included in the width (480px here, 500px in the script), same for height */
-#slider3 .caption-top  { left: 0; top: 0; width: 480px; height: 30px; }
-
-/* Right caption - padding is included in the width (130px here, 150px in the script), same for height */
-#slider3 .caption-right  { right: 0; bottom: 0; width: 130px; height: 180px;  }
-
-/* Bottom caption  - padding is included in the width (480px here, 500px in the script), same for height */
-#slider3 .caption-bottom { left: 0; bottom: 0; width: 480px; height: 30px; }
-
-/* Left caption - padding is included in the width (130px here, 150px in the script), same for height */
-#slider3 .caption-left   { left: 0; bottom: 0; width: 130px; height: 180px;  }
-
-/******************
-  Expand demo page
- ******************/
-#wrapper1              { width: 100%; height: 300px; margin: 0 auto; }
-#wrapper2              { width: 50%; height: 300px; margin: 0 auto; }
-#expand #slider1,
-#expand #slider2       { width: 100%; height: 300px; list-style: none; }
-body#expand h2,
-body#expand h3         { text-align: center; }
-
-/***************************
-  Video Compatibility table
- ***************************/
-.video-info            { width: 700px; margin: 0 auto; margin-top: 50px; font-size: 18px; }
-.video-info h2         { text-align: center; }
-.video-info ul,
-.video-info li         { margin: 0; }
-.video-info sup        { font-size: 12px; }
-.video-info th.header  { width: 25px; }
-.good                  { background: #080; }
-.bad                   { background: #800; }
-.prob                  { background: #880; }
-.group                 { border: #000 1px solid; }

data/vendor/assets/anything-slider/demos/js/demo.js

@@ -1,132 +0,0 @@
-$(function(){
-
-	$('.accordion').accordion({
-		autoHeight  : false,
-		collapsible : true,
-		active      : false // start compressed
-	});
-
-	$('#slider1')
-	.anythingSlider({
-		toggleControls : true,
-		theme          : 'metallic',
-		navigationFormatter : function(i, panel){
-			return '<img src="demos/images/th-slide-' + ['civil-1', 'env-1', 'civil-2', 'env-2'][i-1] + '.jpg">';
-		}
-	})
-	.find('.panel:not(.cloned) img') // ignore the cloned panels
-		.attr('rel','group')           // add all slider images to a colorbox group
-		.colorbox({
-			width  : '90%',
-			height : '90%',
-			href   : function(){ return $(this).attr('src'); },
-			title  : function(){ return $(this).attr('title') },
-			rel    : 'group'
-		});
-
-	$('#slider2')
-	.anythingSlider({
-		resizeContents      : false,
-		navigationFormatter : function(i, panel){
-			return ['Recipe', 'Quote', 'Image', 'Quote #2', 'Image #2', 'Test'][i - 1];
-		}
-	})
-	.anythingSliderFx({
-		// base FX definitions
-		// '.selector' : [ 'effect(s)', 'distance/size', 'time', 'easing' ] - 'time' and 'easing' are optional parameters
-		'.quoteSlide:first *' : [ 'grow', '24px', '400', 'easeInOutCirc' ],
-		'.quoteSlide:last'    : [ 'top', '500px', '400', 'easeOutElastic' ],
-		'.expand'             : [ 'expand', '10%', '400', 'easeOutBounce' ],
-		'.textSlide h3'       : [ 'top left', '200px', '500', 'easeOutCirc' ],
-		'.textSlide img,.fade': [ 'fade' ],
-		'.textSlide li'       : [ 'listLR' ]
-		/*
-		// for more precise control, use the "in" and "out" definitions
-		// in = the animation that occurs when you slide "in" to a panel
-		,inFx  : {
-			'.textSlide h3'  : { opacity: 1, top  : 0, duration: 400, easing : 'easeOutBounce' },
-			'.textSlide li'  : { opacity: 1, left : 0, duration: 400 },
-			'.textSlide img' : { opacity: 1, duration: 400 },
-			'.quoteSlide'    : { top : 0, duration: 400, easing : 'easeOutElastic' },
-			'.expand'        : { width: '100%', top: '0%', left: '0%', duration: 400, easing : 'easeOutBounce' }
-		},
-		// out = the animation that occurs when you slide "out" of a panel
-		// (it also occurs before the "in" animation) - outFx animation time is 1/2 of inFx time
-		outFx : {
-			'.textSlide h3'      : { opacity: 0, top  : '-100px', duration: 200 },
-			'.textSlide li:odd'  : { opacity: 0, left : '-200px', duration: 200 },
-			'.textSlide li:even' : { opacity: 0, left : '200px',  duration: 200 },
-			'.textSlide img'     : { opacity: 0, duration: 200 },
-			'.quoteSlide:first'  : { top : '-500px', duration: 200 },
-			'.quoteSlide:last'   : { top : '500px', duration: 200 },
-			'.expand'            : { width: '10%', top: '50%', left: '50%', duration: 200 },
-		}
-		*/
-	});
-
-	$('#slider3')
-	.anythingSlider({
-		navigationFormatter : function(i, panel){
-			return ['Top', 'Right', 'Bottom', 'Left'][i - 1];
-		}
-	})
-	.anythingSliderFx({
-		'.caption-top'    : [ 'caption-Top', '50px' ],
-		'.caption-right'  : [ 'caption-Right', '130px', '1000', 'easeOutBounce' ],
-		'.caption-bottom' : [ 'caption-Bottom', '50px' ],
-		'.caption-left'   : [ 'caption-Left', '130px', '1000', 'easeOutBounce' ]
-	})
-	/* use this code to have the caption slide in and out from the bottom with each panel
-	.anythingSliderFx({
-		inFx: {
-			'.caption-top'    : { top: 0, opacity: 0.8, duration: 400 },
-			'.caption-right'  : { right: 0, opacity: 0.8, duration: 1000, easing: 'easeOutBounce' },
-			'.caption-bottom' : { bottom: 0, opacity: 0.8, duration: 400 },
-			'.caption-left'   : { left: 0, opacity: 0.8, duration: 1000, easing: 'easeOutBounce' }
-		},
-		outFx: {
-			'.caption-top'    : { top: -50, opacity: 0, duration: 200 },
-			'.caption-right'  : { right: -150, opacity: 0, duration: 500, easing: 'easeOutBounce' },
-			'.caption-bottom' : { bottom: -50, opacity: 0, duration: 200 },
-			'.caption-left'   : { left: -150, opacity: 0, duration: 500, easing: 'easeOutBounce' }
-		}
-	})
-	*/
-	// add a close button (x) to the caption
-	.find('div[class*=caption]')
-		.css({ position: 'absolute' })
-		.prepend('<span class="close">x</span>')
-		.find('.close').click(function(){
-			var cap = $(this).parent(),
-				ani = { bottom : -50 }; // bottom
-			if (cap.is('.caption-top')) { ani = { top: -50 }; }
-			if (cap.is('.caption-left')) { ani = { left: -150 }; }
-			if (cap.is('.caption-right')) { ani = { right: -150 }; }
-			cap.animate(ani, 400);
-		});
-
-	/* use this code if you only want the caption to appear when you hover over the panel
-	.find('.panel')
-		.find('div[class*=caption]').css({ position: 'absolute' }).end()
-		.hover(function(){ showCaptions( $(this) ) }, function(){ hideCaptions( $(this) ); });
-
-	showCaptions = function(el){
-		var $this = el;
-		if ($this.find('.caption-top').length) { $this.find('.caption-top').show().animate({ top: 0, opacity: 1 }, 400); }
-		if ($this.find('.caption-right').length) { $this.find('.caption-right').show().animate({ right: 0, opacity: 1 }, 400); }
-		if ($this.find('.caption-bottom').length) { $this.find('.caption-bottom').show().animate({ bottom: 0, opacity: 1 }, 400); }
-		if ($this.find('.caption-left').length) { $this.find('.caption-left').show().animate({ left: 0, opacity: 1 }, 400); }
-	};
-	hideCaptions = function(el){
-		var $this = el;
-		if ($this.find('.caption-top').length) { $this.find('.caption-top').stop().animate({ top: -50, opacity: 0 }, 400); }
-		if ($this.find('.caption-right').length) { $this.find('.caption-right').stop().animate({ right: -150, opacity: 0 }, 400); }
-		if ($this.find('.caption-bottom').length) { $this.find('.caption-bottom').stop().animate({ bottom: -50, opacity: 0 }, 400); }
-		if ($this.find('.caption-left').length) { $this.find('.caption-left').stop().animate({ left: -150, opacity: 0 }, 400); }
-	};
-
-	// hide all captions initially
-	hideCaptions( $('#slider3 .panel') );
-*/
-
-});

data/vendor/assets/anything-slider/expand.html

@@ -1,97 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-	<meta charset="utf-8">
-
-	<title>AnythingSlider Expanding Demo</title>
-	<link rel="shortcut icon" href="demos/images/favicon.ico">
-	<link rel="apple-touch-icon" href="demos/images/apple-touch-icon.png">
-
-	<!-- jQuery (required) -->
-	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
-	<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
-
-	<!-- Demo stuff -->
-	<link rel="stylesheet" href="demos/css/page.css">
-
-	<!-- Anything Slider -->
-	<link rel="stylesheet" href="css/anythingslider.css">
-	<script src="js/jquery.anythingslider.js"></script>
-	<script>
-	$(function () {
-		$('#slider1').anythingSlider({
-//			theme : 'metallic',
-			expand       : true,
-			autoPlay     : true
-		});
-
-		$('#slider2').anythingSlider({
-			expand       : true,
-			showMultiple : 2,
-			changeBy     : 2
-		});
-
-	});
-	</script>
-	<!-- Older IE stylesheet, to reposition navigation arrows, added AFTER the theme stylesheet -->
-	<!--[if lte IE 7]>
-	<link rel="stylesheet" href="css/anythingslider-ie.css" type="text/css" media="screen" />
-	<![endif]-->
-</head>
-
-<body id="expand">
-
-	<!-- Links to other demo pages & docs -->
-	<div id="nav">
-		<a href="index.html">Main Demo</a>
-		<a href="simple.html">Simple Demo</a>
-		<a class="current" href="expand.html">Expand Demo</a>
-		<a href="video.html">Video Demo</a>
-		<a href="demos.html">FX Demos</a>
-		<a class="play" href="http://jsfiddle.net/Mottie/VM8XG/">Playground</a>
-		<a class="git" href="https://github.com/ProLoser/AnythingSlider/wiki">Documentation</a>
-		<a class="git" href="http://github.com/ProLoser/AnythingSlider/downloads">Download</a>
-		<a class="issue" href="https://github.com/ProLoser/AnythingSlider/issues">Issues</a>
-	</div>
-	<!-- End Links -->
-
-<h1>Expanding Slider Demo*</h1>
-<h3>* Resize the browser window</h3>
-<br>
-<h2>Full page width</h2>
-
-	<!-- Expanding AnythingSlider 100% width -->
-
-<div id="wrapper1">
-	<ul id="slider1">
-		<li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
-		<li><img src="demos/images/slide-env-1.jpg" alt=""></li>
-		<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
-		<li><img src="demos/images/slide-env-2.jpg" alt=""></li>
-	</ul>
-</div>
-
-	<!-- END AnythingSlider -->
-
-<br><br><br><br>
-
-<h2>Half page width with two images showing</h2>
-	<!-- Expanding AnythingSlider 50% width -->
-
-<div id="wrapper2">
-	<ul id="slider2">
-		<li><img src="demos/images/slide-tele-1.jpg" alt=""></li>
-		<li><img src="demos/images/slide-tele-2.jpg" alt=""></li>
-		<li><img src="demos/images/slide-env-1.jpg" alt=""></li>
-		<li><img src="demos/images/slide-env-2.jpg" alt=""></li>
-		<li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
-		<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
-	</ul>
-</div>
-
-	<!-- END AnythingSlider -->
-	
-</body>
-
-</html>

data/vendor/assets/anything-slider/index.html

@@ -1,470 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-	<meta charset="utf-8">
-
-	<title>AnythingSlider</title>
-	<link rel="shortcut icon" href="demos/images/favicon.ico">
-	<link rel="apple-touch-icon" href="demos/images/apple-touch-icon.png">
-
-	<!-- jQuery (required) -->
-	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
-	<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
-
-	<!-- Anything Slider optional plugins -->
-	<script src="js/jquery.easing.1.2.js"></script>
-	<!-- http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js -->
-	<script src="js/swfobject.js"></script>
-
-	<!-- Demo stuff -->
-	<link rel="stylesheet" href="demos/css/page.css" media="screen">
-
-	<!-- AnythingSlider -->
-	<link rel="stylesheet" href="css/anythingslider.css">
-	<script src="js/jquery.anythingslider.js"></script>
-
-	<!-- AnythingSlider video extension; optional, but needed to control video pause/play -->
-	<script src="js/jquery.anythingslider.video.js"></script>
-
-	<!-- Ideally, add the stylesheet(s) you are going to use here,
-	 otherwise they are loaded and appended to the <head> automatically and will over-ride the IE stylesheet below -->
-	<link rel="stylesheet" href="css/theme-metallic.css">
-	<link rel="stylesheet" href="css/theme-minimalist-round.css">
-	<link rel="stylesheet" href="css/theme-minimalist-square.css">
-	<link rel="stylesheet" href="css/theme-construction.css">
-	<link rel="stylesheet" href="css/theme-cs-portfolio.css">
-
-	<!-- Older IE stylesheet, to reposition navigation arrows, added AFTER the theme stylesheet above -->
-	<!--[if lte IE 7]>
-	<link rel="stylesheet" href="css/anythingslider-ie.css" type="text/css" media="screen" />
-	<![endif]-->
-
-	<script>
-		// Demo functions
-		// **************
-		$(function(){
-
-			// External Link with callback function
-			$("#slide-jump").click(function(){
-				$('#slider2').anythingSlider(4, function(slider){ /* alert('Now on page ' + slider.currentPage); */ });
-				return false;
-			});
-
-			// External Link
-			$("a.muppet").click(function(){
-				$('#slider1').anythingSlider(5);
-				$(document).scrollTop(0); // make the page scroll to the top so you can watch the video
-				return false;
-			});
-
-			// Report Events to console & features list
-			$('#slider1, #slider2').bind('before_initialize initialized swf_completed slideshow_start slideshow_stop slideshow_paused slideshow_unpaused slide_init slide_begin slide_complete', function(e, slider){
-				// show object ID + event (e.g. "slider1: slide_begin")
-				var txt = slider.$el[0].id + ': ' + e.type + ', now on panel #' + slider.currentPage;
-				$('#status').text(txt);
-				if (window.console && window.console.firebug){ console.debug(txt); } // added window.console.firebug to make this work in Opera
-			});
-
-			// Theme Selector (This is really for demo purposes only)
-			var themes = ['minimalist-round','minimalist-square','metallic','construction','cs-portfolio'];
-			$('#currentTheme').change(function(){
-				var theme = $(this).val();
-				$('#slider1').closest('div.anythingSlider')
-					.removeClass( $.map(themes, function(t){ return 'anythingSlider-' + t; }).join(' ') )
-					.addClass('anythingSlider-' + theme);
-				$('#slider1').anythingSlider(); // update slider - needed to fix navigation tabs
-			});
-
-			// Add a slide
-			var imageNumber = 1;
-			$('button.add').click(function(){
-				$('#slider1')
-					.append('<li><img src="demos/images/slide-tele-' + (++imageNumber%2 + 1)  + '.jpg" alt="" /></li>')
-					.anythingSlider(); // update the slider
-			});
-			$('button.remove').click(function(){
-				$('#slider1 > li:not(.cloned):last').remove();
-				$('#slider1').anythingSlider(); // update the slider
-			});
-
-		});
-	</script>
-
-	<script>
-		// Set up Sliders
-		// **************
-		$(function(){
-
-			$('#slider1').anythingSlider({
-				theme           : 'metallic',
-				easing          : 'easeInOutBack',
-				onSlideComplete : function(slider){
-					// alert('Welcome to Slide #' + slider.currentPage);
-				}
-			});
-
-			$('#slider2').anythingSlider({
-				resizeContents      : false, // If true, solitary images/objects in the panel will expand to fit the viewport
-				navigationSize      : 3,     // Set this to the maximum number of visible navigation tabs; false to disable
-				navigationFormatter : function(index, panel){ // Format navigation labels with text
-					return ['Recipe', 'Quote', 'Image', 'Quote #2', 'Image #2'][index - 1];
-				},
-				onSlideComplete: function(slider) {
-					// keep the current navigation tab in view
-					slider.navWindow( slider.currentPage );
-				},
-			});
-
-		});
-	</script>
-</head>
-
-<body id="main">
-
-	<div id="page-wrap">
-
-		<div id="nav">
-			<a class="current" href="index.html">Main Demo</a>
-			<a href="simple.html">Simple Demo</a>
-			<a href="expand.html">Expand Demo</a>
-			<a href="video.html">Video Demo</a>
-			<a href="demos.html">FX Demos</a>
-			<a class="play" href="http://jsfiddle.net/Mottie/VM8XG/">Playground</a>
-			<a class="git" href="https://github.com/ProLoser/AnythingSlider/wiki">Documentation</a>
-			<a class="git" href="http://github.com/ProLoser/AnythingSlider/downloads">Download</a>
-			<a class="issue" href="https://github.com/ProLoser/AnythingSlider/issues">Issues</a>
-		</div>
-
-		<h5><a href="http://css-tricks.com/examples/AnythingSlider/">Original</a> By <a href="http://css-tricks.com">Chris Coyier</a>,
-		expanded upon by <a href="https://github.com/ProLoser/AnythingSlider/wiki/Credits">many others</a></h5>
-
-		<h1>AnythingSlider</h1>
-
-			<div class="themeselector">
-				Theme: 
-				<select id="currentTheme">
-					<option value="default">Default</option>
-					<option value="minimalist-round">Minimalist-Round</option>
-					<option value="minimalist-square">Minimalist-Square</option>
-					<option value="metallic" selected="selected">Metallic</option>
-					<option value="construction">Construction</option>
-					<option value="cs-portfolio">CS-Portfolio</option>
-				</select>
-				<button class="add">Add Slide</button>
-				<button class="remove">Remove Slide</button>
-			</div>
-
-			<br><br>
-
-			<!-- AnythingSlider #1 -->
-			<ul id="slider1">
-
-				<li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
-
-				<li><img src="demos/images/slide-env-1.jpg" alt=""></li>
-
-				<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
-
-				<li><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>
-
-				<li class="panel5">
-					<div>
-						<div class="textSlide">
-						<span class="rightside"><object width="500" height="325"><param name="movie" value="http://www.youtube.com/v/2Qj8PhxSnhg&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/2Qj8PhxSnhg&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="500" height="325"></embed></object></span>
-							<h3>Other Information</h3>
-							<br>
-							<ul>
-								<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet accumsan eros, et iaculis massa fringilla auctor.</li>
-								<li>Proin a mi ante, ut lobortis risus. Sed fringilla augue sed enim faucibus eget aliquam tellus ultricies.</li>
-								<li>Morbi a magna eu ligula scelerisque lobortis vel non nisi.</li>
-								<li>Aliquam condimentum libero eget elit ultrices sit amet ullamcorper felis gravida.</li>
-							</ul>
-						</div>
-					</div>
-				</li>
-
-				<li><img src="demos/images/slide-env-2.jpg" alt=""></li>
-
-			</ul>  <!-- END AnythingSlider #1 -->
-
-			<br><br>
-
-			<!-- AnythingSlider #2 -->
-			<ul id="slider2">
-
-				<li class="panel1">
-					<div>
-						<div class="textSlide">
-							<img src="demos/images/251356.jpg" alt="tomato sandwich" style="float: right; margin: 0 0 2px 10px; width: 250px; height: 250px;" />
-							<h3>Queenie's Killer Tomato Bagel Sandwich</h3>
-							<h4>Ingredients</h4>
-							<ul>
-								<li>1 bagel, split and toasted</li>
-								<li>2 tablespoons cream cheese</li>
-								<li>1 roma (plum) tomatoes, thinly sliced</li>
-								<li>salt and pepper to taste</li>
-								<li>4 leaves fresh basil</li>
-							</ul>
-						</div>
-					</div>
-				</li>
-
-				<li class="panel2">
-					<div class="quoteSlide">
-						<blockquote>In awe I watched the waxing moon ride across the zenith of the heavens like an ambered chariot towards the ebon void of infinite space wherein the tethered belts of Jupiter and Mars hang forever festooned in their orbital majesty. And as I looked at all this I thought... I must put a roof on this lavatory.<br>-- Les Dawson</blockquote>
-					</div>
-				</li>
-
-				<li class="panel3">
-					<img src="demos/images/slide-tele-1.jpg" alt="">
-				</li>
-
-				<li class="panel4">
-					<div class="quoteSlide">
-						<blockquote>Life is conversational. Web design should be the same way. On the web, you&#8217;re talking to someone you&#8217;ve probably never met – so it&#8217;s important to be clear and precise. Thus, well structured navigation and content organization goes hand in hand with having a good conversation.</blockquote>
-						<p> - <a id='perma' href='http://quotesondesign.com/chikezie-ejiasi/'>Chikezie Ejiasi</a></p>
-					</div>
-				</li>
-
-				<li class="panel5">
-					<img src="demos/images/slide-tele-2.jpg" alt="">
-				</li>
-
-			</ul>
-			<!-- END AnythingSlider #2 -->
-
-		<br>
-
-		<h2>Features</h2>
-		<ul>
-			<li>Panels are HTML Content (can be anything).</li>
-			<li>Multiple AnythingSliders allowable per-page.</li>
-			<li>Add or remove content, then easily update the slider.</li>
-			<li>Themes can be applied to individual sliders.</li>
-			<li>Infinite/Continuous sliding (always slides in the direction you are going, even at "last" slide). This can be disabled.</li>
-			<li>Show multiple slides within AnythingSlider at once. <span class="attention">*New in version 1.5.14*</span></li>
-			<li>Expand the slider to fit inside of its container (so it now works with full width or any percentage width fluid layouts). <span class="attention">*New in version 1.5.16*</span></li>
-			<li>Optionally resize each panel (specified per panel in css).</li>
-			<li>Optional Next / Previous Panel Arrows.</li>
-			<li>Use keyboard navigation or tabs that are built and added dynamically (any number of panels).</li>
-			<li>Link to specific slides or go forward or back one slide from static text links - go to <a href="#" id="slide-jump">Slide 4</a> (Quote #2) in second example.</li>
-			<li>Each panel has a hashtag (can link directly to specific panels) or use the ID of an element inside the panel.</li>
-			<li>Optional custom function for <a href="https://github.com/ProLoser/AnythingSlider/wiki/Navigation-Options">formatting navigation text</a>.</li>
-			<li>Auto-playing slideshow (optional feature, can start playing or stopped).</li>
-			<li>Pauses slideshow on hover (optional).</li>
-			<li>Optionally play the slideshow once through, stopping on the last page.</li>
-			<li>Extend the script by binding to custom events, last triggered event: <span id="status">none</span></li>
-			<li>Optional FX extension to add animation to panels elements as they scroll into and out of view. See the <a href="demos.html">demo page</a>.</li>
-			<li>Optional Video extension allows video to pauses playing when not in view and resumes when in view (if files are hosted on the web). This currently works for YouTube, Vimeo and HTML5 video. <span class="attention">*New in version 1.6*</span></li>
-			<li>Works with jQuery 1.4.2+.</li>
-		</ul>
-
-		<h2>Default Options</h2>
-		See the documentation for complete description of these options (<a href="https://github.com/ProLoser/AnythingSlider/wiki/Appearance-Options">appearance</a>, <a href="https://github.com/ProLoser/AnythingSlider/wiki/Navigation-Options">navigation</a>, <a href="https://github.com/ProLoser/AnythingSlider/wiki/Slideshow-Options">slideshow</a>, <a href="https://github.com/ProLoser/AnythingSlider/wiki/Callbacks-and-Events">callbacks &amp; events</a>, <a href="https://github.com/ProLoser/AnythingSlider/wiki/Video">video</a>, <a href="https://github.com/ProLoser/AnythingSlider/wiki/Interactivity-and-Miscellaneous-Options">interativity &amp; misc</a>).<br>
-		<br>
-		<blockquote>
-			<pre>$('#slider').anythingSlider({
-  // Appearance
-  theme               : "default", // Theme name
-  expand              : false,     // If true, the entire slider will expand to fit the parent element
-  resizeContents      : true,      // If true, solitary images/objects in the panel will expand to fit the viewport
-  vertical            : false,     // If true, all panels will slide vertically; they slide horizontally otherwise
-  showMultiple        : false,     // Set this value to a number and it will show that many slides at once
-  easing              : "swing",   // Anything other than "linear" or "swing" requires the easing plugin or jQuery UI
-
-  buildArrows         : true,      // If true, builds the forwards and backwards buttons
-  buildNavigation     : true,      // If true, builds a list of anchor links to link to each panel
-  buildStartStop      : true,      // If true, builds the start/stop button
-
-  appendForwardTo     : null,      // Append forward arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
-  appendBackTo        : null,      // Append back arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
-  appendControlsTo    : null,      // Append controls (navigation + start-stop) to a HTML element (jQuery Object, selector or HTMLNode), if not null
-  appendNavigationTo  : null,      // Append navigation buttons to a HTML element (jQuery Object, selector or HTMLNode), if not null
-  appendStartStopTo   : null,      // Append start-stop button to a HTML element (jQuery Object, selector or HTMLNode), if not null
-
-  toggleArrows        : false,     // If true, side navigation arrows will slide out on hovering & hide @ other times
-  toggleControls      : false,     // if true, slide in controls (navigation + play/stop button) on hover and slide change, hide @ other times
-
-  startText           : "Start",   // Start button text
-  stopText            : "Stop",    // Stop button text
-  forwardText         : "&amp;raquo;", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image)
-  backText            : "&amp;laquo;", // Link text used to move the slider back (hidden by CSS, replace with arrow image)
-  tooltipClass        : "tooltip", // Class added to navigation & start/stop button (text copied to title if it is hidden by a negative text indent)
-
-  // Function
-  enableArrows        : true,      // if false, arrows will be visible, but not clickable.
-  enableNavigation    : true,      // if false, navigation links will still be visible, but not clickable.
-  enableStartStop     : true,      // if false, the play/stop button will still be visible, but not clickable. Previously "enablePlay"
-  enableKeyboard      : true,      // if false, keyboard arrow keys will not work for this slider.
-
-  // Navigation
-  startPanel          : 1,         // This sets the initial panel
-  changeBy            : 1,         // Amount to go forward or back when changing panels.
-  hashTags            : true,      // Should links change the hashtag in the URL?
-  infiniteSlides      : true,      // if false, the slider will not wrap & not clone any panels
-  navigationFormatter : null,      // Details at the top of the file on this use (advanced use)
-  navigationSize      : false,     // Set this to the maximum number of visible navigation tabs; false to disable
-
-  // Slideshow options
-  autoPlay            : false,     // If true, the slideshow will start running; replaces "startStopped" option
-  autoPlayLocked      : false,     // If true, user changing slides will not stop the slideshow
-  autoPlayDelayed     : false,     // If true, starting a slideshow will delay advancing slides; if false, the slider will immediately advance to the next slide when slideshow starts
-  pauseOnHover        : true,      // If true & the slideshow is active, the slideshow will pause on hover
-  stopAtEnd           : false,     // If true & the slideshow is active, the slideshow will stop on the last page. This also stops the rewind effect when infiniteSlides is false.
-  playRtl             : false,     // If true, the slideshow will move right-to-left
-
-  // Times
-  delay               : 3000,      // How long between slideshow transitions in AutoPlay mode (in milliseconds)
-  resumeDelay         : 15000,     // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
-  animationTime       : 600,       // How long the slideshow transition takes (in milliseconds)
-  delayBeforeAnimate  : 0,         // How long to pause slide animation before going to the desired slide (used if you want your "out" FX to show).
-
-  // Callbacks
-  onBeforeInitialize  : function(e, slider) {}, // Callback before the plugin initializes
-  onInitialized       : function(e, slider) {}, // Callback when the plugin finished initializing
-  onShowStart         : function(e, slider) {}, // Callback on slideshow start
-  onShowStop          : function(e, slider) {}, // Callback after slideshow stops
-  onShowPause         : function(e, slider) {}, // Callback when slideshow pauses
-  onShowUnpause       : function(e, slider) {}, // Callback when slideshow unpauses - may not trigger properly if user clicks on any controls
-  onSlideInit         : function(e, slider) {}, // Callback when slide initiates, before control animation
-  onSlideBegin        : function(e, slider) {}, // Callback before slide animates
-  onSlideComplete     : function(slider) {},    // Callback when slide completes; this is the only callback without an event "e" variable
-
-  // Interactivity
-  clickForwardArrow   : "click",         // Event used to activate forward arrow functionality (e.g. add jQuery mobile's "swiperight")
-  clickBackArrow      : "click",         // Event used to activate back arrow functionality (e.g. add jQuery mobile's "swipeleft")
-  clickControls       : "click focusin", // Events used to activate navigation control functionality
-  clickSlideshow      : "click",         // Event used to activate slideshow play/stop button
-
-  // Video
-  resumeOnVideoEnd    : true,      // If true & the slideshow is active & a supported video is playing, it will pause the autoplay until the video is complete
-  addWmodeToObject    : "opaque",  // If your slider has an embedded object, the script will automatically add a wmode parameter with this setting
-  isVideoPlaying      : function(base){ return false; } // return true if video is playing or false if not - used by video extension
-});</pre>
-		</blockquote>
-
-		<h2>Known Issues</h2>
-		<ul>
-			<li>Please refer to the <a href="https://github.com/ProLoser/AnythingSlider/wiki">documentation</a>.</li>
-		</ul>
-
-		<h2>Changelog</h2>
-
-		Only the latest versions will be shown here. See the <a href="https://github.com/ProLoser/AnythingSlider/wiki/Change-Log">full change log here</a>.<br>
-		<br>
-
-		<h3>Version 1.7.13</h3>
-		<ul>
-			<li>Updated the plugin so that if panel sizes aren't defined in the css, it will default to the slider size. This should fix the problem with the slider initializing with a zero width or height.</li>
-			<li>Added a "targetPage" callback variable which contains the targeted page number; "$targetPage" still contains the jQuery object of the targeted page. This can be used in event or callbacks:
-				<pre><code>$('#slider').bind('slide_begin', function(event, slider){
-  console.debug( 'The target page is #' + slider.targetPage );
-  console.debug( 'The title of the target page is: ' + slider.$targetPage.find('h1').text() );
-  // Do something else
-});</code></pre>Note that the targetPage variable contains the correct page before the slider animates, whereas "slider.currentPage" contains the current slide and is not updated until after the animation completes. See the "<a href="https://github.com/ProLoser/AnythingSlider/wiki/Callbacks-and-Events">Callback Arguments</a>" section in the wiki documents for a full list.</li>
-		</ul>
-
-		<h3>Version 1.7.12</h3>
-		<ul>
-			<li>Clicking links inside of a slide when mulitple slides are showing will no longer change the slider. Fix for <a href="https://github.com/ProLoser/AnythingSlider/issues/187">issue #187</a>.</li>
-			<li>Updated how the navigation width was calculated when <code>navigationSize</code> is set so the <a href="https://github.com/Mottie/AnythingSlider-Themes">new tabs-light and tabs-dark themes</a> tab widths are calculated a bit more accurately - but it's still not perfect.</li>
-		</ul>
-
-		<h3>Version 1.7.11.5</h3>
-		<ul>
-			<li>Updated the AnythingSlider css file to restore the overflow setting after the slider has initialized. Fix for <a href="https://github.com/ProLoser/AnythingSlider/issues/183">issue #183</a>. Thanks sawmac!</li>
-			<li>This fixes a problem created in the previous update.</li>
-		</ul>
-
-		<h3>Version 1.7.11.4</h3>
-		<ul>
-			<li>Updated the AnythingSlider css file to include the flash of unstyled content (FOUC) method 1 from the <a href="https://github.com/ProLoser/AnythingSlider/wiki/FAQ">FAQ page</a></li>
-		</ul>
-
-		<h3>Version 1.7.11.3</h3>
-		<ul>
-			<li>Updated the FX extension
-				<ul>
-					<li>When the <code>animationTime</code> is set to zero, the "fade" out effect occurred immediately. The fx extension has been updated to use the default time instead.</li>
-					<li>Updated the <a href="http://jsfiddle.net/Mottie/Cm479/2144/">fade FX demo</a> to use <code>delayBeforeAnimate</code> to allow the current image to fade out before transitioning.</li>
-				</ul>
-			</li>
-		</ul>
-
-		<h3>Version 1.7.11.2</h3>
-		<ul>
-			<li>Added a local copy of jQuery with fallback.</li>
-		</ul>
-
-		<h3>Version 1.7.11.1</h3>
-		<ul>
-			<li>Fixed a problem with the "fade" fx. See <a href="https://github.com/ProLoser/AnythingSlider/issues/171">issue #171</a>.
-				<ul>
-					<li>In older versions, the size parameter was ignored; but with the changes in 1.7.11, it became required and now follows the same format as all of the other effects.</li>
-					<li>The value is actually an opacity to use and must be included if adding a time or easing effect.
-						<pre><code>// '.selector' : [ 'fade', 'opacity', 'time', 'easing' ]
-'.selector' : [ 'fade', '', 500, 'easeInOutCirc' ] // opacity number between 0 and 1 (default is 1, so using '' will set the value to 1)
-</code></pre>
-					</li>
-				</ul>
-			</li>
-		</ul>
-
-		<h3>Version 1.7.11</h3>
-		<ul>
-			<li>Updated the FX extension:
-				<ul>
-					<li>Added <code>grow</code> option that allows for growing text - like in the movies! *popcorn*</li>
-					<li>Allow ability to set multiple sizes for the grow and expand fx by simply separating the two values with a comma. If only one value is present, the fx will use that value (left side of the comma) as described below.
-						<pre><code>// '.selector' : [ 'effect(s)', 'distance/size', 'time', 'easing' ]
-'.selector' : [ 'grow', '24px, 80px' ]   // 'original text size, fx size'
-'.selector' : [ 'expand', '10%, 100%' ], // 'fx size, original size'</code></pre>
-					</li>
-					<li>The difference between grow and expand is that grow changes the font size whereas expand changes the width and height.</li>
-					<li>Added ability to set the <code>fade</code> ending opacity.
-						<pre><code>// '.selector' : [ 'effect(s)', 'distance/size', 'time', 'easing' ]
-'.selector' : [ 'fade', '0.8' ] // opacity number between 0 and 1
-</code></pre>
-					</li>
-					<li>Changed the intro fx from being initialized immediately to occurring when the page has finished loading.</li>
-				</ul>
-			</li>
-			<li>Fixed a problem that occurs when <code>resizeContents</code> is false and the slide content has padding and/or margins.</li>
-		</ul>
-
-		<h3>Version 1.7.10</h3>
-		<ul>
-			<li>Fixed a problem where setting the <code>animationTime</code> to zero would not trigger any callbacks, thus preventing the FX extension from working.</li>
-		</ul>
-
-		<h3>Version 1.7.9</h3>
-		<ul>
-			<li>Added <code>vertical</code> option
-				<ul>
-					<li>When true, all of the content in the slider will scroll vertically.</li>
-					<li>Included up &amp; down keyboard keys to navigate, but only when the vertical option is true.</li>
-					<li>The <code>showMultiple</code> option does not currently work when the content is vertical. I may fix this in future versions.</li>
-					<li>Thanks to Caroline-Elisa for the suggestion - in <a href="https://github.com/ProLoser/AnythingSlider/issues/166">issue #166</a>.</li>
-				</ul>
-			</li>
-			<li>AnythingSlider will now accept an ID or classname to target a specific panel in the slider. Callbacks can also be included. Here is an example:
-				<pre><code>// original method
-$('#slider').anythingSlider(4);
-
-// additional method
-$('#slider').anythingSlider('#quotes');</code></pre>
-			</li>
-			<li>Updated FX extension
-				<ul>
-					<li>Fixed a problem with the "expand" effect in the FX extension where the height would not change in some browsers.</li>
-					<li>Added <code>outFxBind</code> and <code>inFxBind</code> options which set which AnythingSlider callbacks are used. This might be more useful if binding FX on slide begin so the element is already animating when the slide comes into view.</li>
-				</ul>
-			</li>
-		</ul>
-
-	</div>
-
-</body>
-
-</html>