creating some testing docs and refined buttons and tabs

This commit is contained in:
Dave Gamache 2011-05-07 21:28:35 -07:00
parent e9ba01df76
commit e4ff97ce7a
21 changed files with 985 additions and 125 deletions

View File

@ -32,15 +32,17 @@
color: #555; color: #555;
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
padding: 3px 8px; padding: 3px 8px 4px;
position: relative; position: relative;
right: -8px; right: -8px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
border-radius: 2px; } border-radius: 2px; }
/*
nav ul li a:hover { nav ul li a:hover {
color: #fff; color: #fff;
background: #222; } background: #333; }
*/
nav .button { nav .button {
float: right; } float: right; }
header h1 { header h1 {
@ -116,7 +118,7 @@
#viewOnGithub { #viewOnGithub {
margin-bottom: 20px; margin-bottom: 20px;
font-size: 12px; font-size: 11px;
color: #999; color: #999;
display: block; } display: block; }

View File

@ -175,9 +175,8 @@
<hr /> <hr />
<div class="doc-section" id="buttons"> <div class="doc-section" id="buttons">
<h3>Buttons</h3> <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> <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">Save Now</a> <a href="#" class="button">Click Me For Action</a>
<a href="#" class="secondary button">Dismiss Changes</a>
<div class="hidden-code"> <div class="hidden-code">
<a href="">Code Example</a> <a href="">Code Example</a>
<!-- <script type="text/javascript" src="http://snipt.net/embed/c9ba7e6bef73adc206a1f2f156336b1f"></script> --> <!-- <script type="text/javascript" src="http://snipt.net/embed/c9ba7e6bef73adc206a1f2f156336b1f"></script> -->
@ -241,8 +240,7 @@
<span>Regular Radio</span> <span>Regular Radio</span>
</label> </label>
</fieldset> </fieldset>
<button type="submit">Submit Form</button>
<!-- <input type="text" id="placeholderInput" placeholder="Placeholder Input" /> -->
</form> </form>
</div> </div>
</div> </div>

View File

@ -124,31 +124,46 @@
/* #Buttons /* #Buttons
================================================== */ ================================================== */
.button {
background: #222;
display: inline-block;
padding: 9px 34px 11px;
color: #fff !important;
text-decoration: none;
font-weight: bold;
line-height: 1;
position: relative;
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;
}
.button.square { a.button,
-moz-border-radius: none; button {
-webkit-border-radius: none; background: #eee; /* Old browsers */
border-radius: none; } 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;
font-size: 11px;
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px rgba(255, 255, 255, .75);
cursor: pointer;
margin-bottom: 20px;
line-height: 21px; }
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 { .button.full-width {
width: 100%; width: 100%;
@ -156,19 +171,6 @@
padding-right: 0 !important; padding-right: 0 !important;
text-align: center; } 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) /* #Tabs (activate in app.js)
================================================== */ ================================================== */
@ -189,7 +191,7 @@
text-decoration: none; text-decoration: none;
width: auto; width: auto;
height: 29px; height: 29px;
padding: 0px 16px; padding: 0px 20px;
line-height: 30px; line-height: 30px;
border: solid 1px #ddd; border: solid 1px #ddd;
border-width: 1px 0 0 1px; border-width: 1px 0 0 1px;
@ -259,7 +261,8 @@
display: block; display: block;
margin-bottom: 20px; margin-bottom: 20px;
background: #fff; } background: #fff; }
input:focus { input:focus,
textarea:focus {
border: 1px solid #aaa; border: 1px solid #aaa;
color: #444; color: #444;
-moz-box-shadow: 0 0 3px rgba(0,0,0,.2); -moz-box-shadow: 0 0 3px rgba(0,0,0,.2);

View File

@ -52,6 +52,9 @@ which applies to mobile as well.*/
.container .fifteen.columns { width: 880px; } .container .fifteen.columns { width: 880px; }
.container .sixteen.columns { width: 940px; } .container .sixteen.columns { width: 940px; }
.container .one-third.column { width: 300px; }
.container .two-thirds.column { width: 620px; }
/* Offsets */ /* Offsets */
.container .offset-by-one { padding-left: 60px; } .container .offset-by-one { padding-left: 60px; }
.container .offset-by-two { padding-left: 120px; } .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 /* #Responsive: iPad Portrait
================================================== */ ================================================== */
@ -174,6 +103,9 @@ which applies to mobile as well.*/
.container .fifteen.columns { width: 700px; } .container .fifteen.columns { width: 700px; }
.container .sixteen.columns { width: 748px; } .container .sixteen.columns { width: 748px; }
.container .one-third.column { width: 236px; }
.container .two-thirds.column { width: 492px; }
/* Offsets */ /* Offsets */
.container .offset-by-one { padding-left: 48px; } .container .offset-by-one { padding-left: 48px; }
.container .offset-by-two { padding-left: 96px; } .container .offset-by-two { padding-left: 96px; }
@ -217,7 +149,9 @@ which applies to mobile as well.*/
.container .thirteen.columns, .container .thirteen.columns,
.container .fourteen.columns, .container .fourteen.columns,
.container .fifteen.columns, .container .fifteen.columns,
.container .sixteen.columns { width: 300px; } .container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column { width: 300px; }
/* Offsets */ /* Offsets */
.container .offset-by-one, .container .offset-by-one,
@ -263,7 +197,9 @@ which applies to mobile as well.*/
.container .thirteen.columns, .container .thirteen.columns,
.container .fourteen.columns, .container .fourteen.columns,
.container .fifteen.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
View 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>

View 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);

View 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
View 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
View 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
View 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;
}

View 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; }

Binary file not shown.

After

Width:  |  Height:  |  Size: 657 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 679 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 705 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 330 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 664 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 733 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 705 B

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 198 KiB