Permalink
Browse files

Initial release of FlexSlider v1.0

  • Loading branch information...
1 parent 4359bc5 commit 8bc6a7c248992dcecf891dfaae7d542d223dae40 @tylerxo tylerxo committed Aug 14, 2011
View
@@ -0,0 +1,22 @@
+ Copyright (c) 2011 Tyler Smith
+
+ Permission is hereby granted, free of charge, to any person
+ obtaining a copy of this software and associated documentation
+ files (the "Software"), to deal in the Software without
+ restriction, including without limitation the rights to use,
+ copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the
+ Software is furnished to do so, subject to the following
+ conditions:
+
+ The above copyright notice and this permission notice shall be
+ included in all copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+ OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+ HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+ OTHER DEALINGS IN THE SOFTWARE.
View
@@ -7,5 +7,5 @@ Copyright (c) 2011 Tyler Smith
Changelog:
-v1.0 2011-08-16 (Release)
+v1.0 2011-08-14 (Release)
- Free to use under the MIT license
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -0,0 +1,26 @@
+/* Reset Styles
+***********************/
+html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
+body {line-height: 1;}
+ol, ul {list-style: none;}
+blockquote, q {quotes: none;}
+blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
+table {border-collapse: collapse; border-spacing: 0;}
+strong {font-weight: bold;}
+em {font-style: italic;}
+
+body {background: url(body.png) repeat left top; font-family: 'Georgia', 'Arial', sans-serif;}
+#container {width: 80%; max-width: 800px; margin: 0 auto;}
+
+h2 {padding: 20px 0 30px; font-size: 18px; line-height: 22px; font-style: italic;}
+h2 a {text-decoration: none; color: #427f9e;}
+h2 a:hover {border-bottom: 1px dotted #427f9e;}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta content="charset=utf-8">
+ <title>FlexSlider Demo</title>
+
+ <!-- FlexSlider pieces -->
+ <link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+ <script src="jquery.flexslider.js"></script>
+
+ <!-- Includes for this demo -->
+ <link rel="stylesheet" href="demo-stuff/demo.css" type="text/css" media="screen" />
+
+ <!-- Hook up the FlexSlider -->
+ <script type="text/javascript">
+ $(window).load(function() {
+ $('.flexslider').flexslider();
+ });
+ </script>
+</head>
+<body>
+ <div id="container">
+ <h2>FlexSlider Demo - <a href="http://flex.madebymufffin.com">Visit the homepage for documentation details</a></h2>
+
+ <!--=============================
+ Markup for FADE animation
+ =================================-->
+ <div class="flexslider">
+ <ul class="slides">
+ <li>
+ <img src="demo-stuff/inacup_samoa.jpg" />
+ <p class="flex-caption">Captions and cupcakes. Winning combination.</p>
+ </li>
+ <li>
+ <a href="#"><img src="demo-stuff/inacup_pumpkin.jpg" /></a>
+ <p class="flex-caption">This image is wrapped in a link!</p>
+ </li>
+ <li>
+ <img src="demo-stuff/inacup_donut.jpg" />
+ </li>
+ <li>
+ <img src="demo-stuff/inacup_vanilla.jpg" />
+ </li>
+ </ul>
+ </div>
+
+ <!--============================
+ Markup for SLIDE animation
+ You need to add an extra container element for the overflow: hidden property on the slider
+
+ Update your flexslider() function with the following properties:
+
+ <script type="text/javascript">
+ $(window).load(function() {
+ $('.flexslider').flexslider({
+ animation: "slide",
+ controlsContainer: ".flexslider-container"
+ });
+ });
+ </script>
+ =================================
+ <div class="flexslider-container">
+ <div class="flexslider">
+ <ul class="slides">
+ <li>
+ <img src="demo-stuff/inacup_samoa.jpg" />
+ <p class="flex-caption">Captions and cupcakes. Winning combination.</p>
+ </li>
+ <li>
+ <a href="#"><img src="demo-stuff/inacup_pumpkin.jpg" /></a>
+ <p class="flex-caption">This image is wrapped in a link!</p>
+ </li>
+ <li>
+ <img src="demo-stuff/inacup_donut.jpg" />
+ </li>
+ <li>
+ <img src="demo-stuff/inacup_vanilla.jpg" />
+ </li>
+ </ul>
+ </div>
+ </div>
+ ==================================-->
+ </div>
+</body>
+</html>
View
@@ -0,0 +1,39 @@
+/*
+ * jQuery FlexSlider v1.0 (Release)
+ * http://flex.madebymufffin.com
+ *
+ * Copyright 2011, Tyler Smith
+ * Free to use under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ */
+
+/* FlexSlider Necessary Styles
+*********************************/
+.flexslider {width: 100%; margin: 0; padding: 0;}
+.flexslider .slides li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */
+.flexslider .slides img {max-width: 100%; display: block;}
+
+
+/* FlexSlider Default Theme
+*********************************/
+.flexslider {background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;}
+.flexslider .slides li {position: relative;}
+/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
+.flexslider-container {position: relative;}
+
+
+/* Caption style */
+.flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 15px; line-height: 18px;}
+
+/* Direction Nav */
+.flex-direction-nav li a {width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(theme/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px;} /* set negative margin-top equal to half the height on the directional-nav for perfect vertical centering */
+.flex-direction-nav li a.next {background-position: -52px 0; right: -21px;}
+.flex-direction-nav li a.prev {background-position: 0 0; left: -21px;}
+
+/* Control Nav */
+.flex-control-nav {margin-left: -31px; position: absolute; bottom: -30px; left: 50%;} /* set negative margin-left equal to half the width on the control-nav for perfect centering */
+.flex-control-nav li {margin: 0 0 0 5px; float: left;}
+.flex-control-nav li:first-child {margin: 0;}
+.flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(theme/bg_control_nav.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;}
+.flex-control-nav li a:hover {background-position: 0 -13px;}
+.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}
@@ -0,0 +1,9 @@
+/*
+ * jQuery FlexSlider v1.0 (Release)
+ * http://flex.madebymufffin.com
+ *
+ * Copyright 2011, Tyler Smith
+ * Free to use under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ */
+(function(a){a.fn.extend({flexslider:function(q){var h={animation:"fade",slideshow:true,slideshowSpeed:7000,animationDuration:500,directionNav:true,controlNav:true,keyboardNav:true,prevText:"Previous",nextText:"Next",slideToStart:0,pauseOnAction:true,pauseOnHover:false,controlsContainer:""};var q=a.extend(h,q),d=a(this),c=a(".slides",d),b=a(".slides li",d),g=false,m=q.slideToStart;if(q.animation.toLowerCase()=="slide"){b.show();d.css({overflow:"hidden"});b.width(d.width()).css({"float":"left"});c.width((b.length*d.width())+200)}else{b.hide().eq(m).fadeIn(400)}function o(i){if(!g){g=true;if(q.animation.toLowerCase()=="slide"){c.animate({"margin-left":(-1*i)*d.width()+"px"},q.animationDuration,function(){g=false;m=i})}else{d.css({minHeight:b.eq(m).height()});b.eq(m).fadeOut(q.animationDuration,function(){b.eq(i).fadeIn(q.animationDuration,function(){g=false;m=i});d.css({minHeight:"inherit"})})}}}if(q.controlNav){if(b.size()>1){var e=a('<ol class="flex-control-nav"></ol>');var k=1;for(var l=0;l<b.size();l++){e.append("<li><a>"+k+"</a></li>");k++}if(a(q.controlsContainer).length>0){a(q.controlsContainer).append(e)}else{d.append(e)}}e=a(".flex-control-nav li a");e.eq(m).addClass("active");e.click(function(j){j.preventDefault();if(a(this).hasClass("active")||g){return}else{e.removeClass("active");a(this).addClass("active");var i=e.index(a(this));o(i);if(q.pauseOnAction){clearInterval(n)}}})}if(q.directionNav){if(a(q.controlsContainer).length>0){a(q.controlsContainer).append(a('<ul class="flex-direction-nav"><li><a class="prev" href="#">'+q.prevText+'</a></li><li><a class="next" href="#">'+q.nextText+"</a></li></ul>"))}else{d.append(a('<ul class="flex-direction-nav"><li><a class="prev" href="#">'+q.prevText+'</a></li><li><a class="next" href="#">'+q.nextText+"</a></li></ul>"))}a(".flex-direction-nav li a").click(function(i){i.preventDefault();if(g){return}else{if(a(this).hasClass("next")){var j=(m==b.length-1)?0:m+1}else{var j=(m==0)?b.length-1:m-1}if(q.controlNav){e.removeClass("active");e.eq(j).addClass("active")}o(j);if(q.pauseOnAction){clearInterval(n)}}})}if(q.keyboardNav){a(document).keyup(function(i){if(g){return}else{if(i.keyCode!=39&&i.keyCode!=37){return}else{if(i.keyCode==39){var j=(m==b.length-1)?0:m+1}else{if(i.keyCode==37){var j=(m==0)?b.length-1:m-1}}if(q.controlNav){e.removeClass("active");e.eq(j).addClass("active")}o(j);if(q.pauseOnAction){clearInterval(n)}}}})}if(q.slideshow){var n;function p(){if(g){return}else{var i=(m==b.length-1)?0:m+1;if(q.controlNav){e.removeClass("active");e.eq(i).addClass("active")}o(i)}}if(q.pauseOnHover){d.hover(function(){clearInterval(n)},function(){n=setInterval(p,q.slideshowSpeed)})}if(b.length>1){n=setInterval(p,q.slideshowSpeed)}}if(q.animation.toLowerCase()=="slide"){var f;a(window).resize(function(){b.width(d.width());c.width((b.length*d.width())+200);clearTimeout(f);f=setTimeout(function(){o(m)},300)})}}})})(jQuery);
Oops, something went wrong.

0 comments on commit 8bc6a7c

Please sign in to comment.