spree_slider 1.0.0

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

@@ -0,0 +1,148 @@
+/********************
+  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

@@ -0,0 +1,132 @@
+$(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') );
+*/
+
+});