creating some testing docs and refined buttons and tabs
This commit is contained in:
Dave Gamache
parent
e9ba01df76
commit
e4ff97ce7a
@ -32,15 +32,17 @@
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
padding: 3px 8px;
|
||||
padding: 3px 8px 4px;
|
||||
position: relative;
|
||||
right: -8px;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px; }
|
||||
/*
|
||||
nav ul li a:hover {
|
||||
color: #fff;
|
||||
background: #222; }
|
||||
background: #333; }
|
||||
*/
|
||||
nav .button {
|
||||
float: right; }
|
||||
header h1 {
|
||||
@ -116,7 +118,7 @@
|
||||
|
||||
#viewOnGithub {
|
||||
margin-bottom: 20px;
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
display: block; }
|
||||
|
||||
|
||||
@ -175,9 +175,8 @@
|
||||
<hr />
|
||||
<div class="doc-section" id="buttons">
|
||||
<h3>Buttons</h3>
|
||||
<p>Button are intended for action and thus should have appropriate weight. The standard buttons are given that weight by being strong and dark, but they could just as easily be colorful.</p>
|
||||
<a href="#" class="button">Save Now</a>
|
||||
<a href="#" class="secondary button">Dismiss Changes</a>
|
||||
<p>Buttons are intended for action and thus should have appropriate weight. The standard button is given that weight with a little bit of depth and a strong hover.</p>
|
||||
<a href="#" class="button">Click Me For Action</a>
|
||||
<div class="hidden-code">
|
||||
<a href="">Code Example</a>
|
||||
<!-- <script type="text/javascript" src="http://snipt.net/embed/c9ba7e6bef73adc206a1f2f156336b1f"></script> -->
|
||||
@ -241,8 +240,7 @@
|
||||
<span>Regular Radio</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<!-- <input type="text" id="placeholderInput" placeholder="Placeholder Input" /> -->
|
||||
<button type="submit">Submit Form</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -125,30 +125,45 @@
|
||||
/* #Buttons
|
||||
================================================== */
|
||||
|
||||
.button {
|
||||
background: #222;
|
||||
a.button,
|
||||
button {
|
||||
background: #eee; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
|
||||
background: -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
|
||||
background: linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
|
||||
border: 1px solid #aaa;
|
||||
border-top: 1px solid #ccc;
|
||||
border-left: 1px solid #ccc;
|
||||
padding: 4px 12px;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
color: #444;
|
||||
display: inline-block;
|
||||
padding: 9px 34px 11px;
|
||||
color: #fff !important;
|
||||
text-decoration: none;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px rgba(255, 255, 255, .75);
|
||||
cursor: pointer;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
border: none;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
line-height: 21px; }
|
||||
|
||||
.button.square {
|
||||
-moz-border-radius: none;
|
||||
-webkit-border-radius: none;
|
||||
border-radius: none; }
|
||||
a.button:hover,
|
||||
button:hover {
|
||||
color: #222;
|
||||
background: #eee; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */
|
||||
background: -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */
|
||||
background: linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */
|
||||
border: 1px solid #888;
|
||||
border-top: 1px solid #aaa;
|
||||
border-left: 1px solid #aaa; }
|
||||
|
||||
.button.full-width {
|
||||
width: 100%;
|
||||
@ -156,19 +171,6 @@
|
||||
padding-right: 0 !important;
|
||||
text-align: center; }
|
||||
|
||||
/* Sizes ---------- */
|
||||
.small.button { font-size: 11px; padding: 8px 20px 10px; }
|
||||
.medium.button { font-size: 12px; }
|
||||
.large.button { font-size: 18px; padding: 11px 48px 13px; }
|
||||
|
||||
/* Types ---------- */
|
||||
.secondary.button { background-color: #aaa; font-size: 11px; }
|
||||
|
||||
/* Hovers ---------- */
|
||||
.button:hover { background-color: #000; }
|
||||
.secondary.button:hover { background-color: #777; }
|
||||
|
||||
|
||||
|
||||
/* #Tabs (activate in app.js)
|
||||
================================================== */
|
||||
@ -189,7 +191,7 @@
|
||||
text-decoration: none;
|
||||
width: auto;
|
||||
height: 29px;
|
||||
padding: 0px 16px;
|
||||
padding: 0px 20px;
|
||||
line-height: 30px;
|
||||
border: solid 1px #ddd;
|
||||
border-width: 1px 0 0 1px;
|
||||
@ -259,7 +261,8 @@
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
background: #fff; }
|
||||
input:focus {
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
border: 1px solid #aaa;
|
||||
color: #444;
|
||||
-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
|
||||
|
||||
88
src/stylesheets/skeleton.css
vendored
88
src/stylesheets/skeleton.css
vendored
@ -52,6 +52,9 @@ which applies to mobile as well.*/
|
||||
.container .fifteen.columns { width: 880px; }
|
||||
.container .sixteen.columns { width: 940px; }
|
||||
|
||||
.container .one-third.column { width: 300px; }
|
||||
.container .two-thirds.column { width: 620px; }
|
||||
|
||||
/* Offsets */
|
||||
.container .offset-by-one { padding-left: 60px; }
|
||||
.container .offset-by-two { padding-left: 120px; }
|
||||
@ -71,80 +74,6 @@ which applies to mobile as well.*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* #Responsive: Fluid Grid for Downscaling
|
||||
================================================== */
|
||||
|
||||
/* NOTE: Cannot be used with nested columns. */
|
||||
|
||||
/*
|
||||
@media screen and (min-device-width: 789px) and (max-width: 959px) {
|
||||
.fluid960.container {
|
||||
width: 100%;
|
||||
min-width: 320px; }
|
||||
.fluid960.container .column,
|
||||
.fluid960.container .columns { margin-left: 1%; margin-right: 1%; }
|
||||
|
||||
.fluid960.container .one.column { width: 4.25%; }
|
||||
.fluid960.container .two.columns { width: 10.5%; }
|
||||
.fluid960.container .three.columns { width: 16.75%; }
|
||||
.fluid960.container .four.columns { width: 23%; }
|
||||
.fluid960.container .five.columns { width: 29.25%; }
|
||||
.fluid960.container .six.columns { width: 35.5%; }
|
||||
.fluid960.container .seven.columns { width: 41.75%; }
|
||||
.fluid960.container .eight.columns { width: 48%; }
|
||||
.fluid960.container .nine.columns { width: 54.25%; }
|
||||
.fluid960.container .ten.columns { width: 60.5%; }
|
||||
.fluid960.container .eleven.columns { width: 66.75%; }
|
||||
.fluid960.container .twelve.columns { width: 73%; }
|
||||
.fluid960.container .thirteen.columns { width: 79.25%; }
|
||||
.fluid960.container .fourteen.columns { width: 85.5%; }
|
||||
.fluid960.container .fifteen.columns { width: 91.75%; }
|
||||
.fluid960.container .sixteen.columns { width: 98%; }
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
/* #Responsive: Fully Fluid Grid
|
||||
================================================== */
|
||||
|
||||
/* NOTE: Cannot be used with nested columns. */
|
||||
|
||||
/*
|
||||
.fluid.container {
|
||||
width: 100%;
|
||||
min-width: 320px; }
|
||||
.fluid.container .column,
|
||||
.fluid.container .columns { margin-left: 1%; margin-right: 1%; }
|
||||
|
||||
.fluid.container .one.column { width: 4.25%; }
|
||||
.fluid.container .two.columns { width: 10.5%; }
|
||||
.fluid.container .three.columns { width: 16.75%; }
|
||||
.fluid.container .four.columns { width: 23%; }
|
||||
.fluid.container .five.columns { width: 29.25%; }
|
||||
.fluid.container .six.columns { width: 35.5%; }
|
||||
.fluid.container .seven.columns { width: 41.75%; }
|
||||
.fluid.container .eight.columns { width: 48%; }
|
||||
.fluid.container .nine.columns { width: 54.25%; }
|
||||
.fluid.container .ten.columns { width: 60.5%; }
|
||||
.fluid.container .eleven.columns { width: 66.75%; }
|
||||
.fluid.container .twelve.columns { width: 73%; }
|
||||
.fluid.container .thirteen.columns { width: 79.25%; }
|
||||
.fluid.container .fourteen.columns { width: 85.5%; }
|
||||
.fluid.container .fifteen.columns { width: 91.75%; }
|
||||
.fluid.container .sixteen.columns { width: 98%; }
|
||||
*/
|
||||
|
||||
|
||||
/* #Responsive: Go Mobile
|
||||
================================================== */
|
||||
|
||||
/* NOTE: These styles mimic mobile styles in browser */
|
||||
|
||||
|
||||
/* #Responsive: iPad Portrait
|
||||
================================================== */
|
||||
|
||||
@ -174,6 +103,9 @@ which applies to mobile as well.*/
|
||||
.container .fifteen.columns { width: 700px; }
|
||||
.container .sixteen.columns { width: 748px; }
|
||||
|
||||
.container .one-third.column { width: 236px; }
|
||||
.container .two-thirds.column { width: 492px; }
|
||||
|
||||
/* Offsets */
|
||||
.container .offset-by-one { padding-left: 48px; }
|
||||
.container .offset-by-two { padding-left: 96px; }
|
||||
@ -217,7 +149,9 @@ which applies to mobile as well.*/
|
||||
.container .thirteen.columns,
|
||||
.container .fourteen.columns,
|
||||
.container .fifteen.columns,
|
||||
.container .sixteen.columns { width: 300px; }
|
||||
.container .sixteen.columns,
|
||||
.container .one-third.column,
|
||||
.container .two-thirds.column { width: 300px; }
|
||||
|
||||
/* Offsets */
|
||||
.container .offset-by-one,
|
||||
@ -263,7 +197,9 @@ which applies to mobile as well.*/
|
||||
.container .thirteen.columns,
|
||||
.container .fourteen.columns,
|
||||
.container .fifteen.columns,
|
||||
.container .sixteen.columns { width: 420px; }
|
||||
.container .sixteen.columns,
|
||||
.container .one-third.column,
|
||||
.container .two-thirds.column { width: 420px; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
92
test-one.html
Normal file
92
test-one.html
Normal file
@ -0,0 +1,92 @@
|
||||
<!doctype html>
|
||||
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
|
||||
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
|
||||
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
|
||||
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
|
||||
<head>
|
||||
|
||||
<!-- Basic Page Needs
|
||||
================================================== -->
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- Force Latest IE rendering engine -->
|
||||
<title>Skeleton: Test One</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Mobile Specific Metas
|
||||
================================================== -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
|
||||
|
||||
<!-- CSS
|
||||
================================================== -->
|
||||
<link rel="stylesheet" href="src/stylesheets/base.css">
|
||||
<link rel="stylesheet" href="src/stylesheets/skeleton.css">
|
||||
<link rel="stylesheet" href="test/test-one/main.css">
|
||||
<link rel="stylesheet" href="test/test-one/nivo-slider.css">
|
||||
<!--[if lt IE9]><link rel="stylesheet" href="css/ie.css"><![endif]-->
|
||||
|
||||
<!-- Favicon
|
||||
================================================== -->
|
||||
<link rel="shortcut icon" href="src/images/favicon.ico">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="sixteen columns">
|
||||
<div class="three columns alpha logo">
|
||||
<h4>Logo Stuff</h4>
|
||||
</div>
|
||||
<div class="thirteen omega columns">
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Plans</a></li>
|
||||
<li><a href="">Tour</a></li>
|
||||
<li><a href="">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="sixteen columns">
|
||||
<div id="slider">
|
||||
<img src="test/test-one/slider.jpg" alt="slider" />
|
||||
<img src="test/test-one/slider-2.jpg" alt="slider" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="one-third column">
|
||||
<img src="" alt="" />
|
||||
<h5>Title</h5>
|
||||
<p>Skeleton has a familiar, lightweight 960 grid as it's base, but elegantly scales down to downsized browser windows, tablets, mobile phones (in landscape and portrait). Go ahead, resize this page!</p>
|
||||
</div>
|
||||
<div class="one-third column">
|
||||
<img src="" alt="" />
|
||||
<h5>Title</h5>
|
||||
<p>Skeleton has a familiar, lightweight 960 grid as it's base, but elegantly scales down to downsized browser windows, tablets, mobile phones (in landscape and portrait). Go ahead, resize this page!</p>
|
||||
</div>
|
||||
<div class="one-third column">
|
||||
<img src="" alt="" />
|
||||
<h5>Title</h5>
|
||||
<p>Skeleton has a familiar, lightweight 960 grid as it's base, but elegantly scales down to downsized browser windows, tablets, mobile phones (in landscape and portrait). Go ahead, resize this page!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- JS
|
||||
================================================== -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
|
||||
<script>window.jQuery || document.write("<script src='src/javascripts/jquery-1.5.1.min.js'>\x3C/script>")</script>
|
||||
<script src="test/test-one/jquery.nivo.slider.pack.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
$(window).load(function() {
|
||||
$('#slider').nivoSlider();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
67
test/test-one/jquery.nivo.slider.pack.js
Executable file
67
test/test-one/jquery.nivo.slider.pack.js
Executable file
@ -0,0 +1,67 @@
|
||||
/*
|
||||
* jQuery Nivo Slider v2.5.1
|
||||
* http://nivo.dev7studios.com
|
||||
*
|
||||
* Copyright 2011, Gilbert Pellegrom
|
||||
* Free to use and abuse under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*
|
||||
* March 2010
|
||||
*/
|
||||
|
||||
(function($){var NivoSlider=function(element,options){var settings=$.extend({},$.fn.nivoSlider.defaults,options);var vars={currentSlide:0,currentImage:'',totalSlides:0,randAnim:'',running:false,paused:false,stop:false};var slider=$(element);slider.data('nivo:vars',vars);slider.css('position','relative');slider.addClass('nivoSlider');var kids=slider.children();kids.each(function(){var child=$(this);var link='';if(!child.is('img')){if(child.is('a')){child.addClass('nivo-imageLink');link=child;}
|
||||
child=child.find('img:first');}
|
||||
var childWidth=child.width();if(childWidth==0)childWidth=child.attr('width');var childHeight=child.height();if(childHeight==0)childHeight=child.attr('height');if(childWidth>slider.width()){slider.width(childWidth);}
|
||||
if(childHeight>slider.height()){slider.height(childHeight);}
|
||||
if(link!=''){link.css('display','none');}
|
||||
child.css('display','none');vars.totalSlides++;});if(settings.startSlide>0){if(settings.startSlide>=vars.totalSlides)settings.startSlide=vars.totalSlides-1;vars.currentSlide=settings.startSlide;}
|
||||
if($(kids[vars.currentSlide]).is('img')){vars.currentImage=$(kids[vars.currentSlide]);}else{vars.currentImage=$(kids[vars.currentSlide]).find('img:first');}
|
||||
if($(kids[vars.currentSlide]).is('a')){$(kids[vars.currentSlide]).css('display','block');}
|
||||
slider.css('background','url("'+vars.currentImage.attr('src')+'") no-repeat');slider.append($('<div class="nivo-caption"><p></p></div>').css({display:'none',opacity:settings.captionOpacity}));var processCaption=function(settings){var nivoCaption=$('.nivo-caption',slider);if(vars.currentImage.attr('title')!=''){var title=vars.currentImage.attr('title');if(title.substr(0,1)=='#')title=$(title).html();if(nivoCaption.css('display')=='block'){nivoCaption.find('p').fadeOut(settings.animSpeed,function(){$(this).html(title);$(this).fadeIn(settings.animSpeed);});}else{nivoCaption.find('p').html(title);}
|
||||
nivoCaption.fadeIn(settings.animSpeed);}else{nivoCaption.fadeOut(settings.animSpeed);}}
|
||||
processCaption(settings);var timer=0;if(!settings.manualAdvance&&kids.length>1){timer=setInterval(function(){nivoRun(slider,kids,settings,false);},settings.pauseTime);}
|
||||
if(settings.directionNav){slider.append('<div class="nivo-directionNav"><a class="nivo-prevNav">'+settings.prevText+'</a><a class="nivo-nextNav">'+settings.nextText+'</a></div>');if(settings.directionNavHide){$('.nivo-directionNav',slider).hide();slider.hover(function(){$('.nivo-directionNav',slider).show();},function(){$('.nivo-directionNav',slider).hide();});}
|
||||
$('a.nivo-prevNav',slider).live('click',function(){if(vars.running)return false;clearInterval(timer);timer='';vars.currentSlide-=2;nivoRun(slider,kids,settings,'prev');});$('a.nivo-nextNav',slider).live('click',function(){if(vars.running)return false;clearInterval(timer);timer='';nivoRun(slider,kids,settings,'next');});}
|
||||
if(settings.controlNav){var nivoControl=$('<div class="nivo-controlNav"></div>');slider.append(nivoControl);for(var i=0;i<kids.length;i++){if(settings.controlNavThumbs){var child=kids.eq(i);if(!child.is('img')){child=child.find('img:first');}
|
||||
if(settings.controlNavThumbsFromRel){nivoControl.append('<a class="nivo-control" rel="'+i+'"><img src="'+child.attr('rel')+'" alt="" /></a>');}else{nivoControl.append('<a class="nivo-control" rel="'+i+'"><img src="'+child.attr('src').replace(settings.controlNavThumbsSearch,settings.controlNavThumbsReplace)+'" alt="" /></a>');}}else{nivoControl.append('<a class="nivo-control" rel="'+i+'">'+(i+1)+'</a>');}}
|
||||
$('.nivo-controlNav a:eq('+vars.currentSlide+')',slider).addClass('active');$('.nivo-controlNav a',slider).live('click',function(){if(vars.running)return false;if($(this).hasClass('active'))return false;clearInterval(timer);timer='';slider.css('background','url("'+vars.currentImage.attr('src')+'") no-repeat');vars.currentSlide=$(this).attr('rel')-1;nivoRun(slider,kids,settings,'control');});}
|
||||
if(settings.keyboardNav){$(window).keypress(function(event){if(event.keyCode=='37'){if(vars.running)return false;clearInterval(timer);timer='';vars.currentSlide-=2;nivoRun(slider,kids,settings,'prev');}
|
||||
if(event.keyCode=='39'){if(vars.running)return false;clearInterval(timer);timer='';nivoRun(slider,kids,settings,'next');}});}
|
||||
if(settings.pauseOnHover){slider.hover(function(){vars.paused=true;clearInterval(timer);timer='';},function(){vars.paused=false;if(timer==''&&!settings.manualAdvance){timer=setInterval(function(){nivoRun(slider,kids,settings,false);},settings.pauseTime);}});}
|
||||
slider.bind('nivo:animFinished',function(){vars.running=false;$(kids).each(function(){if($(this).is('a')){$(this).css('display','none');}});if($(kids[vars.currentSlide]).is('a')){$(kids[vars.currentSlide]).css('display','block');}
|
||||
if(timer==''&&!vars.paused&&!settings.manualAdvance){timer=setInterval(function(){nivoRun(slider,kids,settings,false);},settings.pauseTime);}
|
||||
settings.afterChange.call(this);});var createSlices=function(slider,settings,vars){for(var i=0;i<settings.slices;i++){var sliceWidth=Math.round(slider.width()/settings.slices);if(i==settings.slices-1){slider.append($('<div class="nivo-slice"></div>').css({left:(sliceWidth*i)+'px',width:(slider.width()-(sliceWidth*i))+'px',height:'0px',opacity:'0',background:'url("'+vars.currentImage.attr('src')+'") no-repeat -'+((sliceWidth+(i*sliceWidth))-sliceWidth)+'px 0%'}));}else{slider.append($('<div class="nivo-slice"></div>').css({left:(sliceWidth*i)+'px',width:sliceWidth+'px',height:'0px',opacity:'0',background:'url("'+vars.currentImage.attr('src')+'") no-repeat -'+((sliceWidth+(i*sliceWidth))-sliceWidth)+'px 0%'}));}}}
|
||||
var createBoxes=function(slider,settings,vars){var boxWidth=Math.round(slider.width()/settings.boxCols);var boxHeight=Math.round(slider.height()/settings.boxRows);for(var rows=0;rows<settings.boxRows;rows++){for(var cols=0;cols<settings.boxCols;cols++){if(cols==settings.boxCols-1){slider.append($('<div class="nivo-box"></div>').css({opacity:0,left:(boxWidth*cols)+'px',top:(boxHeight*rows)+'px',width:(slider.width()-(boxWidth*cols))+'px',height:boxHeight+'px',background:'url("'+vars.currentImage.attr('src')+'") no-repeat -'+((boxWidth+(cols*boxWidth))-boxWidth)+'px -'+((boxHeight+(rows*boxHeight))-boxHeight)+'px'}));}else{slider.append($('<div class="nivo-box"></div>').css({opacity:0,left:(boxWidth*cols)+'px',top:(boxHeight*rows)+'px',width:boxWidth+'px',height:boxHeight+'px',background:'url("'+vars.currentImage.attr('src')+'") no-repeat -'+((boxWidth+(cols*boxWidth))-boxWidth)+'px -'+((boxHeight+(rows*boxHeight))-boxHeight)+'px'}));}}}}
|
||||
var nivoRun=function(slider,kids,settings,nudge){var vars=slider.data('nivo:vars');if(vars&&(vars.currentSlide==vars.totalSlides-1)){settings.lastSlide.call(this);}
|
||||
if((!vars||vars.stop)&&!nudge)return false;settings.beforeChange.call(this);if(!nudge){slider.css('background','url("'+vars.currentImage.attr('src')+'") no-repeat');}else{if(nudge=='prev'){slider.css('background','url("'+vars.currentImage.attr('src')+'") no-repeat');}
|
||||
if(nudge=='next'){slider.css('background','url("'+vars.currentImage.attr('src')+'") no-repeat');}}
|
||||
vars.currentSlide++;if(vars.currentSlide==vars.totalSlides){vars.currentSlide=0;settings.slideshowEnd.call(this);}
|
||||
if(vars.currentSlide<0)vars.currentSlide=(vars.totalSlides-1);if($(kids[vars.currentSlide]).is('img')){vars.currentImage=$(kids[vars.currentSlide]);}else{vars.currentImage=$(kids[vars.currentSlide]).find('img:first');}
|
||||
if(settings.controlNav){$('.nivo-controlNav a',slider).removeClass('active');$('.nivo-controlNav a:eq('+vars.currentSlide+')',slider).addClass('active');}
|
||||
processCaption(settings);$('.nivo-slice',slider).remove();$('.nivo-box',slider).remove();if(settings.effect=='random'){var anims=new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade','boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse');vars.randAnim=anims[Math.floor(Math.random()*(anims.length+1))];if(vars.randAnim==undefined)vars.randAnim='fade';}
|
||||
if(settings.effect.indexOf(',')!=-1){var anims=settings.effect.split(',');vars.randAnim=anims[Math.floor(Math.random()*(anims.length))];if(vars.randAnim==undefined)vars.randAnim='fade';}
|
||||
vars.running=true;if(settings.effect=='sliceDown'||settings.effect=='sliceDownRight'||vars.randAnim=='sliceDownRight'||settings.effect=='sliceDownLeft'||vars.randAnim=='sliceDownLeft'){createSlices(slider,settings,vars);var timeBuff=0;var i=0;var slices=$('.nivo-slice',slider);if(settings.effect=='sliceDownLeft'||vars.randAnim=='sliceDownLeft')slices=$('.nivo-slice',slider)._reverse();slices.each(function(){var slice=$(this);slice.css({'top':'0px'});if(i==settings.slices-1){setTimeout(function(){slice.animate({height:'100%',opacity:'1.0'},settings.animSpeed,'',function(){slider.trigger('nivo:animFinished');});},(100+timeBuff));}else{setTimeout(function(){slice.animate({height:'100%',opacity:'1.0'},settings.animSpeed);},(100+timeBuff));}
|
||||
timeBuff+=50;i++;});}
|
||||
else if(settings.effect=='sliceUp'||settings.effect=='sliceUpRight'||vars.randAnim=='sliceUpRight'||settings.effect=='sliceUpLeft'||vars.randAnim=='sliceUpLeft'){createSlices(slider,settings,vars);var timeBuff=0;var i=0;var slices=$('.nivo-slice',slider);if(settings.effect=='sliceUpLeft'||vars.randAnim=='sliceUpLeft')slices=$('.nivo-slice',slider)._reverse();slices.each(function(){var slice=$(this);slice.css({'bottom':'0px'});if(i==settings.slices-1){setTimeout(function(){slice.animate({height:'100%',opacity:'1.0'},settings.animSpeed,'',function(){slider.trigger('nivo:animFinished');});},(100+timeBuff));}else{setTimeout(function(){slice.animate({height:'100%',opacity:'1.0'},settings.animSpeed);},(100+timeBuff));}
|
||||
timeBuff+=50;i++;});}
|
||||
else if(settings.effect=='sliceUpDown'||settings.effect=='sliceUpDownRight'||vars.randAnim=='sliceUpDown'||settings.effect=='sliceUpDownLeft'||vars.randAnim=='sliceUpDownLeft'){createSlices(slider,settings,vars);var timeBuff=0;var i=0;var v=0;var slices=$('.nivo-slice',slider);if(settings.effect=='sliceUpDownLeft'||vars.randAnim=='sliceUpDownLeft')slices=$('.nivo-slice',slider)._reverse();slices.each(function(){var slice=$(this);if(i==0){slice.css('top','0px');i++;}else{slice.css('bottom','0px');i=0;}
|
||||
if(v==settings.slices-1){setTimeout(function(){slice.animate({height:'100%',opacity:'1.0'},settings.animSpeed,'',function(){slider.trigger('nivo:animFinished');});},(100+timeBuff));}else{setTimeout(function(){slice.animate({height:'100%',opacity:'1.0'},settings.animSpeed);},(100+timeBuff));}
|
||||
timeBuff+=50;v++;});}
|
||||
else if(settings.effect=='fold'||vars.randAnim=='fold'){createSlices(slider,settings,vars);var timeBuff=0;var i=0;$('.nivo-slice',slider).each(function(){var slice=$(this);var origWidth=slice.width();slice.css({top:'0px',height:'100%',width:'0px'});if(i==settings.slices-1){setTimeout(function(){slice.animate({width:origWidth,opacity:'1.0'},settings.animSpeed,'',function(){slider.trigger('nivo:animFinished');});},(100+timeBuff));}else{setTimeout(function(){slice.animate({width:origWidth,opacity:'1.0'},settings.animSpeed);},(100+timeBuff));}
|
||||
timeBuff+=50;i++;});}
|
||||
else if(settings.effect=='fade'||vars.randAnim=='fade'){createSlices(slider,settings,vars);var firstSlice=$('.nivo-slice:first',slider);firstSlice.css({'height':'100%','width':slider.width()+'px'});firstSlice.animate({opacity:'1.0'},(settings.animSpeed*2),'',function(){slider.trigger('nivo:animFinished');});}
|
||||
else if(settings.effect=='slideInRight'||vars.randAnim=='slideInRight'){createSlices(slider,settings,vars);var firstSlice=$('.nivo-slice:first',slider);firstSlice.css({'height':'100%','width':'0px','opacity':'1'});firstSlice.animate({width:slider.width()+'px'},(settings.animSpeed*2),'',function(){slider.trigger('nivo:animFinished');});}
|
||||
else if(settings.effect=='slideInLeft'||vars.randAnim=='slideInLeft'){createSlices(slider,settings,vars);var firstSlice=$('.nivo-slice:first',slider);firstSlice.css({'height':'100%','width':'0px','opacity':'1','left':'','right':'0px'});firstSlice.animate({width:slider.width()+'px'},(settings.animSpeed*2),'',function(){firstSlice.css({'left':'0px','right':''});slider.trigger('nivo:animFinished');});}
|
||||
else if(settings.effect=='boxRandom'||vars.randAnim=='boxRandom'){createBoxes(slider,settings,vars);var totalBoxes=settings.boxCols*settings.boxRows;var i=0;var timeBuff=0;var boxes=shuffle($('.nivo-box',slider));boxes.each(function(){var box=$(this);if(i==totalBoxes-1){setTimeout(function(){box.animate({opacity:'1'},settings.animSpeed,'',function(){slider.trigger('nivo:animFinished');});},(100+timeBuff));}else{setTimeout(function(){box.animate({opacity:'1'},settings.animSpeed);},(100+timeBuff));}
|
||||
timeBuff+=20;i++;});}
|
||||
else if(settings.effect=='boxRain'||vars.randAnim=='boxRain'||settings.effect=='boxRainReverse'||vars.randAnim=='boxRainReverse'||settings.effect=='boxRainGrow'||vars.randAnim=='boxRainGrow'||settings.effect=='boxRainGrowReverse'||vars.randAnim=='boxRainGrowReverse'){createBoxes(slider,settings,vars);var totalBoxes=settings.boxCols*settings.boxRows;var i=0;var timeBuff=0;var rowIndex=0;var colIndex=0;var box2Darr=new Array();box2Darr[rowIndex]=new Array();var boxes=$('.nivo-box',slider);if(settings.effect=='boxRainReverse'||vars.randAnim=='boxRainReverse'||settings.effect=='boxRainGrowReverse'||vars.randAnim=='boxRainGrowReverse'){boxes=$('.nivo-box',slider)._reverse();}
|
||||
boxes.each(function(){box2Darr[rowIndex][colIndex]=$(this);colIndex++;if(colIndex==settings.boxCols){rowIndex++;colIndex=0;box2Darr[rowIndex]=new Array();}});for(var cols=0;cols<(settings.boxCols*2);cols++){var prevCol=cols;for(var rows=0;rows<settings.boxRows;rows++){if(prevCol>=0&&prevCol<settings.boxCols){(function(row,col,time,i,totalBoxes){var box=$(box2Darr[row][col]);var w=box.width();var h=box.height();if(settings.effect=='boxRainGrow'||vars.randAnim=='boxRainGrow'||settings.effect=='boxRainGrowReverse'||vars.randAnim=='boxRainGrowReverse'){box.width(0).height(0);}
|
||||
if(i==totalBoxes-1){setTimeout(function(){box.animate({opacity:'1',width:w,height:h},settings.animSpeed/1.3,'',function(){slider.trigger('nivo:animFinished');});},(100+time));}else{setTimeout(function(){box.animate({opacity:'1',width:w,height:h},settings.animSpeed/1.3);},(100+time));}})(rows,prevCol,timeBuff,i,totalBoxes);i++;}
|
||||
prevCol--;}
|
||||
timeBuff+=100;}}}
|
||||
var shuffle=function(arr){for(var j,x,i=arr.length;i;j=parseInt(Math.random()*i),x=arr[--i],arr[i]=arr[j],arr[j]=x);return arr;}
|
||||
var trace=function(msg){if(this.console&&typeof console.log!="undefined")
|
||||
console.log(msg);}
|
||||
this.stop=function(){if(!$(element).data('nivo:vars').stop){$(element).data('nivo:vars').stop=true;trace('Stop Slider');}}
|
||||
this.start=function(){if($(element).data('nivo:vars').stop){$(element).data('nivo:vars').stop=false;trace('Start Slider');}}
|
||||
settings.afterLoad.call(this);return this;};$.fn.nivoSlider=function(options){return this.each(function(key,value){var element=$(this);if(element.data('nivoslider'))return element.data('nivoslider');var nivoslider=new NivoSlider(this,options);element.data('nivoslider',nivoslider);});};$.fn.nivoSlider.defaults={effect:'random',slices:15,boxCols:8,boxRows:4,animSpeed:500,pauseTime:3000,startSlide:0,directionNav:true,directionNavHide:true,controlNav:true,controlNavThumbs:false,controlNavThumbsFromRel:false,controlNavThumbsSearch:'.jpg',controlNavThumbsReplace:'_thumb.jpg',keyboardNav:true,pauseOnHover:true,manualAdvance:false,captionOpacity:0.8,prevText:'Prev',nextText:'Next',beforeChange:function(){},afterChange:function(){},slideshowEnd:function(){},lastSlide:function(){},afterLoad:function(){}};$.fn._reverse=[].reverse;})(jQuery);
|
||||
391
test/test-one/jquery.orbit-1.2.3.js
Normal file
391
test/test-one/jquery.orbit-1.2.3.js
Normal file
@ -0,0 +1,391 @@
|
||||
/*
|
||||
* jQuery Orbit Plugin 1.2.3
|
||||
* www.ZURB.com/playground
|
||||
* Copyright 2010, ZURB
|
||||
* Free to use under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*/
|
||||
|
||||
|
||||
(function($) {
|
||||
|
||||
$.fn.orbit = function(options) {
|
||||
|
||||
//Defaults to extend options
|
||||
var defaults = {
|
||||
animation: 'horizontal-push', // fade, horizontal-slide, vertical-slide, horizontal-push
|
||||
animationSpeed: 600, // how fast animtions are
|
||||
timer: true, // true or false to have the timer
|
||||
advanceSpeed: 4000, // if timer is enabled, time between transitions
|
||||
pauseOnHover: false, // if you hover pauses the slider
|
||||
startClockOnMouseOut: false, // if clock should start on MouseOut
|
||||
startClockOnMouseOutAfter: 1000, // how long after MouseOut should the timer start again
|
||||
directionalNav: true, // manual advancing directional navs
|
||||
captions: true, // do you want captions?
|
||||
captionAnimation: 'fade', // fade, slideOpen, none
|
||||
captionAnimationSpeed: 600, // if so how quickly should they animate in
|
||||
bullets: false, // true or false to activate the bullet navigation
|
||||
bulletThumbs: false, // thumbnails for the bullets
|
||||
bulletThumbLocation: '', // location from this file where thumbs will be
|
||||
afterSlideChange: function(){} // empty function
|
||||
};
|
||||
|
||||
//Extend those options
|
||||
var options = $.extend(defaults, options);
|
||||
|
||||
return this.each(function() {
|
||||
|
||||
// ==============
|
||||
// ! SETUP
|
||||
// ==============
|
||||
|
||||
//Global Variables
|
||||
var activeSlide = 0,
|
||||
numberSlides = 0,
|
||||
orbitWidth = 940,
|
||||
orbitHeight = 450,
|
||||
locked;
|
||||
|
||||
//Initialize
|
||||
var orbit = $(this).addClass('orbit'),
|
||||
orbitWrapper = orbit.wrap('<div class="orbit-wrapper" />').parent();
|
||||
orbit.add(orbitWidth).width('1px').height('1px');
|
||||
|
||||
//Collect all slides and set slider size of largest image
|
||||
var slides = orbit.children('img, a, div');
|
||||
slides.each(function() {
|
||||
var _slide = $(this);
|
||||
numberSlides++;
|
||||
});
|
||||
|
||||
//Animation locking functions
|
||||
function unlock() {
|
||||
locked = false;
|
||||
}
|
||||
function lock() {
|
||||
locked = true;
|
||||
}
|
||||
|
||||
//If there is only a single slide remove nav, timer and bullets
|
||||
if(slides.length == 1) {
|
||||
options.directionalNav = false;
|
||||
options.timer = false;
|
||||
options.bullets = false;
|
||||
}
|
||||
|
||||
//Set initial front photo z-index and fades it in
|
||||
slides.eq(activeSlide)
|
||||
.css({"z-index" : 3})
|
||||
.fadeIn(function() {
|
||||
//brings in all other slides IF css declares a display: none
|
||||
slides.css({"display":"block"})
|
||||
});
|
||||
|
||||
// ==============
|
||||
// ! TIMER
|
||||
// ==============
|
||||
|
||||
//Timer Execution
|
||||
function startClock() {
|
||||
if(!options.timer || options.timer == 'false') {
|
||||
return false;
|
||||
//if timer is hidden, don't need to do crazy calculations
|
||||
} else if(timer.is(':hidden')) {
|
||||
clock = setInterval(function(e){
|
||||
shift("next");
|
||||
}, options.advanceSpeed);
|
||||
//if timer is visible and working, let's do some math
|
||||
} else {
|
||||
timerRunning = true;
|
||||
pause.removeClass('active')
|
||||
clock = setInterval(function(e){
|
||||
var degreeCSS = "rotate("+degrees+"deg)"
|
||||
degrees += 2
|
||||
rotator.css({
|
||||
"-webkit-transform": degreeCSS,
|
||||
"-moz-transform": degreeCSS,
|
||||
"-o-transform": degreeCSS
|
||||
});
|
||||
if(degrees > 180) {
|
||||
rotator.addClass('move');
|
||||
mask.addClass('move');
|
||||
}
|
||||
if(degrees > 360) {
|
||||
rotator.removeClass('move');
|
||||
mask.removeClass('move');
|
||||
degrees = 0;
|
||||
shift("next");
|
||||
}
|
||||
}, options.advanceSpeed/180);
|
||||
}
|
||||
}
|
||||
function stopClock() {
|
||||
if(!options.timer || options.timer == 'false') { return false; } else {
|
||||
timerRunning = false;
|
||||
clearInterval(clock);
|
||||
pause.addClass('active');
|
||||
}
|
||||
}
|
||||
|
||||
//Timer Setup
|
||||
if(options.timer) {
|
||||
var timerHTML = '<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>'
|
||||
orbitWrapper.append(timerHTML);
|
||||
var timer = $('div.timer'),
|
||||
timerRunning;
|
||||
if(timer.length != 0) {
|
||||
var rotator = $('div.timer span.rotator'),
|
||||
mask = $('div.timer span.mask'),
|
||||
pause = $('div.timer span.pause'),
|
||||
degrees = 0,
|
||||
clock;
|
||||
startClock();
|
||||
timer.click(function() {
|
||||
if(!timerRunning) {
|
||||
startClock();
|
||||
} else {
|
||||
stopClock();
|
||||
}
|
||||
});
|
||||
if(options.startClockOnMouseOut){
|
||||
var outTimer;
|
||||
orbitWrapper.mouseleave(function() {
|
||||
outTimer = setTimeout(function() {
|
||||
if(!timerRunning){
|
||||
startClock();
|
||||
}
|
||||
}, options.startClockOnMouseOutAfter)
|
||||
})
|
||||
orbitWrapper.mouseenter(function() {
|
||||
clearTimeout(outTimer);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Pause Timer on hover
|
||||
if(options.pauseOnHover) {
|
||||
orbitWrapper.mouseenter(function() {
|
||||
stopClock();
|
||||
});
|
||||
}
|
||||
|
||||
// ==============
|
||||
// ! CAPTIONS
|
||||
// ==============
|
||||
|
||||
//Caption Setup
|
||||
if(options.captions) {
|
||||
var captionHTML = '<div class="orbit-caption"></div>';
|
||||
orbitWrapper.append(captionHTML);
|
||||
var caption = orbitWrapper.children('.orbit-caption');
|
||||
setCaption();
|
||||
}
|
||||
|
||||
//Caption Execution
|
||||
function setCaption() {
|
||||
if(!options.captions || options.captions =="false") {
|
||||
return false;
|
||||
} else {
|
||||
var _captionLocation = slides.eq(activeSlide).data('caption'); //get ID from rel tag on image
|
||||
_captionHTML = $(_captionLocation).html(); //get HTML from the matching HTML entity
|
||||
//Set HTML for the caption if it exists
|
||||
if(_captionHTML) {
|
||||
caption
|
||||
.attr('id',_captionLocation) // Add ID caption
|
||||
.html(_captionHTML); // Change HTML in Caption
|
||||
//Animations for Caption entrances
|
||||
if(options.captionAnimation == 'none') {
|
||||
caption.show();
|
||||
}
|
||||
if(options.captionAnimation == 'fade') {
|
||||
caption.fadeIn(options.captionAnimationSpeed);
|
||||
}
|
||||
if(options.captionAnimation == 'slideOpen') {
|
||||
caption.slideDown(options.captionAnimationSpeed);
|
||||
}
|
||||
} else {
|
||||
//Animations for Caption exits
|
||||
if(options.captionAnimation == 'none') {
|
||||
caption.hide();
|
||||
}
|
||||
if(options.captionAnimation == 'fade') {
|
||||
caption.fadeOut(options.captionAnimationSpeed);
|
||||
}
|
||||
if(options.captionAnimation == 'slideOpen') {
|
||||
caption.slideUp(options.captionAnimationSpeed);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ==================
|
||||
// ! DIRECTIONAL NAV
|
||||
// ==================
|
||||
|
||||
//DirectionalNav { rightButton --> shift("next"), leftButton --> shift("prev");
|
||||
if(options.directionalNav) {
|
||||
if(options.directionalNav == "false") { return false; }
|
||||
var directionalNavHTML = '<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>';
|
||||
orbitWrapper.append(directionalNavHTML);
|
||||
var leftBtn = orbitWrapper.children('div.slider-nav').children('span.left'),
|
||||
rightBtn = orbitWrapper.children('div.slider-nav').children('span.right');
|
||||
leftBtn.click(function() {
|
||||
stopClock();
|
||||
shift("prev");
|
||||
});
|
||||
rightBtn.click(function() {
|
||||
stopClock();
|
||||
shift("next")
|
||||
});
|
||||
}
|
||||
|
||||
// ==================
|
||||
// ! BULLET NAV
|
||||
// ==================
|
||||
|
||||
//Bullet Nav Setup
|
||||
if(options.bullets) {
|
||||
var bulletHTML = '<ul class="orbit-bullets"></ul>';
|
||||
orbitWrapper.append(bulletHTML);
|
||||
var bullets = $('ul.orbit-bullets');
|
||||
for(i=0; i<numberSlides; i++) {
|
||||
var liMarkup = $('<li>'+(i+1)+'</li>');
|
||||
if(options.bulletThumbs) {
|
||||
var thumbName = slides.eq(i).data('thumb');
|
||||
if(thumbName) {
|
||||
var liMarkup = $('<li class="has-thumb">'+i+'</li>')
|
||||
liMarkup.css({"background" : "url("+options.bulletThumbLocation+thumbName+") no-repeat"});
|
||||
}
|
||||
}
|
||||
$('ul.orbit-bullets').append(liMarkup);
|
||||
liMarkup.data('index',i);
|
||||
liMarkup.click(function() {
|
||||
stopClock();
|
||||
shift($(this).data('index'));
|
||||
});
|
||||
}
|
||||
setActiveBullet();
|
||||
}
|
||||
|
||||
//Bullet Nav Execution
|
||||
function setActiveBullet() {
|
||||
if(!options.bullets) { return false; } else {
|
||||
bullets.children('li').removeClass('active').eq(activeSlide).addClass('active');
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
// ! SHIFT ANIMATIONS
|
||||
// ====================
|
||||
|
||||
//Animating the shift!
|
||||
function shift(direction) {
|
||||
//remember previous activeSlide
|
||||
var prevActiveSlide = activeSlide,
|
||||
slideDirection = direction;
|
||||
//exit function if bullet clicked is same as the current image
|
||||
if(prevActiveSlide == slideDirection) { return false; }
|
||||
//reset Z & Unlock
|
||||
function resetAndUnlock() {
|
||||
slides
|
||||
.eq(prevActiveSlide)
|
||||
.css({"z-index" : 1});
|
||||
unlock();
|
||||
options.afterSlideChange.call(this);
|
||||
}
|
||||
if(slides.length == "1") { return false; }
|
||||
if(!locked) {
|
||||
lock();
|
||||
//deduce the proper activeImage
|
||||
if(direction == "next") {
|
||||
activeSlide++
|
||||
if(activeSlide == numberSlides) {
|
||||
activeSlide = 0;
|
||||
}
|
||||
} else if(direction == "prev") {
|
||||
activeSlide--
|
||||
if(activeSlide < 0) {
|
||||
activeSlide = numberSlides-1;
|
||||
}
|
||||
} else {
|
||||
activeSlide = direction;
|
||||
if (prevActiveSlide < activeSlide) {
|
||||
slideDirection = "next";
|
||||
} else if (prevActiveSlide > activeSlide) {
|
||||
slideDirection = "prev"
|
||||
}
|
||||
}
|
||||
//set to correct bullet
|
||||
setActiveBullet();
|
||||
|
||||
//set previous slide z-index to one below what new activeSlide will be
|
||||
slides
|
||||
.eq(prevActiveSlide)
|
||||
.css({"z-index" : 2});
|
||||
|
||||
//fade
|
||||
if(options.animation == "fade") {
|
||||
slides
|
||||
.eq(activeSlide)
|
||||
.css({"opacity" : 0, "z-index" : 3})
|
||||
.animate({"opacity" : 1}, options.animationSpeed, resetAndUnlock);
|
||||
}
|
||||
//horizontal-slide
|
||||
if(options.animation == "horizontal-slide") {
|
||||
if(slideDirection == "next") {
|
||||
slides
|
||||
.eq(activeSlide)
|
||||
.css({"left": orbitWidth, "z-index" : 3})
|
||||
.animate({"left" : 0}, options.animationSpeed, resetAndUnlock);
|
||||
}
|
||||
if(slideDirection == "prev") {
|
||||
slides
|
||||
.eq(activeSlide)
|
||||
.css({"left": -orbitWidth, "z-index" : 3})
|
||||
.animate({"left" : 0}, options.animationSpeed, resetAndUnlock);
|
||||
}
|
||||
}
|
||||
//vertical-slide
|
||||
if(options.animation == "vertical-slide") {
|
||||
if(slideDirection == "prev") {
|
||||
slides
|
||||
.eq(activeSlide)
|
||||
.css({"top": orbitHeight, "z-index" : 3})
|
||||
.animate({"top" : 0}, options.animationSpeed, resetAndUnlock);
|
||||
}
|
||||
if(slideDirection == "next") {
|
||||
slides
|
||||
.eq(activeSlide)
|
||||
.css({"top": -orbitHeight, "z-index" : 3})
|
||||
.animate({"top" : 0}, options.animationSpeed, resetAndUnlock);
|
||||
}
|
||||
}
|
||||
//push-over
|
||||
if(options.animation == "horizontal-push") {
|
||||
if(slideDirection == "next") {
|
||||
slides
|
||||
.eq(activeSlide)
|
||||
.css({"left": orbitWidth, "z-index" : 3})
|
||||
.animate({"left" : 0}, options.animationSpeed, resetAndUnlock);
|
||||
slides
|
||||
.eq(prevActiveSlide)
|
||||
.animate({"left" : -orbitWidth}, options.animationSpeed);
|
||||
}
|
||||
if(slideDirection == "prev") {
|
||||
slides
|
||||
.eq(activeSlide)
|
||||
.css({"left": -orbitWidth, "z-index" : 3})
|
||||
.animate({"left" : 0}, options.animationSpeed, resetAndUnlock);
|
||||
slides
|
||||
.eq(prevActiveSlide)
|
||||
.animate({"left" : orbitWidth}, options.animationSpeed);
|
||||
}
|
||||
}
|
||||
setCaption();
|
||||
} //lock
|
||||
}//orbit function
|
||||
});//each call
|
||||
}//orbit plugin call
|
||||
})(jQuery);
|
||||
|
||||
17
test/test-one/jquery.orbit-1.2.3.min.js
vendored
Normal file
17
test/test-one/jquery.orbit-1.2.3.min.js
vendored
Normal file
@ -0,0 +1,17 @@
|
||||
/*
|
||||
* jQuery Orbit Plugin 1.2.3
|
||||
* www.ZURB.com/playground
|
||||
* Copyright 2010, ZURB
|
||||
* Free to use under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*/
|
||||
|
||||
(function(d){d.fn.orbit=function(a){a=d.extend({animation:"horizontal-push",animationSpeed:600,timer:!0,advanceSpeed:4E3,pauseOnHover:!1,startClockOnMouseOut:!1,startClockOnMouseOutAfter:1E3,directionalNav:!0,captions:!0,captionAnimation:"fade",captionAnimationSpeed:600,bullets:!1,bulletThumbs:!1,bulletThumbLocation:"",afterSlideChange:function(){}},a);return this.each(function(){function q(){if(!a.timer||a.timer=="false")return!1;else r.is(":hidden")?s=setInterval(function(){l("next")},a.advanceSpeed):
|
||||
(o=!0,x.removeClass("active"),s=setInterval(function(){var a="rotate("+m+"deg)";m+=2;t.css({"-webkit-transform":a,"-moz-transform":a,"-o-transform":a});m>180&&(t.addClass("move"),z.addClass("move"));m>360&&(t.removeClass("move"),z.removeClass("move"),m=0,l("next"))},a.advanceSpeed/180))}function n(){if(!a.timer||a.timer=="false")return!1;else o=!1,clearInterval(s),x.addClass("active")}function A(){if(!a.captions||a.captions=="false")return!1;else{var y=e.eq(b).data("caption");(_captionHTML=d(y).html())?
|
||||
(j.attr("id",y).html(_captionHTML),a.captionAnimation=="none"&&j.show(),a.captionAnimation=="fade"&&j.fadeIn(a.captionAnimationSpeed),a.captionAnimation=="slideOpen"&&j.slideDown(a.captionAnimationSpeed)):(a.captionAnimation=="none"&&j.hide(),a.captionAnimation=="fade"&&j.fadeOut(a.captionAnimationSpeed),a.captionAnimation=="slideOpen"&&j.slideUp(a.captionAnimationSpeed))}}function B(){if(a.bullets)D.children("li").removeClass("active").eq(b).addClass("active");else return!1}function l(d){function c(){e.eq(f).css({"z-index":1});
|
||||
u=!1;a.afterSlideChange.call(this)}var f=b,g=d;if(f==g)return!1;if(e.length=="1")return!1;u||(u=!0,d=="next"?(b++,b==p&&(b=0)):d=="prev"?(b--,b<0&&(b=p-1)):(b=d,f<b?g="next":f>b&&(g="prev")),B(),e.eq(f).css({"z-index":2}),a.animation=="fade"&&e.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,c),a.animation=="horizontal-slide"&&(g=="next"&&e.eq(b).css({left:h,"z-index":3}).animate({left:0},a.animationSpeed,c),g=="prev"&&e.eq(b).css({left:-h,"z-index":3}).animate({left:0},a.animationSpeed,
|
||||
c)),a.animation=="vertical-slide"&&(g=="prev"&&e.eq(b).css({top:v,"z-index":3}).animate({top:0},a.animationSpeed,c),g=="next"&&e.eq(b).css({top:-v,"z-index":3}).animate({top:0},a.animationSpeed,c)),a.animation=="horizontal-push"&&(g=="next"&&(e.eq(b).css({left:h,"z-index":3}).animate({left:0},a.animationSpeed,c),e.eq(f).animate({left:-h},a.animationSpeed)),g=="prev"&&(e.eq(b).css({left:-h,"z-index":3}).animate({left:0},a.animationSpeed,c),e.eq(f).animate({left:h},a.animationSpeed))),A())}var b=0,
|
||||
p=0,h,v,u,f=d(this).addClass("orbit"),c=f.wrap('<div class="orbit-wrapper" />').parent();f.add(h).width("1px").height("1px");var e=f.children("img, a, div");e.each(function(){var a=d(this),b=a.width(),a=a.height();b>f.width()&&(f.add(c).width(b),h=f.width());a>f.height()&&(f.add(c).height(a),v=f.height());p++});if(e.length==1)a.directionalNav=!1,a.timer=!1,a.bullets=!1;e.eq(b).css({"z-index":3}).fadeIn(function(){e.css({display:"block"})});if(a.timer){c.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');
|
||||
var r=d("div.timer"),o;if(r.length!=0){var t=d("div.timer span.rotator"),z=d("div.timer span.mask"),x=d("div.timer span.pause"),m=0,s;q();r.click(function(){o?n():q()});if(a.startClockOnMouseOut){var C;c.mouseleave(function(){C=setTimeout(function(){o||q()},a.startClockOnMouseOutAfter)});c.mouseenter(function(){clearTimeout(C)})}}}a.pauseOnHover&&c.mouseenter(function(){n()});if(a.captions){c.append('<div class="orbit-caption"></div>');var j=c.children(".orbit-caption");A()}if(a.directionalNav){if(a.directionalNav==
|
||||
"false")return!1;c.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');var k=c.children("div.slider-nav").children("span.left"),w=c.children("div.slider-nav").children("span.right");k.click(function(){n();l("prev")});w.click(function(){n();l("next")})}if(a.bullets){c.append('<ul class="orbit-bullets"></ul>');var D=d("ul.orbit-bullets");for(i=0;i<p;i++){k=d("<li>"+(i+1)+"</li>");if(a.bulletThumbs&&(w=e.eq(i).data("thumb")))k=d('<li class="has-thumb">'+
|
||||
i+"</li>"),k.css({background:"url("+a.bulletThumbLocation+w+") no-repeat"});d("ul.orbit-bullets").append(k);k.data("index",i);k.click(function(){n();l(d(this).data("index"))})}B()}})}})(jQuery);
|
||||
66
test/test-one/main.css
Normal file
66
test/test-one/main.css
Normal file
@ -0,0 +1,66 @@
|
||||
/*
|
||||
* Skeleton V1.0
|
||||
* Created by Dave Gamache
|
||||
* www.skeleton.gs
|
||||
* 4/30/2011
|
||||
*/
|
||||
|
||||
/* Table of Content
|
||||
==================================================
|
||||
#Site Styles
|
||||
#Page Styles
|
||||
#Media Queries */
|
||||
|
||||
/* Site Styles
|
||||
================================================== */
|
||||
nav {
|
||||
margin-top: 20px;
|
||||
overflow: hidden; }
|
||||
logo h4 {
|
||||
float: left;
|
||||
margin-bottom: 10px; }
|
||||
nav ul {
|
||||
margin-top: 8px;
|
||||
float: right;
|
||||
margin-bottom: 10px; }
|
||||
nav ul li {
|
||||
float: left;
|
||||
margin-left: 10px; }
|
||||
nav ul li a {
|
||||
text-decoration: none; }
|
||||
.nivo-directionNav {
|
||||
display: block !important;}
|
||||
#slider {
|
||||
max-width: 100% !important;
|
||||
height: auto; }
|
||||
|
||||
|
||||
/* Page Styles
|
||||
================================================== */
|
||||
|
||||
/* Media Queries
|
||||
================================================== */
|
||||
|
||||
/* iPad Portrait/Browser */
|
||||
@media only screen and (min-width: 768px) and (max-width: 991px) {}
|
||||
|
||||
/* Mobile/Browser */
|
||||
@media only screen and (max-width: 767px) {
|
||||
nav ul { float: left; }
|
||||
nav ul li:first-child{ margin-left: 0; }
|
||||
}
|
||||
|
||||
/* Mobile Landscape/Browser */
|
||||
@media only screen and (min-width: 480px) and (max-width: 767px) {}
|
||||
|
||||
/* Anything smaller than standard 960 */
|
||||
@media only screen and (max-width: 959px) {}
|
||||
|
||||
/* iPad Portrait Only */
|
||||
@media only screen and (min-width: 768px) and (max-width: 991px) and (max-device-width: 1000px) {}
|
||||
|
||||
/* Mobile Only */
|
||||
@media only screen and (max-width: 767px) and (max-device-width: 1000px) {}
|
||||
|
||||
/* Mobile Landscape Only */
|
||||
@media only screen and (min-width: 480px) and (max-width: 767px) and (max-device-width: 1000px) {}
|
||||
89
test/test-one/nivo-slider.css
Executable file
89
test/test-one/nivo-slider.css
Executable file
@ -0,0 +1,89 @@
|
||||
/*
|
||||
* jQuery Nivo Slider v2.5.1
|
||||
* http://nivo.dev7studios.com
|
||||
*
|
||||
* Copyright 2011, Gilbert Pellegrom
|
||||
* Free to use and abuse under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*
|
||||
* March 2010
|
||||
*/
|
||||
|
||||
|
||||
/* The Nivo Slider styles */
|
||||
.nivoSlider {
|
||||
position:relative;
|
||||
}
|
||||
.nivoSlider img {
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
}
|
||||
/* If an image is wrapped in a link */
|
||||
.nivoSlider a.nivo-imageLink {
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
width:100%;
|
||||
height:100%;
|
||||
border:0;
|
||||
padding:0;
|
||||
margin:0;
|
||||
z-index:6;
|
||||
display:none;
|
||||
}
|
||||
/* The slices and boxes in the Slider */
|
||||
.nivo-slice {
|
||||
display:block;
|
||||
position:absolute;
|
||||
z-index:5;
|
||||
height:100%;
|
||||
}
|
||||
.nivo-box {
|
||||
display:block;
|
||||
position:absolute;
|
||||
z-index:5;
|
||||
}
|
||||
/* Caption styles */
|
||||
.nivo-caption {
|
||||
position:absolute;
|
||||
left:0px;
|
||||
bottom:0px;
|
||||
background:#000;
|
||||
color:#fff;
|
||||
opacity:0.8; /* Overridden by captionOpacity setting */
|
||||
width:100%;
|
||||
z-index:8;
|
||||
}
|
||||
.nivo-caption p {
|
||||
padding:5px;
|
||||
margin:0;
|
||||
}
|
||||
.nivo-caption a {
|
||||
display:inline !important;
|
||||
}
|
||||
.nivo-html-caption {
|
||||
display:none;
|
||||
}
|
||||
/* Direction nav styles (e.g. Next & Prev) */
|
||||
.nivo-directionNav a {
|
||||
position:absolute;
|
||||
top:45%;
|
||||
z-index:9;
|
||||
cursor:pointer;
|
||||
}
|
||||
.nivo-prevNav {
|
||||
left:0px;
|
||||
}
|
||||
.nivo-nextNav {
|
||||
right:0px;
|
||||
}
|
||||
/* Control nav styles (e.g. 1,2,3...) */
|
||||
.nivo-controlNav a {
|
||||
position:relative;
|
||||
z-index:9;
|
||||
cursor:pointer;
|
||||
}
|
||||
.nivo-controlNav a.active {
|
||||
font-weight:bold;
|
||||
}
|
||||
199
test/test-one/orbit-1.2.3.css
Normal file
199
test/test-one/orbit-1.2.3.css
Normal file
@ -0,0 +1,199 @@
|
||||
/* CSS for jQuery Orbit Plugin 1.2.3
|
||||
* www.ZURB.com/playground
|
||||
* Copyright 2010, ZURB
|
||||
* Free to use under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
|
||||
|
||||
|
||||
/* PUT IN YOUR SLIDER ID AND SIZE TO MAKE LOAD BEAUTIFULLY
|
||||
================================================== */
|
||||
/*
|
||||
#slider {
|
||||
width: 940px;
|
||||
height: 450px;
|
||||
background: #000 url('orbit/loading.gif') no-repeat center center;
|
||||
overflow: hidden; }
|
||||
#slider>img,
|
||||
#slider>div,
|
||||
#slider>a { display: none; }
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
/* CONTAINER
|
||||
================================================== */
|
||||
|
||||
div.orbit-wrapper {
|
||||
position: relative; }
|
||||
|
||||
div.orbit {
|
||||
position: relative;
|
||||
overflow: hidden }
|
||||
|
||||
div.orbit>img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none; }
|
||||
|
||||
div.orbit>a {
|
||||
border: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
line-height: 0;
|
||||
display: none; }
|
||||
|
||||
.orbit>div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
|
||||
/* Note: If your slider only uses content or anchors, you're going to want to put the width and height declarations on the ".orbit>div" and "div.orbit>a" tags in addition to just the .orbit-wrapper */
|
||||
|
||||
|
||||
/* TIMER
|
||||
================================================== */
|
||||
|
||||
div.timer {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
opacity: .6;
|
||||
cursor: pointer;
|
||||
z-index: 1001; }
|
||||
|
||||
span.rotator {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -20px;
|
||||
background: url(orbit/rotator-black.png) no-repeat;
|
||||
z-index: 3; }
|
||||
|
||||
span.mask {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
overflow: hidden; }
|
||||
|
||||
span.rotator.move {
|
||||
left: 0 }
|
||||
|
||||
span.mask.move {
|
||||
width: 40px;
|
||||
left: 0;
|
||||
background: url(orbit/timer-black.png) repeat 0 0; }
|
||||
|
||||
span.pause {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: url(orbit/pause-black.png) no-repeat;
|
||||
z-index: 4;
|
||||
opacity: 0; }
|
||||
|
||||
span.pause.active {
|
||||
background: url(orbit/pause-black.png) no-repeat 0 -40px }
|
||||
|
||||
div.timer:hover span.pause,
|
||||
span.pause.active {
|
||||
opacity: 1 }
|
||||
|
||||
|
||||
/* CAPTIONS
|
||||
================================================== */
|
||||
|
||||
.orbit-caption {
|
||||
display: none;
|
||||
font-family: "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif; }
|
||||
|
||||
.orbit-wrapper .orbit-caption {
|
||||
background: #000;
|
||||
background: rgba(0,0,0,.6);
|
||||
z-index: 1000;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 7px 0;
|
||||
font-size: 13px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%; }
|
||||
|
||||
|
||||
/* DIRECTIONAL NAV
|
||||
================================================== */
|
||||
|
||||
div.slider-nav {
|
||||
display: block }
|
||||
|
||||
div.slider-nav span {
|
||||
width: 78px;
|
||||
height: 100px;
|
||||
text-indent: -9999px;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
top: 50%;
|
||||
margin-top: -50px;
|
||||
cursor: pointer; }
|
||||
|
||||
div.slider-nav span.right {
|
||||
background: url(orbit/right-arrow.png);
|
||||
right: 0; }
|
||||
|
||||
div.slider-nav span.left {
|
||||
background: url(orbit/left-arrow.png);
|
||||
left: 0; }
|
||||
|
||||
/* BULLET NAV
|
||||
================================================== */
|
||||
|
||||
.orbit-bullets {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
list-style: none;
|
||||
bottom: -40px;
|
||||
left: 50%;
|
||||
margin-left: -50px;
|
||||
padding: 0; }
|
||||
|
||||
.orbit-bullets li {
|
||||
float: left;
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
color: #999;
|
||||
text-indent: -9999px;
|
||||
background: url(orbit/bullets.jpg) no-repeat 4px 0;
|
||||
width: 13px;
|
||||
height: 12px;
|
||||
overflow: hidden; }
|
||||
|
||||
.orbit-bullets li.active {
|
||||
color: #222;
|
||||
background-position: -8px 0; }
|
||||
|
||||
.orbit-bullets li.has-thumb {
|
||||
background: none;
|
||||
width: 100px;
|
||||
height: 75px; }
|
||||
|
||||
.orbit-bullets li.active.has-thumb {
|
||||
background-position: 0 0;
|
||||
border-top: 2px solid #000; }
|
||||
BIN
test/test-one/orbit/bullets.jpg
Normal file
BIN
test/test-one/orbit/bullets.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 657 B |
BIN
test/test-one/orbit/left-arrow.png
Normal file
BIN
test/test-one/orbit/left-arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 679 B |
BIN
test/test-one/orbit/loading.gif
Normal file
BIN
test/test-one/orbit/loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
test/test-one/orbit/mask-black.png
Normal file
BIN
test/test-one/orbit/mask-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 705 B |
BIN
test/test-one/orbit/pause-black.png
Normal file
BIN
test/test-one/orbit/pause-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 330 B |
BIN
test/test-one/orbit/right-arrow.png
Normal file
BIN
test/test-one/orbit/right-arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 664 B |
BIN
test/test-one/orbit/rotator-black.png
Normal file
BIN
test/test-one/orbit/rotator-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 733 B |
BIN
test/test-one/orbit/timer-black.png
Normal file
BIN
test/test-one/orbit/timer-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 705 B |
BIN
test/test-one/slider-2.jpg
Normal file
BIN
test/test-one/slider-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
test/test-one/slider.jpg
Normal file
BIN
test/test-one/slider.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
Loading…
Reference in New Issue
Block a user