first import
This commit is contained in:
Bachir Soussi Chiadmi
13
sites/all/libraries/AnythingSlider/README.textile
Normal file
13
sites/all/libraries/AnythingSlider/README.textile
Normal file
@@ -0,0 +1,13 @@
|
||||
h1. AnythingSlider jQuery Plugin
|
||||
|
||||
*Just what the world needs, another jQuery slider. YAWN.* I know, check this one out though, it’s got lots of cool features.
|
||||
|
||||
Here on CSS-Tricks, I’ve created a number of different sliders. Three, in fact. A "“featured content”":http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/ slider, a "“start/stop slider”":http://css-tricks.com/startstop-slider/, and "“moving boxes”":http://css-tricks.com/moving-boxes/. Each of them had some cool interesting feature that I needed to build at the time. All were well-received, but as is the case with these things, people want them to do X, Y, and Z in addition to what they already did.
|
||||
|
||||
This new AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. In other words, to create a really “full featured” slider that could be widely useful. This is the first time (on CSS-Tricks) that one of these sliders is an actual plugin as well, which should make implementing it and customizing it much easier.
|
||||
|
||||
* "Documentation Wiki":https://github.com/ProLoser/AnythingSlider/wiki
|
||||
* "Keep Reading":http://css-tricks.com/anythingslider-1-4/
|
||||
* "Main Demo":http://proloser.github.com/AnythingSlider/
|
||||
* "More Demos":https://github.com/ProLoser/AnythingSlider/wiki
|
||||
* Having an issue? Submit it "here":https://github.com/ProLoser/AnythingSlider/issues
|
||||
45
sites/all/libraries/AnythingSlider/css/anythingslider-ie.css
Normal file
45
sites/all/libraries/AnythingSlider/css/anythingslider-ie.css
Normal file
@@ -0,0 +1,45 @@
|
||||
/* AnythingSlider IE7 and older stylesheet - included !important flag in case the theme is loaded after page load */
|
||||
|
||||
/* Navigation Arrows */
|
||||
div.anythingSlider .arrow {
|
||||
top: 35% !important;
|
||||
}
|
||||
div.anythingSlider-metallic .arrow {
|
||||
top: 40% !important;
|
||||
}
|
||||
div.anythingSlider-construction .arrow {
|
||||
top: 14% !important;
|
||||
}
|
||||
div.anythingSlider-minimalist-round .arrow , div.anythingSlider-minimalist-square .arrow {
|
||||
top: 45% !important;
|
||||
}
|
||||
div.anythingSlider-cs-portfolio .arrow {
|
||||
bottom: -24px !important;
|
||||
}
|
||||
|
||||
div.anythingSlider .arrow a,
|
||||
div.anythingSlider-metallic .arrow a,
|
||||
div.anythingSlider-minimalist-square .arrow a,
|
||||
div.anythingSlider-construction .arrow a,
|
||||
div.anythingSlider-minimalist-round .arrow a {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* When using the navigationSize option, the side margins need to be zero
|
||||
None of the navigation panels look good in IE7 now =( */
|
||||
div.anythingSlider .anythingControls ul.thumbNav a {
|
||||
margin: 0;
|
||||
}
|
||||
div.anythingSlider .anythingControls .anythingNavWindow li {
|
||||
padding: 3px 0 0 0;
|
||||
}
|
||||
div.anythingSlider-cs-portfolio .anythingControls .anythingNavWindow {
|
||||
margin: 18px 0 0 0;
|
||||
}
|
||||
div.anythingSlider-metallic .anythingControls,
|
||||
div.anythingSlider-minimalist-square .anythingControls,
|
||||
div.anythingSlider-construction .anythingControls,
|
||||
div.anythingSlider-minimalist-round .anythingControls {
|
||||
width: 70%; /* arbitrary percentage, adjust to fit your slider in IE7 */
|
||||
margin-top: 3px;
|
||||
}
|
||||
204
sites/all/libraries/AnythingSlider/css/anythingslider.css
Normal file
204
sites/all/libraries/AnythingSlider/css/anythingslider.css
Normal file
@@ -0,0 +1,204 @@
|
||||
/*
|
||||
AnythingSlider v1.7+ Default (base) theme
|
||||
By Chris Coyier: http://css-tricks.com
|
||||
with major improvements by Doug Neiner: http://pixelgraphics.us/
|
||||
based on work by Remy Sharp: http://jqueryfordesigners.com/
|
||||
*/
|
||||
|
||||
/*****************************
|
||||
SET DEFAULT DIMENSIONS HERE
|
||||
*****************************/
|
||||
/* change the ID to match your slider */
|
||||
#slider {
|
||||
width: 700px;
|
||||
height: 390px;
|
||||
list-style: none;
|
||||
/* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
/* Opera width restriction */
|
||||
.anythingBase { max-width: 32766px; }
|
||||
|
||||
/*****************
|
||||
SET COLORS HERE
|
||||
*****************/
|
||||
/**** Default state (no keyboard focus) ****/
|
||||
/* slider window - top & bottom borders, default state */
|
||||
div.anythingSlider .anythingWindow {
|
||||
border-top: 3px solid #777;
|
||||
border-bottom: 3px solid #777;
|
||||
}
|
||||
/* Navigation buttons, default state */
|
||||
div.anythingSlider .anythingControls ul a.cur, div.anythingSlider .anythingControls ul a {
|
||||
background: #777;
|
||||
color: #000;
|
||||
}
|
||||
/* start-stop button, stopped, default state */
|
||||
div.anythingSlider .start-stop {
|
||||
background-color: #040;
|
||||
color: #fff;
|
||||
}
|
||||
/* start-stop button, playing, default state */
|
||||
div.anythingSlider .start-stop.playing {
|
||||
background-color: #800;
|
||||
}
|
||||
/* start-stop button, default hovered text color (when visible) */
|
||||
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
/**** Active State (slider has keyboard focus) ****/
|
||||
/* slider window - top & bottom borders, active state */
|
||||
div.anythingSlider.activeSlider .anythingWindow {
|
||||
border-color: #7C9127;
|
||||
}
|
||||
/* Navigation buttons, active state */
|
||||
div.anythingSlider.activeSlider .anythingControls ul a.cur, div.anythingSlider.activeSlider .anythingControls ul a {
|
||||
background-color: #7C9127;
|
||||
}
|
||||
/* start-stop button, stopped, active state */
|
||||
div.anythingSlider .start-stop {
|
||||
background-color: #080;
|
||||
color: #fff;
|
||||
}
|
||||
/* start-stop button, playing, active state */
|
||||
div.anythingSlider .start-stop.playing {
|
||||
background-color: #d00;
|
||||
}
|
||||
/* start-stop button, active slider hovered text color (when visible) */
|
||||
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/***********************
|
||||
COMMON SLIDER STYLING
|
||||
***********************/
|
||||
/* Overall Wrapper: 45px right & left padding for the arrows, 28px @ bottom for navigation */
|
||||
div.anythingSlider {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
overflow: visible !important; /* needed for Opera and Safari */
|
||||
position: relative;
|
||||
padding: 0 45px 28px 45px;
|
||||
}
|
||||
/* anythingSlider viewport window */
|
||||
div.anythingSlider .anythingWindow {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* anythingSlider base (original element) */
|
||||
.anythingBase {
|
||||
background: transparent;
|
||||
list-style: none;
|
||||
position: absolute;
|
||||
overflow: visible !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/* all panels inside the slider */
|
||||
.anythingBase .panel {
|
||||
background: transparent;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.anythingBase .panel.vertical {
|
||||
float: none;
|
||||
}
|
||||
|
||||
/* Navigation Arrows */
|
||||
div.anythingSlider .arrow {
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
div.anythingSlider .arrow a {
|
||||
display: block;
|
||||
height: 140px;
|
||||
margin: -70px 0 0 0; /* half height of image */
|
||||
width: 45px;
|
||||
text-align: center;
|
||||
outline: 0;
|
||||
background: url(../images/default.png) no-repeat;
|
||||
}
|
||||
/* hide text, target the span so IE7 doesn't text-indent the link */
|
||||
div.anythingSlider .arrow a span { display: block; text-indent: -9999px; }
|
||||
/* back arrow */
|
||||
div.anythingSlider .back { left: 0; }
|
||||
div.anythingSlider .back a { background-position: left top; }
|
||||
div.anythingSlider .back a:hover, div.anythingSlider .back a.hover { background-position: left -140px; }
|
||||
div.anythingSlider .back.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
|
||||
/* forward arrow */
|
||||
div.anythingSlider .forward { right: 0; }
|
||||
div.anythingSlider .forward a { background-position: right top; }
|
||||
div.anythingSlider .forward a:hover, div.anythingSlider .forward a.hover { background-position: right -140px; }
|
||||
div.anythingSlider .forward.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
|
||||
|
||||
/* Navigation Links */
|
||||
div.anythingSlider .anythingControls { outline: 0; display: none; }
|
||||
div.anythingSlider .anythingControls ul { margin: 0; padding: 0; float: left; }
|
||||
div.anythingSlider .anythingControls ul li { display: inline; }
|
||||
div.anythingSlider .anythingControls ul a {
|
||||
font: 11px/18px Georgia, Serif;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
padding: 2px 8px;
|
||||
height: 18px;
|
||||
margin: 0 5px 0 0;
|
||||
background-image: url(../images/default.png);
|
||||
background-position: center -288px ;
|
||||
background-repeat: repeat-x;
|
||||
text-align: center;
|
||||
outline: 0;
|
||||
border-radius: 0 0 5px 5px;
|
||||
-moz-border-radius: 0 0 5px 5px;
|
||||
-webkit-border-radius: 0 0 5px 5px;
|
||||
}
|
||||
div.anythingSlider .anythingControls ul a:hover {
|
||||
background-image: none;
|
||||
}
|
||||
/* Navigation size window */
|
||||
div.anythingSlider .anythingControls .anythingNavWindow { overflow: hidden; float: left; }
|
||||
|
||||
/* slider autoplay right-to-left, reverse order of nav links to look better */
|
||||
div.anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
|
||||
div.anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */
|
||||
div.anythingSlider.rtl .anythingWindow {
|
||||
direction: ltr;
|
||||
unicode-bidi: bidi-override;
|
||||
}
|
||||
/* div.anythingSlider.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */
|
||||
|
||||
/* Autoplay Start/Stop button */
|
||||
div.anythingSlider .start-stop {
|
||||
background-image: url(../images/default.png);
|
||||
background-position: center -288px;
|
||||
background-repeat: repeat-x;
|
||||
padding: 2px 5px;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
float: right;
|
||||
z-index: 100;
|
||||
outline: 0;
|
||||
border-radius: 0 0 5px 5px;
|
||||
-moz-border-radius: 0 0 5px 5px;
|
||||
-webkit-border-radius: 0 0 5px 5px;
|
||||
}
|
||||
/* hide cell shading on hover - makes the button appear to come forward */
|
||||
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { background-image: none; }
|
||||
|
||||
/* probably not necessary, but added just in case */
|
||||
div.anythingSlider, div.anythingSlider .anythingWindow, div.anythingSlider .anythingControls ul a, div.anythingSlider .arrow a, div.anythingSlider .start-stop {
|
||||
transition-duration: 0;
|
||||
-o-transition-duration: 0;
|
||||
-moz-transition-duration: 0;
|
||||
-webkit-transition-duration: 0;
|
||||
}
|
||||
142
sites/all/libraries/AnythingSlider/css/theme-construction.css
Normal file
142
sites/all/libraries/AnythingSlider/css/theme-construction.css
Normal file
@@ -0,0 +1,142 @@
|
||||
/*
|
||||
AnythingSlider v1.5.10 Construction Theme
|
||||
By Rob Garrison
|
||||
*/
|
||||
|
||||
/****** SET COLORS HERE *******/
|
||||
/* Default State */
|
||||
div.anythingSlider-construction .anythingWindow {
|
||||
border-top: 3px solid #333;
|
||||
border-bottom: 3px solid #333;
|
||||
}
|
||||
|
||||
/* Active State */
|
||||
div.anythingSlider-construction.activeSlider .anythingWindow {
|
||||
border-color: #d0aa0d;
|
||||
}
|
||||
div.anythingSlider-construction.activeSlider .anythingControls ul a:hover, div.anythingSlider-construction.activeSlider .anythingControls ul a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* Navigation Arrows */
|
||||
div.anythingSlider-construction .arrow {
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
display: block;
|
||||
z-index: 100;
|
||||
}
|
||||
div.anythingSlider-construction .arrow a {
|
||||
display: block;
|
||||
height: 300px;
|
||||
margin-top: -150px; /* half height of image */
|
||||
width: 45px;
|
||||
outline: 0;
|
||||
background: url(../images/construction.gif) no-repeat;
|
||||
}
|
||||
|
||||
div.anythingSlider-construction .forward a {
|
||||
border-radius: 0 5px 5px 0;
|
||||
-moz-border-radius: 0 5px 5px 0;
|
||||
-webkit-border-radius: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
div.anythingSlider-construction .back a {
|
||||
border-radius: 5px 0 0 5px;
|
||||
-moz-border-radius: 5px 0 0 5px;
|
||||
-webkit-border-radius: 5px 0 0 5px;
|
||||
}
|
||||
|
||||
div.anythingSlider-construction .forward { right: 0; }
|
||||
div.anythingSlider-construction .back { left: 0; }
|
||||
div.anythingSlider-construction .forward a { background-position: right top; }
|
||||
div.anythingSlider-construction .back a { background-position: left top; }
|
||||
div.anythingSlider-construction .forward a:hover, div.anythingSlider-construction .forward a.hover { background-position: -50px top; }
|
||||
div.anythingSlider-construction .back a:hover, div.anythingSlider-construction .back a.hover { background-position: -5px top; }
|
||||
|
||||
/* Navigation Links */
|
||||
div.anythingSlider-construction .anythingControls {
|
||||
float: right;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 15%;
|
||||
z-index: 100;
|
||||
opacity: 0.90;
|
||||
filter: alpha(opacity=90);
|
||||
}
|
||||
div.anythingSlider-construction .anythingControls ul {
|
||||
margin: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
div.anythingSlider-construction .anythingControls ul li {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
div.anythingSlider-construction .anythingControls ul a, div.anythingSlider-construction.activeSlider .anythingControls ul a,
|
||||
div.anythingSlider-construction .anythingControls a.start-stop {
|
||||
display: block;
|
||||
background: transparent url(../images/construction.gif) -36px -301px no-repeat;
|
||||
border: 0;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
margin: 2px;
|
||||
padding: 0;
|
||||
outline: 0;
|
||||
}
|
||||
div.anythingSlider-construction div.anythingControls a:hover, div.anythingSlider-construction .anythingControls ul a.cur,
|
||||
div.anythingSlider-construction.activeSlider .anythingControls ul a.cur {
|
||||
background: transparent url(../images/construction.gif) -21px -301px no-repeat;
|
||||
}
|
||||
|
||||
/* Navigation size window arrows */
|
||||
div.anythingSlider-construction .anythingControls li.next a, div.anythingSlider-construction .anythingControls li.prev a {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
margin-top: 3px;
|
||||
border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
background: transparent url(../images/construction.gif) no-repeat;
|
||||
}
|
||||
div.anythingSlider-construction .anythingControls li.next a {
|
||||
background-position: -78px -144px;
|
||||
}
|
||||
div.anythingSlider-construction .anythingControls li.prev a {
|
||||
background-position: -12px -144px;
|
||||
}
|
||||
div.anythingSlider-construction .anythingControls li.next a:hover {
|
||||
background: transparent url(../images/construction.gif) -76px -144px no-repeat;
|
||||
}
|
||||
div.anythingSlider-construction .anythingControls li.prev a:hover {
|
||||
background: transparent url(../images/construction.gif) -14px -144px no-repeat;
|
||||
}
|
||||
|
||||
/* slider autoplay right-to-left, reverse order of nav links to look better */
|
||||
div.anythingSlider-construction.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
|
||||
div.anythingSlider-construction.rtl .anythingControls ul { float: left; } /* move nav link group to left */
|
||||
/* div.anythingSlider-construction.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */
|
||||
|
||||
/* Autoplay Start/Stop button */
|
||||
div.anythingSlider-construction .anythingControls a.start-stop {
|
||||
display: inline-block;
|
||||
background: transparent url(../images/construction.gif) -66px -301px no-repeat;
|
||||
z-index: 100;
|
||||
float: right;
|
||||
}
|
||||
div.anythingSlider-construction .anythingControls a.start-stop.playing, div.anythingSlider-construction.activeSlider .anythingControls a.start-stop.playing {
|
||||
background-position: -51px -301px;
|
||||
}
|
||||
div.anythingSlider-construction .anythingControls a.start-stop:hover, div.anythingSlider-construction .anythingControls a.start-stop.playing:hover {
|
||||
background-position: -21px -301px;
|
||||
}
|
||||
|
||||
/* Extra - replace defaults */
|
||||
div.anythingSlider-construction {
|
||||
padding: 6px 45px;
|
||||
}
|
||||
|
||||
/* text indent moved to span inside "a", for IE7; apparently, a negative text-indent on an "a" link moves the link as well as the text */
|
||||
div.anythingSlider-construction .arrow a span, div.anythingSlider-construction .anythingControls ul a span, div.anythingSlider-construction .start-stop span {
|
||||
display: block;
|
||||
line-height: 1px; /* needed for IE7 */
|
||||
text-indent: -9999px;
|
||||
}
|
||||
148
sites/all/libraries/AnythingSlider/css/theme-cs-portfolio.css
Normal file
148
sites/all/libraries/AnythingSlider/css/theme-cs-portfolio.css
Normal file
@@ -0,0 +1,148 @@
|
||||
/*
|
||||
AnythingSlider v1.5.10 cs-portfolio
|
||||
By Curtis Scott (http://www.curtisscott.com/portfolio.html)
|
||||
updated to work with the new themes
|
||||
*/
|
||||
|
||||
/*** Note: the nav-cs-portfolio.png used for navigation and slideshow buttons uses a semi-transparent png,
|
||||
through which the background color is seen... so colors set will turn out darker than normal ***/
|
||||
|
||||
/****** SET COLORS HERE *******/
|
||||
/* Default/Acitve State */
|
||||
div.anythingSlider-cs-portfolio .anythingControls ul a, div.anythingSlider-cs-portfolio.activeSlider .anythingControls ul a {
|
||||
background-color: #fff;
|
||||
}
|
||||
div.anythingSlider-cs-portfolio .anythingControls ul a:hover, div.anythingSlider-cs-portfolio .anythingControls ul a.cur,
|
||||
div.anythingSlider-cs-portfolio.activeSlider .anythingControls ul a:hover, div.anythingSlider-cs-portfolio.activeSlider .anythingControls ul a.cur {
|
||||
background-color: #0d5c9f;
|
||||
}
|
||||
div.anythingSlider-cs-portfolio .start-stop, div.anythingSlider-cs-portfolio .start-stop.hover {
|
||||
background-color: #080;
|
||||
}
|
||||
div.anythingSlider-cs-portfolio .start-stop:hover {
|
||||
background-color: #0f0;
|
||||
}
|
||||
div.anythingSlider-cs-portfolio .start-stop.playing {
|
||||
background-color: #a00;
|
||||
}
|
||||
div.anythingSlider-cs-portfolio .start-stop.playing:hover {
|
||||
background-color: #f00;
|
||||
}
|
||||
|
||||
/* Overall */
|
||||
div.anythingSlider-cs-portfolio {}
|
||||
div.anythingSlider-cs-portfolio .anythingWindow, div.anythingSlider-cs-portfolio.activeSlider .anythingWindow {
|
||||
border: 0;
|
||||
}
|
||||
/* Navigation Arrows */
|
||||
div.anythingSlider-cs-portfolio .arrow {
|
||||
display: block;
|
||||
bottom: 7px; /* this is -18px for IE7 */
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
}
|
||||
div.anythingSlider-cs-portfolio .arrow a {
|
||||
display: block;
|
||||
bottom: 5px;
|
||||
position: absolute;
|
||||
height: 27px;
|
||||
width: 26px;
|
||||
outline: 0;
|
||||
background: url(../images/cs-portfolio.png) no-repeat;
|
||||
}
|
||||
div.anythingSlider-cs-portfolio .forward { right: 70px; }
|
||||
div.anythingSlider-cs-portfolio .back { left: 20px; }
|
||||
div.anythingSlider-cs-portfolio .forward a { background-position: -24px top; }
|
||||
div.anythingSlider-cs-portfolio .back a { background-position: left top; }
|
||||
div.anythingSlider-cs-portfolio .forward a:hover, div.anythingSlider-cs-portfolio .forward a.hover { background-position: -24px -27px; }
|
||||
div.anythingSlider-cs-portfolio .back a:hover, div.anythingSlider-cs-portfolio .back a.hover { background-position: left -27px; }
|
||||
|
||||
/* Navigation Links */
|
||||
div.anythingSlider-cs-portfolio .anythingControls {
|
||||
background: url(../images/cs-portfolio.png) repeat-x bottom center;
|
||||
height: 49px;
|
||||
margin: 0 auto 49px auto;
|
||||
padding-left: 150px;
|
||||
text-align: center;
|
||||
z-index: 100;
|
||||
}
|
||||
div.anythingSlider-cs-portfolio .anythingControls ul {
|
||||
margin: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
div.anythingSlider-cs-portfolio .anythingControls ul li {
|
||||
padding: 0;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
div.anythingSlider-cs-portfolio .anythingControls ul a, div.anythingSlider-cs-portfolio.activeSlider .anythingControls ul a {
|
||||
display: inline-block;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
margin: 18px 5px 0 0;
|
||||
padding: 0;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
div.anythingSlider-cs-portfolio .anythingControls ul a, div.anythingSlider-cs-portfolio.activeSlider .anythingControls ul a,
|
||||
div.anythingSlider-cs-portfolio .anythingControls ul a:hover, div.anythingSlider-cs-portfolio .anythingControls ul a.cur,
|
||||
div.anythingSlider-cs-portfolio.activeSlider .anythingControls ul a:hover, div.anythingSlider-cs-portfolio.activeSlider .anythingControls ul a.cur {
|
||||
background-image: url(../images/cs-portfolio.png);
|
||||
background-position: right -20px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* Navigation size window arrows */
|
||||
div.anythingSlider-cs-portfolio .anythingControls li.next a, div.anythingSlider-cs-portfolio .anythingControls li.prev a,
|
||||
div.anythingSlider-cs-portfolio .anythingControls li.next a:hover, div.anythingSlider-cs-portfolio .anythingControls li.prev a:hover {
|
||||
width: 16px;
|
||||
height: 15px;
|
||||
background: url(../images/cs-portfolio.png) -25px -54px no-repeat;
|
||||
margin: 19px 5px 0 5px;
|
||||
}
|
||||
div.anythingSlider-cs-portfolio .anythingControls li.prev a {
|
||||
background-position: -9px -54px;
|
||||
}
|
||||
div.anythingSlider-cs-portfolio .anythingControls li.next a:hover {
|
||||
background-position: -56px -54px;
|
||||
}
|
||||
div.anythingSlider-cs-portfolio .anythingControls li.prev a:hover {
|
||||
background-position: -41px -54px;
|
||||
}
|
||||
|
||||
/* slider autoplay right-to-left, reverse order of nav links to look better */
|
||||
div.anythingSlider-cs-portfolio.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
|
||||
div.anythingSlider-cs-portfolio.rtl .anythingControls ul { float: left; } /* move nav link group to left */
|
||||
/* div.anythingSlider-cs-portfolio.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */
|
||||
|
||||
/* Autoplay Start/Stop button */
|
||||
div.anythingSlider-cs-portfolio .start-stop, div.anythingSlider-cs-portfolio .start-stop.hover {
|
||||
margin: 15px 50px 0 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
z-index: 100;
|
||||
border: 0;
|
||||
}
|
||||
div.anythingSlider-cs-portfolio .start-stop, div.anythingSlider-cs-portfolio .start-stop.hover,
|
||||
div.anythingSlider-cs-portfolio .start-stop:hover, div.anythingSlider-cs-portfolio .start-stop.playing,
|
||||
div.anythingSlider-cs-portfolio .start-stop.playing:hover {
|
||||
background-image: url(../images/cs-portfolio.png);
|
||||
background-position: right top;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* Extra - replace defaults */
|
||||
div.anythingSlider-cs-portfolio {
|
||||
padding: 0 23px 50px 0;
|
||||
}
|
||||
|
||||
/* text indent moved to span inside "a", for IE7; apparently, a negative text-indent on an "a" link moves the link as well as the text */
|
||||
div.anythingSlider-cs-portfolio .arrow a span, div.anythingSlider-cs-portfolio .anythingControls ul a span, div.anythingSlider-cs-portfolio .start-stop span {
|
||||
display: block;
|
||||
line-height: 1px; /* needed for IE7 */
|
||||
text-indent: -9999px;
|
||||
}
|
||||
146
sites/all/libraries/AnythingSlider/css/theme-metallic.css
Normal file
146
sites/all/libraries/AnythingSlider/css/theme-metallic.css
Normal file
@@ -0,0 +1,146 @@
|
||||
/*
|
||||
AnythingSlider v1.5.10 Metallic Theme
|
||||
By Rob Garrison
|
||||
*/
|
||||
|
||||
/****** SET COLORS HERE *******/
|
||||
/* Default State */
|
||||
div.anythingSlider-metallic .anythingWindow {
|
||||
border-top: 3px solid #333;
|
||||
border-bottom: 3px solid #333;
|
||||
}
|
||||
div.anythingSlider-metallic .anythingControls ul a {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
div.anythingSlider-metallic .start-stop {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
div.anythingSlider-metallic .start-stop.playing {
|
||||
background-color: #300;
|
||||
}
|
||||
div.anythingSlider-metallic .start-stop:hover, div.anythingSlider-metallic .start-stop.hover {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
/* Active State */
|
||||
div.anythingSlider-metallic.activeSlider .anythingWindow {
|
||||
border-color: #0355a3;
|
||||
}
|
||||
div.anythingSlider-metallic.activeSlider .anythingControls ul a {
|
||||
background-color: transparent;
|
||||
background-position: -68px -40px;
|
||||
}
|
||||
div.anythingSlider-metallic.activeSlider .anythingControls ul a:hover, div.anythingSlider-metallic.activeSlider .anythingControls ul a.cur {
|
||||
background-position: -76px -57px;
|
||||
/* background: #fff; */
|
||||
}
|
||||
div.anythingSlider-metallic.activeSlider .start-stop.playing {
|
||||
background-color: #f00;
|
||||
}
|
||||
div.anythingSlider-metallic .start-stop:hover, div.anythingSlider-metallic .start-stop.hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Navigation Arrows */
|
||||
div.anythingSlider-metallic .arrow {
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
display: block;
|
||||
z-index: 100;
|
||||
}
|
||||
div.anythingSlider-metallic .arrow a {
|
||||
display: block;
|
||||
height: 95px;
|
||||
margin-top: -47px; /* half height of image */
|
||||
width: 45px;
|
||||
outline: 0;
|
||||
background: url(../images/arrows-metallic.png) no-repeat;
|
||||
}
|
||||
|
||||
div.anythingSlider-metallic .forward { right: 0; }
|
||||
div.anythingSlider-metallic .back { left: 0; }
|
||||
div.anythingSlider-metallic .forward a { background-position: right bottom; }
|
||||
div.anythingSlider-metallic .back a { background-position: left bottom; }
|
||||
div.anythingSlider-metallic .forward a:hover, div.anythingSlider-metallic .forward a.hover { background-position: right top; }
|
||||
div.anythingSlider-metallic .back a:hover, div.anythingSlider-metallic .back a.hover { background-position: left top; }
|
||||
|
||||
/* Navigation Links */
|
||||
div.anythingSlider-metallic .anythingControls {
|
||||
float: right;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 15%;
|
||||
z-index: 100;
|
||||
opacity: 0.90;
|
||||
filter: alpha(opacity=90);
|
||||
}
|
||||
div.anythingSlider-metallic .anythingControls ul {
|
||||
margin: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
div.anythingSlider-metallic .anythingControls ul li {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
div.anythingSlider-metallic .anythingControls ul a {
|
||||
display: block;
|
||||
background: transparent url(../images/arrows-metallic.png) -68px -136px no-repeat;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
margin: 3px;
|
||||
padding: 0;
|
||||
outline: 0;
|
||||
border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
}
|
||||
|
||||
div.anythingSlider-metallic .anythingControls ul a:hover, div.anythingSlider-metallic .anythingControls ul a.cur {
|
||||
background: transparent url(../images/arrows-metallic.png) -76px -57px no-repeat;
|
||||
}
|
||||
|
||||
/* Navigation size window arrows */
|
||||
div.anythingSlider-metallic .anythingControls li.next a span, div.anythingSlider-metallic .anythingControls li.prev a span {
|
||||
text-indent: 1px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
div.anythingSlider-metallic .anythingControls li.prev a, div.anythingSlider-metallic .anythingControls li.next a {
|
||||
color: #ddd;
|
||||
}
|
||||
div.anythingSlider-metallic .anythingControls li.next a:hover, div.anythingSlider-metallic .anythingControls li.prev a:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* slider autoplay right-to-left, reverse order of nav links to look better */
|
||||
div.anythingSlider-metallic.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
|
||||
div.anythingSlider-metallic.rtl .anythingControls ul { float: left; } /* move nav link group to left */
|
||||
/* div.anythingSlider-metallic.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */
|
||||
|
||||
/* Autoplay Start/Stop button */
|
||||
div.anythingSlider-metallic .start-stop {
|
||||
margin: 3px;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: relative;
|
||||
bottom: 2px;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
float: right;
|
||||
border-radius: 7px;
|
||||
-moz-border-radius: 7px;
|
||||
-webkit-border-radius: 7px;
|
||||
}
|
||||
|
||||
/* Extra - replace defaults */
|
||||
div.anythingSlider-metallic {
|
||||
padding: 6px 23px;
|
||||
}
|
||||
|
||||
/* text indent moved to span inside "a", for IE7; apparently, a negative text-indent on an "a" link moves the link as well as the text */
|
||||
div.anythingSlider-metallic .arrow a span, div.anythingSlider-metallic .anythingControls ul a span, div.anythingSlider-metallic .start-stop span {
|
||||
display: block;
|
||||
line-height: 1px; /* needed for IE7 */
|
||||
text-indent: -9999px;
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
/*
|
||||
AnythingSlider v1.5.10 Minimalist Round Theme
|
||||
By Rob Garrison
|
||||
*/
|
||||
|
||||
/****** SET COLORS HERE *******/
|
||||
/* Default State */
|
||||
div.anythingSlider-minimalist-round .anythingWindow {
|
||||
border-top: 3px solid #333;
|
||||
border-bottom: 3px solid #333;
|
||||
}
|
||||
div.anythingSlider-minimalist-round .anythingControls ul a {
|
||||
border: 1px solid #000;
|
||||
background: #333;
|
||||
}
|
||||
div.anythingSlider-minimalist-round .anythingControls ul a:hover, div.anythingSlider-minimalist-round .anythingControls ul a.cur {
|
||||
background: #777;
|
||||
}
|
||||
div.anythingSlider-minimalist-round .start-stop {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
div.anythingSlider-minimalist-round .start-stop.playing {
|
||||
background-color: #300;
|
||||
}
|
||||
div.anythingSlider-minimalist-round .start-stop:hover, div.anythingSlider-minimalist-round .start-stop.hover {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
/* Active State */
|
||||
div.anythingSlider-minimalist-round.activeSlider .anythingWindow {
|
||||
border-color: #164054;
|
||||
}
|
||||
div.anythingSlider-minimalist-round.activeSlider .anythingControls ul a {
|
||||
background-color: #164054;
|
||||
}
|
||||
div.anythingSlider-minimalist-round.activeSlider .anythingControls ul a:hover, div.anythingSlider-minimalist-round.activeSlider .anythingControls ul a.cur {
|
||||
background: #fff;
|
||||
}
|
||||
div.anythingSlider-minimalist-round.activeSlider .start-stop.playing {
|
||||
background-color: #f00;
|
||||
}
|
||||
div.anythingSlider-minimalist-round .start-stop:hover, div.anythingSlider-minimalist-round .start-stop.hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Navigation Arrows */
|
||||
div.anythingSlider-minimalist-round .arrow {
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
div.anythingSlider-minimalist-round .arrow a {
|
||||
display: block;
|
||||
height: 40px;
|
||||
margin-top: -20px; /* half height of image */
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
outline: 0;
|
||||
background: url(../images/arrows-minimalist.png) no-repeat;
|
||||
}
|
||||
div.anythingSlider-minimalist-round .forward { right: 0; }
|
||||
div.anythingSlider-minimalist-round .back { left: 0; }
|
||||
div.anythingSlider-minimalist-round .forward a { background-position: right bottom; }
|
||||
div.anythingSlider-minimalist-round .back a { background-position: left bottom; }
|
||||
div.anythingSlider-minimalist-round .forward a:hover, div.anythingSlider-minimalist-round .forward a.hover { background-position: right top; }
|
||||
div.anythingSlider-minimalist-round .back a:hover, div.anythingSlider-minimalist-round .back a.hover { background-position: left top; }
|
||||
|
||||
/* Navigation Links */
|
||||
div.anythingSlider-minimalist-round .anythingControls {
|
||||
float: right;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 15%;
|
||||
z-index: 100;
|
||||
opacity: 0.90;
|
||||
filter: alpha(opacity=90);
|
||||
}
|
||||
div.anythingSlider-minimalist-round .anythingControls ul {
|
||||
margin: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
div.anythingSlider-minimalist-round .anythingControls ul li {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
div.anythingSlider-minimalist-round .anythingControls ul a {
|
||||
display: block;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
margin: 3px;
|
||||
padding: 0;
|
||||
outline: 0;
|
||||
border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Navigation size window arrows */
|
||||
div.anythingSlider-minimalist-round .anythingControls li.next a span, div.anythingSlider-minimalist-round .anythingControls li.prev a span {
|
||||
text-indent: 1px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
div.anythingSlider-minimalist-round .anythingControls li.prev a, div.anythingSlider-minimalist-round .anythingControls li.next a {
|
||||
color: #ddd;
|
||||
}
|
||||
div.anythingSlider-minimalist-round .anythingControls li.next a:hover, div.anythingSlider-minimalist-round .anythingControls li.prev a:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* slider autoplay right-to-left, reverse order of nav links to look better */
|
||||
div.anythingSlider-minimalist-round.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
|
||||
div.anythingSlider-minimalist-round.rtl .anythingControls ul { float: left; } /* move nav link group to left */
|
||||
/* div.anythingSlider-minimalist-round.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */
|
||||
|
||||
/* Autoplay Start/Stop button */
|
||||
div.anythingSlider-minimalist-round .start-stop {
|
||||
margin: 3px;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: relative;
|
||||
bottom: 2px;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
float: right;
|
||||
border-radius: 7px;
|
||||
-moz-border-radius: 7px;
|
||||
-webkit-border-radius: 7px;
|
||||
}
|
||||
|
||||
/* Extra - replace defaults */
|
||||
div.anythingSlider-minimalist-round {
|
||||
padding: 6px 30px;
|
||||
}
|
||||
|
||||
/* text indent moved to span inside "a", for IE7; apparently, a negative text-indent on an "a" link moves the link as well as the text */
|
||||
div.anythingSlider-minimalist-round .arrow a span, div.anythingSlider-minimalist-round .anythingControls ul a span, div.anythingSlider-minimalist-round .start-stop span {
|
||||
display: block;
|
||||
line-height: 1px; /* needed for IE7 */
|
||||
text-indent: -9999px;
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
/*
|
||||
AnythingSlider v1.5.10 Minimalist Square Theme
|
||||
By Rob Garrison
|
||||
*/
|
||||
|
||||
/****** SET COLORS HERE *******/
|
||||
/* Default State */
|
||||
div.anythingSlider-minimalist-square .anythingWindow {
|
||||
border-top: 3px solid #333;
|
||||
border-bottom: 3px solid #333;
|
||||
}
|
||||
div.anythingSlider-minimalist-square .anythingControls ul a {
|
||||
border: 1px solid #000;
|
||||
background: #333;
|
||||
}
|
||||
div.anythingSlider-minimalist-square .anythingControls ul a:hover, div.anythingSlider-minimalist-square .anythingControls ul a.cur {
|
||||
background: #777;
|
||||
}
|
||||
div.anythingSlider-minimalist-square .start-stop {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
div.anythingSlider-minimalist-square .start-stop.playing {
|
||||
background-color: #300;
|
||||
}
|
||||
div.anythingSlider-minimalist-square .start-stop:hover, div.anythingSlider-minimalist-square .start-stop.hover {
|
||||
color: #ddd
|
||||
}
|
||||
|
||||
/* Active State */
|
||||
div.anythingSlider-minimalist-square.activeSlider .anythingWindow {
|
||||
border-color: #164054;
|
||||
}
|
||||
div.anythingSlider-minimalist-square.activeSlider .anythingControls ul a {
|
||||
background-color: #164054;
|
||||
}
|
||||
div.anythingSlider-minimalist-square.activeSlider .anythingControls ul a:hover, div.anythingSlider-minimalist-square.activeSlider .anythingControls ul a.cur {
|
||||
background: #fff;
|
||||
}
|
||||
div.anythingSlider-minimalist-square.activeSlider .start-stop.playing {
|
||||
background-color: #f00;
|
||||
}
|
||||
div.anythingSlider-minimalist-square .start-stop:hover, div.anythingSlider-minimalist-square .start-stop.hover {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
/* Navigation Arrows */
|
||||
div.anythingSlider-minimalist-square .arrow {
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
div.anythingSlider-minimalist-square .arrow a {
|
||||
display: block;
|
||||
height: 40px;
|
||||
margin-top: -20px; /* half height of image */
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
outline: 0;
|
||||
background: url(../images/arrows-minimalist.png) no-repeat;
|
||||
}
|
||||
div.anythingSlider-minimalist-square .forward { right: 0; }
|
||||
div.anythingSlider-minimalist-square .back { left: 0; }
|
||||
div.anythingSlider-minimalist-square .forward a { background-position: right bottom; }
|
||||
div.anythingSlider-minimalist-square .back a { background-position: left bottom; }
|
||||
div.anythingSlider-minimalist-square .forward a:hover, div.anythingSlider-minimalist-square .forward a.hover { background-position: right top; }
|
||||
div.anythingSlider-minimalist-square .back a:hover, div.anythingSlider-minimalist-square .back a.hover { background-position: left top; }
|
||||
|
||||
/* Navigation Links */
|
||||
div.anythingSlider-minimalist-square .anythingControls {
|
||||
float: right;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 15%;
|
||||
z-index: 100;
|
||||
opacity: 0.75;
|
||||
filter: alpha(opacity=75);
|
||||
}
|
||||
div.anythingSlider-minimalist-square .anythingControls ul {
|
||||
margin: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
div.anythingSlider-minimalist-square .anythingControls ul li {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
div.anythingSlider-minimalist-square .anythingControls ul a {
|
||||
display: block;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
margin: 3px;
|
||||
padding: 0;
|
||||
outline: 0;
|
||||
border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
}
|
||||
|
||||
/* Navigation size window arrows */
|
||||
div.anythingSlider-minimalist-square .anythingControls li.next a span, div.anythingSlider-minimalist-square .anythingControls li.prev a span {
|
||||
text-indent: 1px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
div.anythingSlider-minimalist-square .anythingControls li.prev a, div.anythingSlider-minimalist-square .anythingControls li.next a {
|
||||
color: #ddd;
|
||||
}
|
||||
div.anythingSlider-minimalist-square .anythingControls li.next a:hover, div.anythingSlider-minimalist-square .anythingControls li.prev a:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* slider autoplay right-to-left, reverse order of nav links to look better */
|
||||
div.anythingSlider-minimalist-square.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
|
||||
div.anythingSlider-minimalist-square.rtl .anythingControls ul { float: left; } /* move nav link group to left */
|
||||
/* div.anythingSlider-minimalist-square.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */
|
||||
|
||||
/* Autoplay Start/Stop button */
|
||||
div.anythingSlider-minimalist-square .start-stop {
|
||||
margin: 3px;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: relative;
|
||||
bottom: 2px;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
float: right;
|
||||
border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
}
|
||||
|
||||
/* Extra - replace defaults */
|
||||
div.anythingSlider-minimalist-square {
|
||||
padding: 6px 30px;
|
||||
}
|
||||
|
||||
/* text indent moved to span inside "a", for IE7; apparently, a negative text-indent on an "a" link moves the link as well as the text */
|
||||
div.anythingSlider-minimalist-square .arrow a span, div.anythingSlider-minimalist-square .anythingControls ul a span, div.anythingSlider-minimalist-square .start-stop span {
|
||||
display: block;
|
||||
line-height: 1px; /* needed for IE7 */
|
||||
text-indent: -9999px;
|
||||
}
|
||||
740
sites/all/libraries/AnythingSlider/demos.html
Normal file
740
sites/all/libraries/AnythingSlider/demos.html
Normal file
@@ -0,0 +1,740 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>AnythingSlider FX Demos</title>
|
||||
<link rel="shortcut icon" href="demos/images/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="demos/images/apple-touch-icon.png">
|
||||
|
||||
<!-- jQuery (required) & jQuery UI (for this demo only) -->
|
||||
<link rel="stylesheet" href="css/jquery-ui.css">
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
|
||||
<script src="js/jquery-ui.min.js"></script>
|
||||
|
||||
<!-- Anything Slider optional plugins -->
|
||||
<script src="js/jquery.easing.1.2.js"></script>
|
||||
|
||||
<!-- Anything Slider -->
|
||||
<link rel="stylesheet" href="css/anythingslider.css">
|
||||
<script src="js/jquery.anythingslider.js"></script>
|
||||
|
||||
<!-- Ideally, add the stylesheet(s) you are going to use here,
|
||||
otherwise they are loaded and appended to the <head> automatically and will over-ride the IE stylesheet below -->
|
||||
<link rel="stylesheet" href="css/theme-metallic.css" media="screen">
|
||||
|
||||
<!-- Older IE stylesheet, to reposition navigation arrows, added AFTER the theme stylesheet above -->
|
||||
<!--[if lte IE 7]>
|
||||
<link rel="stylesheet" href="css/anythingslider-ie.css" type="text/css" media="screen" />
|
||||
<![endif]-->
|
||||
|
||||
<!-- AnythingSlider optional FX extension -->
|
||||
<script src="js/jquery.anythingslider.fx.js"></script>
|
||||
|
||||
<!-- Demos page only -->
|
||||
<link rel="stylesheet" href="demos/css/page.css">
|
||||
<link rel="stylesheet" href="demos/colorbox/colorbox.css">
|
||||
<script src="demos/js/demo.js"></script>
|
||||
<script src="demos/colorbox/jquery.colorbox-min.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="demo2">
|
||||
|
||||
<div id="nav">
|
||||
<a href="index.html">Main Demo</a>
|
||||
<a href="simple.html">Simple Demo</a>
|
||||
<a href="expand.html">Expand Demo</a>
|
||||
<a href="video.html">Video Demo</a>
|
||||
<a class="current" href="demos.html">FX Demos</a>
|
||||
<a class="play" href="http://jsfiddle.net/Mottie/VM8XG/">Playground</a>
|
||||
<a class="git" href="https://github.com/ProLoser/AnythingSlider/wiki">Documentation</a>
|
||||
<a class="git" href="http://github.com/ProLoser/AnythingSlider/downloads">Download</a>
|
||||
<a class="issue" href="https://github.com/ProLoser/AnythingSlider/issues">Issues</a>
|
||||
</div>
|
||||
|
||||
<h1>AnythingSlider FX Demos</h1>
|
||||
|
||||
<h2 class="title">Demo 1: Thumbnails & A Lightbox</h2>
|
||||
|
||||
<!-- AnythingSlider #1 -->
|
||||
<ul id="slider1">
|
||||
<li><img src="demos/images/slide-civil-1.jpg" alt="" title="In Soviet Russia, concrete pours you!"></li>
|
||||
<li><img src="demos/images/slide-env-1.jpg" alt="" title="How many supervisors are there? Wrong! 5, who is taking the picture?"></li>
|
||||
<li><img src="demos/images/slide-civil-2.jpg" alt="" title="Alas, the pylon would never make it to the hydrant, her true love."></li>
|
||||
<li><img src="demos/images/slide-env-2.jpg" alt="" title="Take a left at the traffic circle."></li>
|
||||
</ul>
|
||||
<!-- END AnythingSlider #1 -->
|
||||
<br />
|
||||
|
||||
<div class="accordion">
|
||||
<h3><a href="#">Demo 1 Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>Hover over the demo 1 slider to reveal the thumbnail navigation links - This sliding feature is part of the core AnythingSlider plugin (<code>toggleControls</code> is set to true).</li>
|
||||
<li>Thumbnail images<br /><br />
|
||||
<ul>
|
||||
<li>For this demo, the thumbnail images are premade; but with some server side scripting and modification to the <code>navigationFormatter</code> code, you should be able to create and link to your own thumbnail images.</li>
|
||||
<li>CSS is required to override the metallic theme CSS for thumbnail images to be visible (resize and remove negative text indentation), or you can make a new theme.</li>
|
||||
<li>Add images using the <code>navigationFormatter</code> option as follows:<br /><br />
|
||||
<pre><code> navigationFormatter : function(i, panel){
|
||||
return '<img src="demos/images/th-slide-' + ['civil-1', 'env-1', 'civil-2', 'env-2'][i-1] + '.jpg">';
|
||||
}</code></pre>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Lightbox Popup (<a href="http://colorpowered.com/colorbox/">Colorbox</a> plugin)<br /><br />
|
||||
<ul>
|
||||
<li>Click on the current slider image to open a light box. Press escape or click on the (X) in the lower right corner to close it.</li>
|
||||
<li>Additional CSS is required to modify the Colorbox plugin. The CSS expands the image to completely fill the inside the colorbox popup. Adjust as desired to keep the image proportional.</li>
|
||||
<li>The script attaches a colorbox popup to all images inside the slider. Add a class to the images to modify this behaviour.</li>
|
||||
<li>The colorbox popup will contain all the current slider images. In the script the name "group" is added to all images in the "rel" attribute. This can be done in the HTML to target only the images to be shown in the colorbox - then remove the <code>.attr('rel','group')</code> in the script.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The AnythingSlider FX extension is not required to add any of the above functionality.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Header</a></h3>
|
||||
<div>
|
||||
<pre><code> <!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
|
||||
|
||||
<!-- Anything Slider optional plugins -->
|
||||
<script src="js/jquery.easing.1.2.js"></script>
|
||||
|
||||
<!-- Anything Slider -->
|
||||
<link href="css/anythingslider.css" rel="stylesheet">
|
||||
<script src="js/jquery.anythingslider.min.js"></script>
|
||||
|
||||
<!-- ColorBox -->
|
||||
<link href="demos/colorbox/colorbox.css" rel="stylesheet">
|
||||
<script src="demos/colorbox/jquery.colorbox-min.js"></script></code></pre>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">CSS & HTML</a></h3>
|
||||
<div>
|
||||
<pre><code>/* New in version 1.7+ */
|
||||
#slider1 {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
list-style: none;
|
||||
}
|
||||
/* CSS to expand the image to fit inside colorbox */
|
||||
#cboxPhoto { width: 100%; height: 100%; margin: 0 !important; }
|
||||
/* Change metallic theme defaults to show thumbnails -
|
||||
using #demo2 (page wrapper) to increase this CSS priority */
|
||||
#demo2 div.anythingSlider-metallic .thumbNav a {
|
||||
background-image: url();
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border: #000 1px solid;
|
||||
border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
text-indent: 0;
|
||||
}
|
||||
/* border around link (image) to show current panel */
|
||||
#demo2 div.anythingSlider-metallic .thumbNav a:hover,
|
||||
#demo2 div.anythingSlider-metallic .thumbNav a.cur {
|
||||
border-color: #fff;
|
||||
}
|
||||
/* reposition the start/stop button */
|
||||
#demo2 div.anythingSlider-metallic .start-stop {
|
||||
margin-top: 15px;
|
||||
}</code></pre>
|
||||
<br>
|
||||
<pre><code><ul id="slider1">
|
||||
<li><img src="demos/images/slide-civil-1.jpg"></li>
|
||||
<li><img src="demos/images/slide-env-1.jpg"></li>
|
||||
<li><img src="demos/images/slide-civil-2.jpg"></li>
|
||||
<li><img src="demos/images/slide-env-2.jpg"></li>
|
||||
</ul></code></pre>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Script</a></h3>
|
||||
<div><pre><code>$(function(){
|
||||
$('#slider1')
|
||||
.anythingSlider({
|
||||
toggleControls : true,
|
||||
theme : 'metallic',
|
||||
navigationFormatter : function(i, panel){ // add thumbnails as navigation links
|
||||
return '<img src="demos/images/th-slide-' + ['civil-1', 'env-1', 'civil-2', 'env-2'][i - 1] + '.jpg">';
|
||||
}
|
||||
})
|
||||
// target all images inside the current slider
|
||||
// replace with 'img.someclass' to target specific images
|
||||
.find('.panel:not(.cloned) img') // ignore the cloned panels
|
||||
.attr('rel','group') // add all slider images to a colorbox group
|
||||
.colorbox({
|
||||
width: '90%',
|
||||
height: '90%',
|
||||
href: function(){ return $(this).attr('src'); },
|
||||
// use $(this).attr('title') for specific image captions
|
||||
title: 'Press escape to close',
|
||||
rel: 'group'
|
||||
});
|
||||
});</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<h2 class="title">Demo 2: FX Extension Panel Effects</h2>
|
||||
|
||||
<!-- AnythingSlider #2 -->
|
||||
<ul id="slider2">
|
||||
<li class="panel1">
|
||||
<div>
|
||||
<div class="textSlide">
|
||||
<img src="demos/images/251356.jpg" alt="tomato sandwich" style="float: right; margin: 0 0 2px 10px;" />
|
||||
<h3>Queenie's Killer Tomato Bagel Sandwich</h3>
|
||||
<h4>Ingredients</h4>
|
||||
<ul>
|
||||
<li>1 bagel, split and toasted</li>
|
||||
<li>2 tablespoons cream cheese</li>
|
||||
<li>1 roma (plum) tomatoes, thinly sliced</li>
|
||||
<li>salt and pepper to taste</li>
|
||||
<li>4 leaves fresh basil</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="panel2">
|
||||
<div class="quoteSlide">
|
||||
<blockquote>In awe I watched the waxing moon ride across the zenith of the heavens like an ambered chariot towards the ebon void of infinite space wherein the tethered belts of Jupiter and Mars hang forever festooned in their orbital majesty. And as I looked at all this I thought... I must put a roof on this lavatory.<p>~ Les Dawson</p></blockquote>
|
||||
</div>
|
||||
</li>
|
||||
<li class="panel3">
|
||||
<img class="expand" src="demos/images/slide-tele-1.jpg" alt="" />
|
||||
</li>
|
||||
<li class="panel4" id="quote2">
|
||||
<div class="quoteSlide">
|
||||
<blockquote>Life is conversational. Web design should be the same way. On the web, you’re talking to someone you’ve probably never met – so it’s important to be clear and precise. Thus, well structured navigation and content organization goes hand in hand with having a good conversation.</blockquote>
|
||||
<p> - <a id='perma' href='http://quotesondesign.com/chikezie-ejiasi/'>Chikezie Ejiasi</a></p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="panel5">
|
||||
<img class="fade" src="demos/images/slide-tele-2.jpg" alt="" />
|
||||
</li>
|
||||
</ul>
|
||||
<!-- END AnythingSlider #2 -->
|
||||
|
||||
<br>
|
||||
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Demo 2 Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>The AnythingSlider FX extension is required to add this functionality.</li>
|
||||
<li>No additional CSS is required, unless it is used for a specific element (see the captions section).</li>
|
||||
<li>Effects Methods:<br><br>
|
||||
<ul>
|
||||
<li>The effects are set up so that the slider element on each panel is in its default (final) position in the "inFx" definition (element positions to zero, opacity to 1, etc) and the "outFX" definitions are set the other position the element is in to achieve the animation.</li>
|
||||
<li>The script binds to the "slide_init" (for "outFx" animation) and "slide_complete" (for "inFx" animation) anythingSlider events.</li>
|
||||
<li>The base effects are predefined shortcut methods. I have included the custom effect equivalents to these base effects in the script examples.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Base effects:<br><br>
|
||||
<ul>
|
||||
<li>Base effects are standard effects: <code>top</code>, <code>bottom</code>, <code>left</code>, <code>right</code>, <code>fade</code>, <code>expand</code>, <code>listLR</code>, <code>listRL</code>, <code>caption-Top</code>, <code>caption-Right</code>, <code>caption-Bottom</code>, <code>caption-Left</code>.</li>
|
||||
<li>Use the base effects as follows:<br><br>
|
||||
<pre><code> $('#slider2').anythingSliderFx({
|
||||
'.selector1' : [ 'effect(s)', 'size', 'time', 'easing' ],
|
||||
'.selector2' : [ 'effect(s)', 'size', 'time', 'easing' ]
|
||||
});</code></pre>
|
||||
'size', 'time' and 'easing' are optional, but they must remain in that order. So if you want to add an effect time, you must also set a size - <code>[ 'effect(s)', 'size', 'time' ]</code>. To add an easing, all parameters must be included.</li>
|
||||
<li>Defaults: If 'size', 'time' or 'easing' is not defined, it will be set to its default value:<br><br>
|
||||
<ul>
|
||||
<li>size : based on initial slider height and width</li>
|
||||
<li>'inFx' time : 400 (ms)</li>
|
||||
<li>'outFx' time : 350 (ms)</li>
|
||||
<li>easing : 'swing'</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>How base effects are setup:<br><br>
|
||||
<ul>
|
||||
<li><code>top</code>, <code>bottom</code>, <code>left</code>, <code>right</code>: Default 'inFx' position is zero, 'outFx' position is based on the initial slider height and width.</li>
|
||||
<li><code>fade</code>: Default 'inFx' has an opacity set to one, 'outFx' opacity is zero.</li>
|
||||
<li><code>expand</code>: Default 'inFx' sets the width to 100%, left and right positions to 0%; the 'outFx' width is set to 10%, left and right set to 50% to somewhat center the image. When changing this size option, use percentage values, but anything more than 20% the image position will noticeably be not centered.</li>
|
||||
<li><code>listLR</code>: Default 'inFx' left position is zero; 'outFx' position will make ':odd' elements move (L)eft and ':even' elements move (R)ight the width of the slider.</li>
|
||||
<li><code>listRL</code>: Default 'inFx' left position is zero; 'outFx' position will make ':odd' elements move (R)ight and ':even' elements move (L)eft the width of the slider.</li>
|
||||
<li><code>caption-{direction}</code>: This effect is opposite of the others. The default 'inFx' positions the element so it is in view while the 'outFx' positions the element out of view. See demo 3 for more details.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Combine any of these standard effects as desired (e.g. "top fade"); but of course, using 'top bottom' will not work as you expect (unless you wanted to blow up your computer ;) LOL).</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Custom effects:<br><br>
|
||||
<ul>
|
||||
<li>Custom effects allow you to use any of the standard jQuery animation parameters (e.g. top, left, margin, padding, width, height, etc). See the examples below.</li>
|
||||
<li>Custom effects can be mixed in with base effects as desired.</li>
|
||||
<li>When using custom effects it is important that each element with an 'inFx' method has a matching 'outFx' method, or those elements will be abnormally positioned and/or disappear from view.</li>
|
||||
<li>Standard setup for custom effects is as follows (there is no specific order required):<br><br>
|
||||
<pre><code> $('#slider1').anythingSliderFx({
|
||||
inFx : {
|
||||
'.selector1' : { top : 0, duration: 400, easing : 'easeOutBounce' },
|
||||
'.selector2' : { left: 0, duration: 400 }
|
||||
},
|
||||
// out = the animation that occurs when you slide "out" of a panel
|
||||
// (it also occurs before the "in" animation)
|
||||
outFx : {
|
||||
'.selector1' : { top : '-100px', duration: 350 },
|
||||
'.selector2' : { left : '-200px' }
|
||||
}</code></pre></li>
|
||||
<li>Defaults: if 'time' or 'easing' is not defined in the custom effects code, it will be set to its default value:<br><br>
|
||||
<ul>
|
||||
<li>'inFx' time : 400 (ms)</li>
|
||||
<li>'outFx' time : 350 (ms)</li>
|
||||
<li>easing : 'swing'</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Header</a></h3>
|
||||
<div>
|
||||
<pre><code> <!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
|
||||
|
||||
<!-- Anything Slider optional plugins -->
|
||||
<script src="js/jquery.easing.1.2.js"></script>
|
||||
|
||||
<!-- Anything Slider -->
|
||||
<link href="css/anythingslider.css" rel="stylesheet">
|
||||
<script src="js/jquery.anythingslider.min.js"></script>
|
||||
|
||||
<!-- Anything Slider optional FX extension -->
|
||||
<script src="js/jquery.anythingslider.fx.min.js"></script></code></pre>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">CSS & HTML</a></h3>
|
||||
<div><pre><code>/* New in version 1.7+ */
|
||||
#slider2 {
|
||||
width: 600px;
|
||||
height: 350px;
|
||||
list-style: none;
|
||||
}</code></pre>
|
||||
There is no change from the standard HTML setup, unless you want to add more specific classes so you can target them with effects.<br><br>
|
||||
<pre><code> <ul id="slider2">
|
||||
<li class="panel1">
|
||||
<div class="textSlide">
|
||||
<img src="demos/images/251356.jpg" alt="tomato sandwich" style="float: right;
|
||||
margin: 0 0 2px 10px;">
|
||||
<h3>Queenie's Killer Tomato Bagel Sandwich</h3>
|
||||
<h4>Ingredients</h4>
|
||||
<ul>
|
||||
<li>1 bagel, split and toasted</li>
|
||||
<li>2 tablespoons cream cheese</li>
|
||||
<li>1 roma (plum) tomatoes, thinly sliced</li>
|
||||
<li>salt and pepper to taste</li>
|
||||
<li>4 leaves fresh basil</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="panel2">
|
||||
<div class="quoteSlide">
|
||||
<blockquote>In awe I watched the waxing moon ride across the zenith of
|
||||
the heavens like an ambered chariot towards the ebon void of infinite space
|
||||
wherein the tethered belts of Jupiter and Mars hang forever festooned in
|
||||
their orbital majesty. And as I looked at all this I thought... I must put
|
||||
a roof on this lavatory.<br>-- Les Dawson</blockquote>
|
||||
</div>
|
||||
</li>
|
||||
<li class="panel3">
|
||||
<img class="expand" src="demos/images/slide-tele-1.jpg" alt="">
|
||||
</li>
|
||||
<li class="panel4">
|
||||
<div class="quoteSlide">
|
||||
<blockquote>Life is conversational. Web design should be the same way.
|
||||
On the web, you&#8217;re talking to someone you&#8217;ve probably
|
||||
never met – so it&#8217;s important to be clear and precise.
|
||||
Thus, well structured navigation and content organization goes hand in hand
|
||||
with having a good conversation.</blockquote>
|
||||
<p>
|
||||
- <a href='http://quotesondesign.com/chikezie-ejiasi/'>Chikezie Ejiasi</a>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="panel5">
|
||||
<img class="fade" src="demos/images/slide-tele-2.jpg" alt="">
|
||||
</li>
|
||||
</ul></code></pre>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Script - FX addon, using base FX</a></h3>
|
||||
<div><pre><code>$(function(){
|
||||
$('#slider2') // Demo 2 code, using FX base effects
|
||||
.anythingSlider({
|
||||
resizeContents : false,
|
||||
navigationFormatter : function(i, panel){
|
||||
return ['Recipe', 'Quote', 'Image', 'Quote #2', 'Image #2', 'Test'][i - 1];
|
||||
}
|
||||
})
|
||||
.anythingSliderFx({
|
||||
// base FX definitions
|
||||
// '.selector' : [ 'effect(s)', 'size', 'time', 'easing' ]
|
||||
// 'size', 'time' and 'easing' are optional parameters, but must be kept in order if added
|
||||
'.quoteSlide:first *' : [ 'grow', '24px', '400', 'easeInOutCirc' ],
|
||||
'.quoteSlide:last' : [ 'top', '500px', '400', 'easeOutElastic' ],
|
||||
'.expand' : [ 'expand', '10%', '400', 'easeOutBounce' ],
|
||||
'.textSlide h3' : [ 'top fade', '200px', '500', 'easeOutBounce' ],
|
||||
'.textSlide img,.fade': [ 'fade' ],
|
||||
'.textSlide li' : [ 'listLR' ]
|
||||
});
|
||||
});</code></pre>
|
||||
* Note: Each definition should end with a comma except for the last - see examples above.
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Script - FX addon, using custom FX</a></h3>
|
||||
<div><pre><code>$(function(){
|
||||
$('#slider2') // Demo 2 code, using FX full control
|
||||
.anythingSlider({
|
||||
resizeContents : false,
|
||||
navigationFormatter : function(i, panel){
|
||||
return ['Recipe', 'Quote', 'Image', 'Quote #2', 'Image #2', 'Test'][i - 1];
|
||||
}
|
||||
})
|
||||
.anythingSliderFx({
|
||||
// base FX definitions can be mixed and matched in here too.
|
||||
'.fade' : [ 'fade' ],
|
||||
|
||||
// for more precise control, use the "inFx" and "outFx" definitions
|
||||
// inFx = the animation that occurs when you slide "in" to a panel
|
||||
inFx : {
|
||||
'.textSlide h3' : { opacity: 1, top : 0, duration: 400, easing : 'easeOutBounce' },
|
||||
'.textSlide li' : { opacity: 1, left : 0, duration: 400 },
|
||||
'.textSlide img' : { opacity: 1, duration: 400 },
|
||||
'.quoteSlide' : { top : 0, duration: 400, easing : 'easeOutElastic' },
|
||||
'.expand' : { width: '100%', top: '0%', left: '0%', duration: 400, easing : 'easeOutBounce' }
|
||||
},
|
||||
// out = the animation that occurs when you slide "out" of a panel
|
||||
// (it also occurs before the "in" animation)
|
||||
outFx : {
|
||||
'.textSlide h3' : { opacity: 0, top : '-100px', duration: 350 },
|
||||
'.textSlide li:odd' : { opacity: 0, left : '-200px', duration: 350 },
|
||||
'.textSlide li:even' : { opacity: 0, left : '200px', duration: 350 },
|
||||
'.textSlide img' : { opacity: 0, duration: 350 },
|
||||
'.quoteSlide:first' : { top : '-500px', duration: 350 },
|
||||
'.quoteSlide:last' : { top : '500px', duration: 350 },
|
||||
'.expand' : { width: '10%', top: '50%', left: '50%', duration: 350 }
|
||||
}
|
||||
});
|
||||
});</code></pre>
|
||||
* Note: Each definition should end with a comma except for the last - see examples above.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
<h2 class="title">Demo 3: Sliding Captions</h2>
|
||||
|
||||
<!-- AnythingSlider #3 -->
|
||||
<ul id="slider3">
|
||||
<li class="panel1">
|
||||
<!-- Note this caption is before the image, all others it is after -->
|
||||
<div class="caption-top">In Soviet Russia, concrete pours you!</div>
|
||||
<img src="demos/images/slide-civil-1.jpg" alt="" />
|
||||
</li>
|
||||
<li class="panel2">
|
||||
<img src="demos/images/slide-env-1.jpg" alt="" />
|
||||
<div class="caption-right">How many supervisors are there? Wrong! 5, who is taking the picture?</div>
|
||||
</li>
|
||||
<li class="panel3">
|
||||
<img src="demos/images/slide-civil-2.jpg" alt="" />
|
||||
<div class="caption-bottom">Alas, the pylon would never make it to the hydrant, her true love.</div>
|
||||
</li>
|
||||
<li class="panel4">
|
||||
<img src="demos/images/slide-env-2.jpg" alt="" />
|
||||
<div class="caption-left">Take a left at the traffic circle.</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- END AnythingSlider #3 -->
|
||||
|
||||
<br>
|
||||
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Demo 3 Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>CSS<br><br>
|
||||
<ul>
|
||||
<li>The image needs to be set to 100% height and width because AnythingSlider will only automatically expand solitary objects; but here we have a caption!</li>
|
||||
<li>Note the caption widths & heights include the padding, so for example the top & bottom caption height is set to 30px instead of 50px to include the 10px padding... same goes for the height of all the captions.</li>
|
||||
<li>If you are using the close button script, make sure you use the full width and/or height (include padding) as well.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In the HTML, note that the top caption comes before the image; whereas the bottom, left and right caption HTML comes after.</li>
|
||||
<li>Script<br><br>
|
||||
<ul>
|
||||
<li>Hover to show caption<br><br>
|
||||
<ul>
|
||||
<li>This code will reveal a caption when hovering over a slider panel, and hide on mouse out.</li>
|
||||
<li>There is a lot of extra code, for captions in multiple positions, so ideally remove the unused portions to maximize the efficiency of the code.</li>
|
||||
<li>This script does not need the AnythingSlider FX extension.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Slide in caption on new panel<br><br>
|
||||
<ul>
|
||||
<li>This code reveals a caption when a new panel comes into view.</li>
|
||||
<li>Code examples are included below to show and reveal captions using base and custom FX. These code examples reveal the caption when the panel comes into view and hide it as it scrolls out of view.</li>
|
||||
<li>A short additional script adds a close button (x) to each caption to allow closing the caption while on a specific panel. CSS to position the button is needed and included.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The script needs to hide the caption when out of view (especially for right and left captions) otherwise they interfere with other panels of the slider.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Header</a></h3>
|
||||
<div>
|
||||
<pre><code> <!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
|
||||
|
||||
<!-- Anything Slider optional plugins -->
|
||||
<script src="js/jquery.easing.1.2.js"></script>
|
||||
|
||||
<!-- Anything Slider -->
|
||||
<link href="css/anythingslider.css" rel="stylesheet">
|
||||
<script src="js/jquery.anythingslider.min.js"></script>
|
||||
|
||||
<!-- Anything Slider optional FX extension -->
|
||||
<script src="js/jquery.anythingslider.fx.min.js"></script></code></pre>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">CSS</a></h3>
|
||||
<div><pre><code>/* New in version 1.7+ */
|
||||
#slider3 {
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
list-style: none;
|
||||
}
|
||||
/* images with caption */
|
||||
#slider3 img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* position the panels so the captions appear correctly */
|
||||
#slider3 .panel { position: relative; }
|
||||
/* captions */
|
||||
#slider3 .caption-top, #slider3 .caption-right,
|
||||
#slider3 .caption-bottom, #slider3 .caption-left {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
opacity: .8;
|
||||
filter: alpha(opacity=80);
|
||||
}
|
||||
/* Top caption - padding is included in the width (480px here, 500px in the script), same for height */
|
||||
#slider3 .caption-top {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 480px;
|
||||
height: 30px;
|
||||
}
|
||||
/* Right caption - padding is included in the width (130px here, 150px in the script), same for height */
|
||||
#slider3 .caption-right {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 130px;
|
||||
height: 180px;
|
||||
}
|
||||
/* Bottom caption - padding is included in the width (480px here, 500px in the script), same for height */
|
||||
#slider3 .caption-bottom {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 480px;
|
||||
height: 30px;
|
||||
}
|
||||
/* Left caption - padding is included in the width (130px here, 150px in the script), same for height */
|
||||
#slider3 .caption-left {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 130px;
|
||||
height: 180px;
|
||||
}
|
||||
/* Caption close button */
|
||||
.caption-top .close, .caption-right .close,
|
||||
.caption-bottom .close, .caption-left .close {
|
||||
font-size: 80%;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
display: inline-block;
|
||||
}</code></pre>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">HTML</a></h3>
|
||||
<div><pre><code> <ul id="slider3">
|
||||
<li>
|
||||
<!-- Note this caption is before the image, all others it is after -->
|
||||
<div class="caption-top">
|
||||
In Soviet Russia, concrete pours you!
|
||||
</div>
|
||||
<img src="demos/images/slide-civil-1.jpg" alt="">
|
||||
</li>
|
||||
<li>
|
||||
<img src="demos/images/slide-env-1.jpg" alt="">
|
||||
<div class="caption-right">
|
||||
How many supervisors are there? Wrong! 5, who is taking the picture?
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="demos/images/slide-civil-2.jpg" alt="">
|
||||
<div class="caption-bottom">
|
||||
Alas, the pylon would never make it to the hydrant, her true love.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<img src="demos/images/slide-env-2.jpg" alt="">
|
||||
<div class="caption-left">
|
||||
Take a left at the traffic circle.
|
||||
</div>
|
||||
</li>
|
||||
</ul></code></pre>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Script - Caption appears on hover (FX extension not required)</a></h3>
|
||||
<div><pre><code>$(function(){
|
||||
$('#slider3')
|
||||
.anythingSlider()
|
||||
/* this code will make the caption appear when you hover over the panel
|
||||
remove the extra statements if you don't have captions in that location */
|
||||
.find('.panel')
|
||||
.find('div[class*=caption]').css({ position: 'absolute' }).end()
|
||||
.hover(function(){ showCaptions( $(this) ) }, function(){ hideCaptions( $(this) ); });
|
||||
|
||||
showCaptions = function(el){
|
||||
var $this = el;
|
||||
if ($this.find('.caption-top').length) {
|
||||
$this.find('.caption-top')
|
||||
.show()
|
||||
.animate({ top: 0, opacity: 1 }, 400);
|
||||
}
|
||||
if ($this.find('.caption-right').length) {
|
||||
$this.find('.caption-right')
|
||||
.show()
|
||||
.animate({ right: 0, opacity: 1 }, 400);
|
||||
}
|
||||
if ($this.find('.caption-bottom').length) {
|
||||
$this.find('.caption-bottom')
|
||||
.show()
|
||||
.animate({ bottom: 0, opacity: 1 }, 400);
|
||||
}
|
||||
if ($this.find('.caption-left').length) {
|
||||
$this.find('.caption-left')
|
||||
.show()
|
||||
.animate({ left: 0, opacity: 1 }, 400);
|
||||
}
|
||||
};
|
||||
hideCaptions = function(el){
|
||||
var $this = el;
|
||||
if ($this.find('.caption-top').length) {
|
||||
$this.find('.caption-top')
|
||||
.stop()
|
||||
.animate({ top: -50, opacity: 0 }, 350, function(){
|
||||
$this.find('.caption-top').hide(); });
|
||||
}
|
||||
if ($this.find('.caption-right').length) {
|
||||
$this.find('.caption-right')
|
||||
.stop()
|
||||
.animate({ right: -150, opacity: 0 }, 350, function(){
|
||||
$this.find('.caption-right').hide(); });
|
||||
}
|
||||
if ($this.find('.caption-bottom').length) {
|
||||
$this.find('.caption-bottom')
|
||||
.stop()
|
||||
.animate({ bottom: -50, opacity: 0 }, 350, function(){
|
||||
$this.find('.caption-bottom').hide(); });
|
||||
}
|
||||
if ($this.find('.caption-left').length) {
|
||||
$this.find('.caption-left')
|
||||
.stop()
|
||||
.animate({ left: -150, opacity: 0 }, 350, function(){
|
||||
$this.find('.caption-left').hide(); });
|
||||
}
|
||||
};
|
||||
|
||||
// hide all captions initially
|
||||
hideCaptions( $('#slider3 .panel') );
|
||||
});</code></pre>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Script - FX addon, using base FX</a></h3>
|
||||
<div><pre><code>$(function(){
|
||||
$('#slider3')
|
||||
.anythingSlider()
|
||||
.anythingSliderFx({
|
||||
// '.selector' : [ 'caption', 'distance/size', 'time', 'easing' ]
|
||||
// 'distance/size', 'time' and 'easing' are optional parameters
|
||||
'.caption-top' : [ 'caption-Top', '50px' ],
|
||||
'.caption-right' : [ 'caption-Right', '130px', '1000', 'easeOutBounce' ],
|
||||
'.caption-bottom' : [ 'caption-Bottom', '50px' ],
|
||||
'.caption-left' : [ 'caption-Left', '130px', '1000', 'easeOutBounce' ]
|
||||
})
|
||||
/* add a close button (x) to the caption */
|
||||
.find('div[class*=caption]')
|
||||
.css({ position: 'absolute' })
|
||||
.prepend('<span class="close">x</span>')
|
||||
.find('.close').click(function(){
|
||||
var cap = $(this).parent(),
|
||||
ani = { bottom : -50 }; // bottom
|
||||
if (cap.is('.caption-top')) { ani = { top: -50 }; }
|
||||
if (cap.is('.caption-left')) { ani = { left: -150 }; }
|
||||
if (cap.is('.caption-right')) { ani = { right: -150 }; }
|
||||
cap.animate(ani, 400, function(){ cap.hide(); } );
|
||||
});
|
||||
});</code></pre>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Script - FX addon, using custom FX</a></h3>
|
||||
<div><pre><code>$(function(){
|
||||
$('#slider3')
|
||||
.anythingSlider()
|
||||
/* this "custom" code is the equivalent of the base caption functions */
|
||||
.anythingSliderFx({
|
||||
inFx: {
|
||||
'.caption-top' : { top: 0, opacity: 0.8, duration: 400 },
|
||||
'.caption-right' : { right: 0, opacity: 0.8, duration: 400 },
|
||||
'.caption-bottom' : { bottom: 0, opacity: 0.8, duration: 400 },
|
||||
'.caption-left' : { left: 0, opacity: 0.8, duration: 400 }
|
||||
},
|
||||
outFx: {
|
||||
'.caption-top' : { top: -50, opacity: 0, duration: 350 },
|
||||
'.caption-right' : { right: -150, opacity: 0, duration: 350 },
|
||||
'.caption-bottom' : { bottom: -50, opacity: 0, duration: 350 },
|
||||
'.caption-left' : { left: -150, opacity: 0, duration: 350 }
|
||||
}
|
||||
})
|
||||
/* add a close button (x) to the caption */
|
||||
.find('div[class*=caption]')
|
||||
.css({ position: 'absolute' })
|
||||
.prepend('<span class="close">x</span>')
|
||||
.find('.close').click(function(){
|
||||
var cap = $(this).parent(),
|
||||
ani = { bottom : -50 }; // bottom
|
||||
if (cap.is('.caption-top')) { ani = { top: -50 }; }
|
||||
if (cap.is('.caption-left')) { ani = { left: -150 }; }
|
||||
if (cap.is('.caption-right')) { ani = { right: -150 }; }
|
||||
cap.animate(ani, 400, function(){ cap.hide(); } );
|
||||
});
|
||||
});</code></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
97
sites/all/libraries/AnythingSlider/expand.html
Normal file
97
sites/all/libraries/AnythingSlider/expand.html
Normal file
@@ -0,0 +1,97 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>AnythingSlider Expanding Demo</title>
|
||||
<link rel="shortcut icon" href="demos/images/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="demos/images/apple-touch-icon.png">
|
||||
|
||||
<!-- jQuery (required) -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="demos/css/page.css">
|
||||
|
||||
<!-- Anything Slider -->
|
||||
<link rel="stylesheet" href="css/anythingslider.css">
|
||||
<script src="js/jquery.anythingslider.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
$('#slider1').anythingSlider({
|
||||
// theme : 'metallic',
|
||||
expand : true,
|
||||
autoPlay : true
|
||||
});
|
||||
|
||||
$('#slider2').anythingSlider({
|
||||
expand : true,
|
||||
showMultiple : 2,
|
||||
changeBy : 2
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
<!-- Older IE stylesheet, to reposition navigation arrows, added AFTER the theme stylesheet -->
|
||||
<!--[if lte IE 7]>
|
||||
<link rel="stylesheet" href="css/anythingslider-ie.css" type="text/css" media="screen" />
|
||||
<![endif]-->
|
||||
</head>
|
||||
|
||||
<body id="expand">
|
||||
|
||||
<!-- Links to other demo pages & docs -->
|
||||
<div id="nav">
|
||||
<a href="index.html">Main Demo</a>
|
||||
<a href="simple.html">Simple Demo</a>
|
||||
<a class="current" href="expand.html">Expand Demo</a>
|
||||
<a href="video.html">Video Demo</a>
|
||||
<a href="demos.html">FX Demos</a>
|
||||
<a class="play" href="http://jsfiddle.net/Mottie/VM8XG/">Playground</a>
|
||||
<a class="git" href="https://github.com/ProLoser/AnythingSlider/wiki">Documentation</a>
|
||||
<a class="git" href="http://github.com/ProLoser/AnythingSlider/downloads">Download</a>
|
||||
<a class="issue" href="https://github.com/ProLoser/AnythingSlider/issues">Issues</a>
|
||||
</div>
|
||||
<!-- End Links -->
|
||||
|
||||
<h1>Expanding Slider Demo*</h1>
|
||||
<h3>* Resize the browser window</h3>
|
||||
<br>
|
||||
<h2>Full page width</h2>
|
||||
|
||||
<!-- Expanding AnythingSlider 100% width -->
|
||||
|
||||
<div id="wrapper1">
|
||||
<ul id="slider1">
|
||||
<li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
|
||||
<li><img src="demos/images/slide-env-1.jpg" alt=""></li>
|
||||
<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
|
||||
<li><img src="demos/images/slide-env-2.jpg" alt=""></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- END AnythingSlider -->
|
||||
|
||||
<br><br><br><br>
|
||||
|
||||
<h2>Half page width with two images showing</h2>
|
||||
<!-- Expanding AnythingSlider 50% width -->
|
||||
|
||||
<div id="wrapper2">
|
||||
<ul id="slider2">
|
||||
<li><img src="demos/images/slide-tele-1.jpg" alt=""></li>
|
||||
<li><img src="demos/images/slide-tele-2.jpg" alt=""></li>
|
||||
<li><img src="demos/images/slide-env-1.jpg" alt=""></li>
|
||||
<li><img src="demos/images/slide-env-2.jpg" alt=""></li>
|
||||
<li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
|
||||
<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- END AnythingSlider -->
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
497
sites/all/libraries/AnythingSlider/index.html
Normal file
497
sites/all/libraries/AnythingSlider/index.html
Normal file
@@ -0,0 +1,497 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>AnythingSlider</title>
|
||||
<link rel="shortcut icon" href="demos/images/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="demos/images/apple-touch-icon.png">
|
||||
|
||||
<!-- jQuery (required) -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
|
||||
|
||||
<!-- Anything Slider optional plugins -->
|
||||
<script src="js/jquery.easing.1.2.js"></script>
|
||||
<!-- http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js -->
|
||||
<script src="js/swfobject.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="demos/css/page.css" media="screen">
|
||||
|
||||
<!-- AnythingSlider -->
|
||||
<link rel="stylesheet" href="css/anythingslider.css">
|
||||
<script src="js/jquery.anythingslider.js"></script>
|
||||
|
||||
<!-- AnythingSlider video extension; optional, but needed to control video pause/play -->
|
||||
<script src="js/jquery.anythingslider.video.js"></script>
|
||||
|
||||
<!-- Ideally, add the stylesheet(s) you are going to use here,
|
||||
otherwise they are loaded and appended to the <head> automatically and will over-ride the IE stylesheet below -->
|
||||
<link rel="stylesheet" href="css/theme-metallic.css">
|
||||
<link rel="stylesheet" href="css/theme-minimalist-round.css">
|
||||
<link rel="stylesheet" href="css/theme-minimalist-square.css">
|
||||
<link rel="stylesheet" href="css/theme-construction.css">
|
||||
<link rel="stylesheet" href="css/theme-cs-portfolio.css">
|
||||
|
||||
<!-- Older IE stylesheet, to reposition navigation arrows, added AFTER the theme stylesheet above -->
|
||||
<!--[if lte IE 7]>
|
||||
<link rel="stylesheet" href="css/anythingslider-ie.css" type="text/css" media="screen" />
|
||||
<![endif]-->
|
||||
|
||||
<script>
|
||||
// Demo functions
|
||||
// **************
|
||||
$(function(){
|
||||
|
||||
// External Link with callback function
|
||||
$("#slide-jump").click(function(){
|
||||
$('#slider2').anythingSlider(4, function(slider){ /* alert('Now on page ' + slider.currentPage); */ });
|
||||
return false;
|
||||
});
|
||||
|
||||
// External Link
|
||||
$("a.muppet").click(function(){
|
||||
$('#slider1').anythingSlider(5);
|
||||
$(document).scrollTop(0); // make the page scroll to the top so you can watch the video
|
||||
return false;
|
||||
});
|
||||
|
||||
// Report Events to console & features list
|
||||
$('#slider1, #slider2').bind('before_initialize initialized swf_completed slideshow_start slideshow_stop slideshow_paused slideshow_unpaused slide_init slide_begin slide_complete', function(e, slider){
|
||||
// show object ID + event (e.g. "slider1: slide_begin")
|
||||
var txt = slider.$el[0].id + ': ' + e.type + ', now on panel #' + slider.currentPage;
|
||||
$('#status').text(txt);
|
||||
if (window.console && window.console.firebug){ console.debug(txt); } // added window.console.firebug to make this work in Opera
|
||||
});
|
||||
|
||||
// Theme Selector (This is really for demo purposes only)
|
||||
var themes = ['minimalist-round','minimalist-square','metallic','construction','cs-portfolio'];
|
||||
$('#currentTheme').change(function(){
|
||||
var theme = $(this).val();
|
||||
$('#slider1').closest('div.anythingSlider')
|
||||
.removeClass( $.map(themes, function(t){ return 'anythingSlider-' + t; }).join(' ') )
|
||||
.addClass('anythingSlider-' + theme);
|
||||
$('#slider1').anythingSlider(); // update slider - needed to fix navigation tabs
|
||||
});
|
||||
|
||||
// Add a slide
|
||||
var imageNumber = 1;
|
||||
$('button.add').click(function(){
|
||||
$('#slider1')
|
||||
.append('<li><img src="demos/images/slide-tele-' + (++imageNumber%2 + 1) + '.jpg" alt="" /></li>')
|
||||
.anythingSlider(); // update the slider
|
||||
});
|
||||
$('button.remove').click(function(){
|
||||
$('#slider1 > li:not(.cloned):last').remove();
|
||||
$('#slider1').anythingSlider(); // update the slider
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Set up Sliders
|
||||
// **************
|
||||
$(function(){
|
||||
|
||||
$('#slider1').anythingSlider({
|
||||
theme : 'metallic',
|
||||
easing : 'easeInOutBack',
|
||||
onSlideComplete : function(slider){
|
||||
// alert('Welcome to Slide #' + slider.currentPage);
|
||||
}
|
||||
});
|
||||
|
||||
$('#slider2').anythingSlider({
|
||||
resizeContents : false, // If true, solitary images/objects in the panel will expand to fit the viewport
|
||||
navigationSize : 3, // Set this to the maximum number of visible navigation tabs; false to disable
|
||||
navigationFormatter : function(index, panel){ // Format navigation labels with text
|
||||
return ['Recipe', 'Quote', 'Image', 'Quote #2', 'Image #2'][index - 1];
|
||||
},
|
||||
onSlideComplete: function(slider) {
|
||||
// keep the current navigation tab in view
|
||||
slider.navWindow( slider.currentPage );
|
||||
},
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body id="main">
|
||||
|
||||
<div id="page-wrap">
|
||||
|
||||
<div id="nav">
|
||||
<a class="current" href="index.html">Main Demo</a>
|
||||
<a href="simple.html">Simple Demo</a>
|
||||
<a href="expand.html">Expand Demo</a>
|
||||
<a href="video.html">Video Demo</a>
|
||||
<a href="demos.html">FX Demos</a>
|
||||
<a class="play" href="http://jsfiddle.net/Mottie/VM8XG/">Playground</a>
|
||||
<a class="git" href="https://github.com/ProLoser/AnythingSlider/wiki">Documentation</a>
|
||||
<a class="git" href="http://github.com/ProLoser/AnythingSlider/downloads">Download</a>
|
||||
<a class="issue" href="https://github.com/ProLoser/AnythingSlider/issues">Issues</a>
|
||||
</div>
|
||||
|
||||
<h5><a href="http://css-tricks.com/examples/AnythingSlider/">Original</a> By <a href="http://css-tricks.com">Chris Coyier</a>,
|
||||
expanded upon by <a href="https://github.com/ProLoser/AnythingSlider/wiki/Credits">many others</a></h5>
|
||||
|
||||
<h1>AnythingSlider</h1>
|
||||
|
||||
<div class="themeselector">
|
||||
Theme:
|
||||
<select id="currentTheme">
|
||||
<option value="default">Default</option>
|
||||
<option value="minimalist-round">Minimalist-Round</option>
|
||||
<option value="minimalist-square">Minimalist-Square</option>
|
||||
<option value="metallic" selected="selected">Metallic</option>
|
||||
<option value="construction">Construction</option>
|
||||
<option value="cs-portfolio">CS-Portfolio</option>
|
||||
</select>
|
||||
<button class="add">Add Slide</button>
|
||||
<button class="remove">Remove Slide</button>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<!-- AnythingSlider #1 -->
|
||||
<ul id="slider1">
|
||||
|
||||
<li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
|
||||
|
||||
<li><img src="demos/images/slide-env-1.jpg" alt=""></li>
|
||||
|
||||
<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
|
||||
|
||||
<li><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&hl=en_US&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zSgiXGELjbc&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>
|
||||
|
||||
<li class="panel5">
|
||||
<div>
|
||||
<div class="textSlide">
|
||||
<span class="rightside"><object width="500" height="325"><param name="movie" value="http://www.youtube.com/v/2Qj8PhxSnhg&hl=en_US&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/2Qj8PhxSnhg&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="500" height="325"></embed></object></span>
|
||||
<h3>Other Information</h3>
|
||||
<br>
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet accumsan eros, et iaculis massa fringilla auctor.</li>
|
||||
<li>Proin a mi ante, ut lobortis risus. Sed fringilla augue sed enim faucibus eget aliquam tellus ultricies.</li>
|
||||
<li>Morbi a magna eu ligula scelerisque lobortis vel non nisi.</li>
|
||||
<li>Aliquam condimentum libero eget elit ultrices sit amet ullamcorper felis gravida.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li><img src="demos/images/slide-env-2.jpg" alt=""></li>
|
||||
|
||||
</ul> <!-- END AnythingSlider #1 -->
|
||||
|
||||
<br><br>
|
||||
|
||||
<!-- AnythingSlider #2 -->
|
||||
<ul id="slider2">
|
||||
|
||||
<li class="panel1">
|
||||
<div>
|
||||
<div class="textSlide">
|
||||
<img src="demos/images/251356.jpg" alt="tomato sandwich" style="float: right; margin: 0 0 2px 10px; width: 250px; height: 250px;" />
|
||||
<h3>Queenie's Killer Tomato Bagel Sandwich</h3>
|
||||
<h4>Ingredients</h4>
|
||||
<ul>
|
||||
<li>1 bagel, split and toasted</li>
|
||||
<li>2 tablespoons cream cheese</li>
|
||||
<li>1 roma (plum) tomatoes, thinly sliced</li>
|
||||
<li>salt and pepper to taste</li>
|
||||
<li>4 leaves fresh basil</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="panel2">
|
||||
<div class="quoteSlide">
|
||||
<blockquote>In awe I watched the waxing moon ride across the zenith of the heavens like an ambered chariot towards the ebon void of infinite space wherein the tethered belts of Jupiter and Mars hang forever festooned in their orbital majesty. And as I looked at all this I thought... I must put a roof on this lavatory.<br>-- Les Dawson</blockquote>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="panel3">
|
||||
<img src="demos/images/slide-tele-1.jpg" alt="">
|
||||
</li>
|
||||
|
||||
<li class="panel4">
|
||||
<div class="quoteSlide">
|
||||
<blockquote>Life is conversational. Web design should be the same way. On the web, you’re talking to someone you’ve probably never met – so it’s important to be clear and precise. Thus, well structured navigation and content organization goes hand in hand with having a good conversation.</blockquote>
|
||||
<p> - <a id='perma' href='http://quotesondesign.com/chikezie-ejiasi/'>Chikezie Ejiasi</a></p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="panel5">
|
||||
<img src="demos/images/slide-tele-2.jpg" alt="">
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!-- END AnythingSlider #2 -->
|
||||
|
||||
<br>
|
||||
|
||||
<h2>Features</h2>
|
||||
<ul>
|
||||
<li>Panels are HTML Content (can be anything).</li>
|
||||
<li>Multiple AnythingSliders allowable per-page.</li>
|
||||
<li>Add or remove content, then easily update the slider.</li>
|
||||
<li>Themes can be applied to individual sliders.</li>
|
||||
<li>Infinite/Continuous sliding (always slides in the direction you are going, even at "last" slide). This can be disabled.</li>
|
||||
<li>Show multiple slides within AnythingSlider at once. <span class="attention">*New in version 1.5.14*</span></li>
|
||||
<li>Expand the slider to fit inside of its container (so it now works with full width or any percentage width fluid layouts). <span class="attention">*New in version 1.5.16*</span></li>
|
||||
<li>Optionally resize each panel (specified per panel in css).</li>
|
||||
<li>Optional Next / Previous Panel Arrows.</li>
|
||||
<li>Use keyboard navigation or tabs that are built and added dynamically (any number of panels).</li>
|
||||
<li>Link to specific slides or go forward or back one slide from static text links - go to <a href="#" id="slide-jump">Slide 4</a> (Quote #2) in second example.</li>
|
||||
<li>Each panel has a hashtag (can link directly to specific panels) or use the ID of an element inside the panel.</li>
|
||||
<li>Optional custom function for <a href="https://github.com/ProLoser/AnythingSlider/wiki/Navigation-Options">formatting navigation text</a>.</li>
|
||||
<li>Auto-playing slideshow (optional feature, can start playing or stopped).</li>
|
||||
<li>Pauses slideshow on hover (optional).</li>
|
||||
<li>Optionally play the slideshow once through, stopping on the last page.</li>
|
||||
<li>Extend the script by binding to custom events, last triggered event: <span id="status">none</span></li>
|
||||
<li>Optional FX extension to add animation to panels elements as they scroll into and out of view. See the <a href="demos.html">demo page</a>.</li>
|
||||
<li>Optional Video extension allows video to pauses playing when not in view and resumes when in view (if files are hosted on the web). This currently works for YouTube, Vimeo and HTML5 video. <span class="attention">*New in version 1.6*</span></li>
|
||||
<li>Works with jQuery 1.4.2+.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Default Options</h2>
|
||||
See the documentation for complete description of these options (<a href="https://github.com/ProLoser/AnythingSlider/wiki/Appearance-Options">appearance</a>, <a href="https://github.com/ProLoser/AnythingSlider/wiki/Navigation-Options">navigation</a>, <a href="https://github.com/ProLoser/AnythingSlider/wiki/Slideshow-Options">slideshow</a>, <a href="https://github.com/ProLoser/AnythingSlider/wiki/Callbacks-and-Events">callbacks & events</a>, <a href="https://github.com/ProLoser/AnythingSlider/wiki/Video">video</a>, <a href="https://github.com/ProLoser/AnythingSlider/wiki/Interactivity-and-Miscellaneous-Options">interativity & misc</a>).<br>
|
||||
<br>
|
||||
<blockquote>
|
||||
<pre>$('#slider').anythingSlider({
|
||||
// Appearance
|
||||
theme : "default", // Theme name
|
||||
expand : false, // If true, the entire slider will expand to fit the parent element
|
||||
resizeContents : true, // If true, solitary images/objects in the panel will expand to fit the viewport
|
||||
vertical : false, // If true, all panels will slide vertically; they slide horizontally otherwise
|
||||
showMultiple : false, // Set this value to a number and it will show that many slides at once
|
||||
easing : "swing", // Anything other than "linear" or "swing" requires the easing plugin or jQuery UI
|
||||
|
||||
buildArrows : true, // If true, builds the forwards and backwards buttons
|
||||
buildNavigation : true, // If true, builds a list of anchor links to link to each panel
|
||||
buildStartStop : true, // If true, builds the start/stop button
|
||||
|
||||
appendForwardTo : null, // Append forward arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
|
||||
appendBackTo : null, // Append back arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
|
||||
appendControlsTo : null, // Append controls (navigation + start-stop) to a HTML element (jQuery Object, selector or HTMLNode), if not null
|
||||
appendNavigationTo : null, // Append navigation buttons to a HTML element (jQuery Object, selector or HTMLNode), if not null
|
||||
appendStartStopTo : null, // Append start-stop button to a HTML element (jQuery Object, selector or HTMLNode), if not null
|
||||
|
||||
toggleArrows : false, // If true, side navigation arrows will slide out on hovering & hide @ other times
|
||||
toggleControls : false, // if true, slide in controls (navigation + play/stop button) on hover and slide change, hide @ other times
|
||||
|
||||
startText : "Start", // Start button text
|
||||
stopText : "Stop", // Stop button text
|
||||
forwardText : "&raquo;", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image)
|
||||
backText : "&laquo;", // Link text used to move the slider back (hidden by CSS, replace with arrow image)
|
||||
tooltipClass : "tooltip", // Class added to navigation & start/stop button (text copied to title if it is hidden by a negative text indent)
|
||||
|
||||
// Function
|
||||
enableArrows : true, // if false, arrows will be visible, but not clickable.
|
||||
enableNavigation : true, // if false, navigation links will still be visible, but not clickable.
|
||||
enableStartStop : true, // if false, the play/stop button will still be visible, but not clickable. Previously "enablePlay"
|
||||
enableKeyboard : true, // if false, keyboard arrow keys will not work for this slider.
|
||||
|
||||
// Navigation
|
||||
startPanel : 1, // This sets the initial panel
|
||||
changeBy : 1, // Amount to go forward or back when changing panels.
|
||||
hashTags : true, // Should links change the hashtag in the URL?
|
||||
infiniteSlides : true, // if false, the slider will not wrap & not clone any panels
|
||||
navigationFormatter : null, // Details at the top of the file on this use (advanced use)
|
||||
navigationSize : false, // Set this to the maximum number of visible navigation tabs; false to disable
|
||||
|
||||
// Slideshow options
|
||||
autoPlay : false, // If true, the slideshow will start running; replaces "startStopped" option
|
||||
autoPlayLocked : false, // If true, user changing slides will not stop the slideshow
|
||||
autoPlayDelayed : false, // If true, starting a slideshow will delay advancing slides; if false, the slider will immediately advance to the next slide when slideshow starts
|
||||
pauseOnHover : true, // If true & the slideshow is active, the slideshow will pause on hover
|
||||
stopAtEnd : false, // If true & the slideshow is active, the slideshow will stop on the last page. This also stops the rewind effect when infiniteSlides is false.
|
||||
playRtl : false, // If true, the slideshow will move right-to-left
|
||||
|
||||
// Times
|
||||
delay : 3000, // How long between slideshow transitions in AutoPlay mode (in milliseconds)
|
||||
resumeDelay : 15000, // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
|
||||
animationTime : 600, // How long the slideshow transition takes (in milliseconds)
|
||||
delayBeforeAnimate : 0, // How long to pause slide animation before going to the desired slide (used if you want your "out" FX to show).
|
||||
|
||||
// Callbacks
|
||||
onBeforeInitialize : function(e, slider) {}, // Callback before the plugin initializes
|
||||
onInitialized : function(e, slider) {}, // Callback when the plugin finished initializing
|
||||
onShowStart : function(e, slider) {}, // Callback on slideshow start
|
||||
onShowStop : function(e, slider) {}, // Callback after slideshow stops
|
||||
onShowPause : function(e, slider) {}, // Callback when slideshow pauses
|
||||
onShowUnpause : function(e, slider) {}, // Callback when slideshow unpauses - may not trigger properly if user clicks on any controls
|
||||
onSlideInit : function(e, slider) {}, // Callback when slide initiates, before control animation
|
||||
onSlideBegin : function(e, slider) {}, // Callback before slide animates
|
||||
onSlideComplete : function(slider) {}, // Callback when slide completes; this is the only callback without an event "e" variable
|
||||
|
||||
// Interactivity
|
||||
clickForwardArrow : "click", // Event used to activate forward arrow functionality (e.g. add jQuery mobile's "swiperight")
|
||||
clickBackArrow : "click", // Event used to activate back arrow functionality (e.g. add jQuery mobile's "swipeleft")
|
||||
clickControls : "click focusin", // Events used to activate navigation control functionality
|
||||
clickSlideshow : "click", // Event used to activate slideshow play/stop button
|
||||
|
||||
// Video
|
||||
resumeOnVideoEnd : true, // If true & the slideshow is active & a supported video is playing, it will pause the autoplay until the video is complete
|
||||
addWmodeToObject : "opaque", // If your slider has an embedded object, the script will automatically add a wmode parameter with this setting
|
||||
isVideoPlaying : function(base){ return false; } // return true if video is playing or false if not - used by video extension
|
||||
});</pre>
|
||||
</blockquote>
|
||||
|
||||
<h2>Known Issues</h2>
|
||||
<ul>
|
||||
<li>Please refer to the <a href="https://github.com/ProLoser/AnythingSlider/wiki">documentation</a>.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Changelog</h2>
|
||||
|
||||
Only the latest versions will be shown here. See the <a href="https://github.com/ProLoser/AnythingSlider/wiki/Change-Log">full change log here</a>.<br>
|
||||
<br>
|
||||
|
||||
<h3>Version 1.7.16</h3>
|
||||
<ul>
|
||||
<li>Ok, I didn't like changing the video option as it was below, so I moved the option into the core plugin. The option is now called <code>resumeOnVisible</code>.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Version 1.7.15.1</h3>
|
||||
<ul>
|
||||
<li>Fixed an issue in the video extension where watching a related YouTube video in the slider would cause javascript errors.</li>
|
||||
<li>Added another known issue with the video extension - Watching a related video breaks the ability if the slider to continue playing and pause the slideshow while playing these videos. This is because the iframe does not update the video URL and there is no way, that I know of, of determining which iframe is reporting a status change.</li>
|
||||
<li>Added a video option named <code>resumeVideo</code> which when false, does not continue playing a paused video. Change this option as follows (inside of a document ready call and before the slider is initialized):
|
||||
<pre><code>$.anythingSliderVideoDefaults.resumeVideo = false;</code></pre>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>Version 1.7.15</h3>
|
||||
<ul>
|
||||
<li>Fix an issue with calling the navigation window function which isn't initialized when the number of tabs shown equals the `navigationSize` value. Fix for <a href="https://github.com/ProLoser/AnythingSlider/issues/209">issue #209</a>.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Version 1.7.14</h3>
|
||||
<ul>
|
||||
<li>Attempted to fix an issue with adding slider content based on the error reported in <a href="https://github.com/ProLoser/AnythingSlider/issues/207">issue #207</a>.</li>
|
||||
<li>Links in nested sliders should now work properly. Fix for <a href="https://github.com/ProLoser/AnythingSlider/issues/208">issue #208</a>.</li>
|
||||
<li>Changed YouTube video status updating, to hopefully fix <a href="https://github.com/ProLoser/AnythingSlider/issues/191">issue #191</a>. But I noticed a few other problems in Safari, so I will address those soon.</li>
|
||||
<li>Fixed a problem with setting the slider height if it was undefined, or set before the image completely loaded. This was introduced in v1.7.13.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Version 1.7.13</h3>
|
||||
<ul>
|
||||
<li>Updated the plugin so that if panel sizes aren't defined in the css, it will default to the slider size. This should fix the problem with the slider initializing with a zero width or height.</li>
|
||||
<li>Added a "targetPage" callback variable which contains the targeted page number; "$targetPage" still contains the jQuery object of the targeted page. This can be used in event or callbacks:
|
||||
<pre><code>$('#slider').bind('slide_begin', function(event, slider){
|
||||
console.debug( 'The target page is #' + slider.targetPage );
|
||||
console.debug( 'The title of the target page is: ' + slider.$targetPage.find('h1').text() );
|
||||
// Do something else
|
||||
});</code></pre>Note that the targetPage variable contains the correct page before the slider animates, whereas "slider.currentPage" contains the current slide and is not updated until after the animation completes. See the "<a href="https://github.com/ProLoser/AnythingSlider/wiki/Callbacks-and-Events">Callback Arguments</a>" section in the wiki documents for a full list.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Version 1.7.12</h3>
|
||||
<ul>
|
||||
<li>Clicking links inside of a slide when mulitple slides are showing will no longer change the slider. Fix for <a href="https://github.com/ProLoser/AnythingSlider/issues/187">issue #187</a>.</li>
|
||||
<li>Updated how the navigation width was calculated when <code>navigationSize</code> is set so the <a href="https://github.com/Mottie/AnythingSlider-Themes">new tabs-light and tabs-dark themes</a> tab widths are calculated a bit more accurately - but it's still not perfect.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Version 1.7.11.5</h3>
|
||||
<ul>
|
||||
<li>Updated the AnythingSlider css file to restore the overflow setting after the slider has initialized. Fix for <a href="https://github.com/ProLoser/AnythingSlider/issues/183">issue #183</a>. Thanks sawmac!</li>
|
||||
<li>This fixes a problem created in the previous update.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Version 1.7.11.4</h3>
|
||||
<ul>
|
||||
<li>Updated the AnythingSlider css file to include the flash of unstyled content (FOUC) method 1 from the <a href="https://github.com/ProLoser/AnythingSlider/wiki/FAQ">FAQ page</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Version 1.7.11.3</h3>
|
||||
<ul>
|
||||
<li>Updated the FX extension
|
||||
<ul>
|
||||
<li>When the <code>animationTime</code> is set to zero, the "fade" out effect occurred immediately. The fx extension has been updated to use the default time instead.</li>
|
||||
<li>Updated the <a href="http://jsfiddle.net/Mottie/Cm479/2144/">fade FX demo</a> to use <code>delayBeforeAnimate</code> to allow the current image to fade out before transitioning.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>Version 1.7.11.2</h3>
|
||||
<ul>
|
||||
<li>Added a local copy of jQuery with fallback.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Version 1.7.11.1</h3>
|
||||
<ul>
|
||||
<li>Fixed a problem with the "fade" fx. See <a href="https://github.com/ProLoser/AnythingSlider/issues/171">issue #171</a>.
|
||||
<ul>
|
||||
<li>In older versions, the size parameter was ignored; but with the changes in 1.7.11, it became required and now follows the same format as all of the other effects.</li>
|
||||
<li>The value is actually an opacity to use and must be included if adding a time or easing effect.
|
||||
<pre><code>// '.selector' : [ 'fade', 'opacity', 'time', 'easing' ]
|
||||
'.selector' : [ 'fade', '', 500, 'easeInOutCirc' ] // opacity number between 0 and 1 (default is 1, so using '' will set the value to 1)
|
||||
</code></pre>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>Version 1.7.11</h3>
|
||||
<ul>
|
||||
<li>Updated the FX extension:
|
||||
<ul>
|
||||
<li>Added <code>grow</code> option that allows for growing text - like in the movies! *popcorn*</li>
|
||||
<li>Allow ability to set multiple sizes for the grow and expand fx by simply separating the two values with a comma. If only one value is present, the fx will use that value (left side of the comma) as described below.
|
||||
<pre><code>// '.selector' : [ 'effect(s)', 'distance/size', 'time', 'easing' ]
|
||||
'.selector' : [ 'grow', '24px, 80px' ] // 'original text size, fx size'
|
||||
'.selector' : [ 'expand', '10%, 100%' ], // 'fx size, original size'</code></pre>
|
||||
</li>
|
||||
<li>The difference between grow and expand is that grow changes the font size whereas expand changes the width and height.</li>
|
||||
<li>Added ability to set the <code>fade</code> ending opacity.
|
||||
<pre><code>// '.selector' : [ 'effect(s)', 'distance/size', 'time', 'easing' ]
|
||||
'.selector' : [ 'fade', '0.8' ] // opacity number between 0 and 1
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>Changed the intro fx from being initialized immediately to occurring when the page has finished loading.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Fixed a problem that occurs when <code>resizeContents</code> is false and the slide content has padding and/or margins.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Version 1.7.10</h3>
|
||||
<ul>
|
||||
<li>Fixed a problem where setting the <code>animationTime</code> to zero would not trigger any callbacks, thus preventing the FX extension from working.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Version 1.7.9</h3>
|
||||
<ul>
|
||||
<li>Added <code>vertical</code> option
|
||||
<ul>
|
||||
<li>When true, all of the content in the slider will scroll vertically.</li>
|
||||
<li>Included up & down keyboard keys to navigate, but only when the vertical option is true.</li>
|
||||
<li>The <code>showMultiple</code> option does not currently work when the content is vertical. I may fix this in future versions.</li>
|
||||
<li>Thanks to Caroline-Elisa for the suggestion - in <a href="https://github.com/ProLoser/AnythingSlider/issues/166">issue #166</a>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>AnythingSlider will now accept an ID or classname to target a specific panel in the slider. Callbacks can also be included. Here is an example:
|
||||
<pre><code>// original method
|
||||
$('#slider').anythingSlider(4);
|
||||
|
||||
// additional method
|
||||
$('#slider').anythingSlider('#quotes');</code></pre>
|
||||
</li>
|
||||
<li>Updated FX extension
|
||||
<ul>
|
||||
<li>Fixed a problem with the "expand" effect in the FX extension where the height would not change in some browsers.</li>
|
||||
<li>Added <code>outFxBind</code> and <code>inFxBind</code> options which set which AnythingSlider callbacks are used. This might be more useful if binding FX on slide begin so the element is already animating when the slide comes into view.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,165 @@
|
||||
/*
|
||||
* AnythingSlider Slide FX 1.5.7 for AnythingSlider v1.7.11+
|
||||
* By Rob Garrison (aka Mottie & Fudgey)
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
*/
|
||||
(function($) {
|
||||
$.fn.anythingSliderFx = function(effects, options){
|
||||
|
||||
// variable sizes shouldn't matter - it's just to get an idea to get the elements out of view
|
||||
var wrap = $(this).closest('.anythingSlider'),
|
||||
sliderWidth = wrap.width(),
|
||||
sliderHeight = wrap.height(),
|
||||
getBaseFx = function(s){
|
||||
var size = s, size2;
|
||||
// allow for start and end sizes/dimensions
|
||||
if (s && typeof s === 'string' && s.indexOf(',') > 0) {
|
||||
s = s.split(',');
|
||||
size = $.trim(s[0]); size2 = $.trim(s[1]);
|
||||
}
|
||||
return {
|
||||
// 'name' : [{ inFx: {effects}, { outFx: {effects} }, selector: []]
|
||||
'top' : [{ inFx: { top: 0 }, outFx: { top: '-' + (size || sliderHeight) } }],
|
||||
'bottom' : [{ inFx: { top: 0 }, outFx: { top: (size || sliderHeight) } }],
|
||||
'left' : [{ inFx: { left: 0 }, outFx: { left: '-' + (size || sliderWidth) } }],
|
||||
'right' : [{ inFx: { left: 0 }, outFx: { left: (size || sliderWidth) } }],
|
||||
'fade' : [{ inFx: { opacity: size || 1 }, outFx: { opacity: 0 } }],
|
||||
'expand' : [{ inFx: { width: size2 || '100%', height: size2 || '100%', top: '0%', left: '0%' } , outFx: { width: (size || '10%'), height: (size || '10%'), top: '50%', left: '50%' } }],
|
||||
'grow' : [{ inFx: { top: 0, fontSize: size || '16px', opacity : 1 }, outFx: { top: '-200px', fontSize: size2 || '80px', opacity: 0 } }],
|
||||
'listLR' : [{ inFx: { left: 0, opacity: 1 }, outFx: [{ left: (size || sliderWidth), opacity: 0 }, { left: '-' + (size || sliderWidth), opacity: 0 }], selector: [':odd', ':even'] }],
|
||||
'listRL' : [{ inFx: { left: 0, opacity: 1 }, outFx: [{ left: (size || sliderWidth), opacity: 0 }, { left: '-' + (size || sliderWidth), opacity: 0 }], selector: [':even', ':odd'] }],
|
||||
|
||||
'caption-Top' : [{ inFx: { top: 0, opacity: 0.8 }, outFx: { top: ( '-' + size || -50 ), opacity: 0 } }],
|
||||
'caption-Right' : [{ inFx: { right: 0, opacity: 0.8 }, outFx: { right: ( '-' + size || -150 ), opacity: 0 } }],
|
||||
'caption-Bottom' : [{ inFx: { bottom: 0, opacity: 0.8 }, outFx: { bottom: ( '-' + size || -50 ), opacity: 0 } }],
|
||||
'caption-Left' : [{ inFx: { left: 0, opacity: 0.8 }, outFx: { left: ( '-' + size || -150 ), opacity: 0 } }]
|
||||
};
|
||||
};
|
||||
|
||||
return this.each(function(){
|
||||
|
||||
$(this).data('AnythingSlider').fx = effects; // store fx list to allow dynamic modification
|
||||
|
||||
var defaults = $.extend({
|
||||
easing : 'swing', // Default FX easing
|
||||
timeIn : 400, // Default time for in FX animation
|
||||
timeOut : 350, // Default time for out FX animation - when using predefined FX, this number gets divided by 2
|
||||
stopRepeat : false, // stops repeating FX animation when clicking on the same navigation tab
|
||||
outFxBind : 'slide_init', // When outFx animations are called
|
||||
inFxBind : 'slide_complete' // When inFx animations are called
|
||||
}, options),
|
||||
|
||||
baseFx = getBaseFx(), // get base FX with standard sizes
|
||||
|
||||
// Animate FX
|
||||
animateFx = function(el, opt, isOut, time){
|
||||
if (el.length === 0 || typeof opt === 'undefined') { return; } // no fx
|
||||
var o = opt[0] || opt,
|
||||
s = o[1] || '',
|
||||
// time needs to be a number, not a string
|
||||
t = time || parseInt( ((s === '') ? o.duration : o[0].duration), 10);
|
||||
if (isOut) {
|
||||
// don't change caption position from absolute
|
||||
if (el.css('position') !== 'absolute') { el.css({ position : 'relative' }); }
|
||||
el.stop();
|
||||
// multiple selectors for out animation
|
||||
if (s !== ''){
|
||||
el.filter(opt[1][0]).animate(o[0], { queue : false, duration : t, easing : o[0].easing });
|
||||
el.filter(opt[1][1]).animate(s, { queue : true, duration : t, easing : o[0].easing });
|
||||
return;
|
||||
}
|
||||
}
|
||||
// animation for no extra selectors
|
||||
el.animate(o, { queue : true, duration : t, easing : o.easing });
|
||||
},
|
||||
|
||||
// Extract FX
|
||||
getFx = function(opts, isOut){
|
||||
// example: '.textSlide h3' : [ 'top fade', '200px' '500', 'easeOutBounce' ],
|
||||
var tmp, bfx2,
|
||||
ex = (isOut) ? 'outFx' : 'inFx', // object key
|
||||
bfx = {}, // base effects
|
||||
time = (isOut) ? defaults.timeOut : defaults.timeIn, // default duration settings
|
||||
// split & process multiple built-in effects (e.g. 'top fade')
|
||||
fx = $.trim(opts[0].replace(/\s+/g,' ')).split(' ');
|
||||
|
||||
// look for multiple selectors in the Out effects
|
||||
if (isOut && fx.length === 1 && baseFx.hasOwnProperty(fx) && typeof (baseFx[fx][0].selector) !== 'undefined') {
|
||||
bfx2 = baseFx[fx][0].outFx;
|
||||
// add time and easing to first set, the animation will use it for both
|
||||
bfx2[0].duration = opts[2] || defaults.timeOut;
|
||||
bfx2[0].easing = opts[3] || defaults.easing;
|
||||
return [bfx2, baseFx[fx][0].selector || [] ];
|
||||
}
|
||||
|
||||
// combine base effects
|
||||
$.each(fx, function(i,f){
|
||||
// check if built-in effect exists
|
||||
if (baseFx.hasOwnProperty(f)) {
|
||||
var t = typeof opts[1] === 'undefined' || opts[1] === '',
|
||||
// if size option is defined, get new base fx
|
||||
tmp = (t) ? baseFx : getBaseFx(opts[1]);
|
||||
$.extend(true, bfx, tmp[f][0][ex]);
|
||||
t = opts[2] || bfx.duration || time; // user set time || built-in time || default time set above
|
||||
bfx.duration = (isOut) ? t/2 : t; // out animation time is 1/2 of in time for predefined fx only
|
||||
bfx.easing = isNaN(opts[3]) ? opts[3] || defaults.easing : opts[4] || defaults.easing;
|
||||
}
|
||||
});
|
||||
return [bfx];
|
||||
},
|
||||
|
||||
base = $(this)
|
||||
|
||||
// bind events for "OUT" effects - occur when leaving a page
|
||||
.bind(defaults.outFxBind, function(e, slider){
|
||||
if (defaults.stopRepeat && slider.$lastPage[0] === slider.$targetPage[0]) { return; }
|
||||
var el, elOut, time, page = slider.$lastPage.add( slider.$items.eq(slider.exactPage) ).add( slider.$targetPage ),
|
||||
FX = slider.fx; // allow dynamically added FX
|
||||
if (slider.exactPage === 0) { page = page.add( slider.$items.eq( slider.pages ) ); } // add last (non-cloned) page if on first
|
||||
if (slider.options.animationTime < defaults.timeOut) {
|
||||
time = slider.options.animationTime || defaults.timeOut;
|
||||
}
|
||||
page = page.find('*').andSelf(); // include the panel in the selectors
|
||||
for (el in FX) {
|
||||
if (el === 'outFx') {
|
||||
// process "out" custom effects
|
||||
for (elOut in FX.outFx) {
|
||||
// animate current/last slide, unless it's a clone, then effect the original
|
||||
if (page.filter(elOut).length) { animateFx( page.filter(elOut), FX.outFx[elOut], true); }
|
||||
}
|
||||
} else if (el !== 'inFx') {
|
||||
// Use built-in effects
|
||||
if ($.isArray(FX[el]) && page.filter(el).length) {
|
||||
animateFx( page.filter(el), getFx(FX[el],true), true, time);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// bind events for "IN" effects - occurs on target page
|
||||
.bind(defaults.inFxBind, function(e, slider){
|
||||
if (defaults.stopRepeat && slider.$lastPage[0] === slider.$targetPage[0]) { return; }
|
||||
var el, elIn, page = slider.$currentPage.add( slider.$items.eq(slider.exactPage) ),
|
||||
FX = slider.fx; // allow dynamically added FX
|
||||
page = page.find('*').andSelf(); // include the panel in the selectors
|
||||
for (el in FX) {
|
||||
if (el === 'inFx') {
|
||||
// process "in" custom effects
|
||||
for (elIn in FX.inFx) {
|
||||
// animate current page
|
||||
if (page.filter(elIn).length) { animateFx( page.filter(elIn), FX.inFx[elIn], false); }
|
||||
}
|
||||
// Use built-in effects
|
||||
} else if (el !== 'outFx' && $.isArray(FX[el]) && page.filter(el).length) {
|
||||
animateFx( page.filter(el), getFx(FX[el],false), false);
|
||||
}
|
||||
}
|
||||
})
|
||||
.data('AnythingSlider');
|
||||
|
||||
// call gotoPage to trigger intro animation
|
||||
$(window).load(function(){ base.gotoPage(base.currentPage, base.playing); });
|
||||
|
||||
});
|
||||
};
|
||||
})(jQuery);
|
||||
6
sites/all/libraries/AnythingSlider/js/jquery.anythingslider.fx.min.js
vendored
Normal file
6
sites/all/libraries/AnythingSlider/js/jquery.anythingslider.fx.min.js
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
/*
|
||||
* AnythingSlider Slide FX 1.5.7 minified for AnythingSlider v1.7.11+
|
||||
* By Rob Garrison (aka Mottie & Fudgey)
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
*/
|
||||
(function(i){i.fn.anythingSliderFx=function(q,r){var n=i(this).closest(".anythingSlider"),g=n.width(),o=n.height(),p=function(c){var a=c,l;c&&typeof c==="string"&&c.indexOf(",")>0&&(c=c.split(","),a=i.trim(c[0]),l=i.trim(c[1]));return{top:[{inFx:{top:0},outFx:{top:"-"+(a||o)}}],bottom:[{inFx:{top:0},outFx:{top:a||o}}],left:[{inFx:{left:0},outFx:{left:"-"+(a||g)}}],right:[{inFx:{left:0},outFx:{left:a||g}}],fade:[{inFx:{opacity:a||1},outFx:{opacity:0}}],expand:[{inFx:{width:l||"100%",height:l||"100%", top:"0%",left:"0%"},outFx:{width:a||"10%",height:a||"10%",top:"50%",left:"50%"}}],grow:[{inFx:{top:0,fontSize:a||"16px",opacity:1},outFx:{top:"-200px",fontSize:l||"80px",opacity:0}}],listLR:[{inFx:{left:0,opacity:1},outFx:[{left:a||g,opacity:0},{left:"-"+(a||g),opacity:0}],selector:[":odd",":even"]}],listRL:[{inFx:{left:0,opacity:1},outFx:[{left:a||g,opacity:0},{left:"-"+(a||g),opacity:0}],selector:[":even",":odd"]}],"caption-Top":[{inFx:{top:0,opacity:0.8},outFx:{top:"-"+a||-50,opacity:0}}],"caption-Right":[{inFx:{right:0, opacity:0.8},outFx:{right:"-"+a||-150,opacity:0}}],"caption-Bottom":[{inFx:{bottom:0,opacity:0.8},outFx:{bottom:"-"+a||-50,opacity:0}}],"caption-Left":[{inFx:{left:0,opacity:0.8},outFx:{left:"-"+a||-150,opacity:0}}]}};return this.each(function(){i(this).data("AnythingSlider").fx=q;var c=i.extend({easing:"swing",timeIn:400,timeOut:350,stopRepeat:!1,outFxBind:"slide_init",inFxBind:"slide_complete"},r),a=p(),l=function(a,b,e,c){if(!(a.length===0||typeof b==="undefined")){var d=b[0]||b,f=d[1]||"",c=c|| parseInt(f===""?d.duration:d[0].duration,10);if(e&&(a.css("position")!=="absolute"&&a.css({position:"relative"}),a.stop(),f!=="")){a.filter(b[1][0]).animate(d[0],{queue:!1,duration:c,easing:d[0].easing});a.filter(b[1][1]).animate(f,{queue:!0,duration:c,easing:d[0].easing});return}a.animate(d,{queue:!0,duration:c,easing:d.easing})}},g=function(k,b){var e,j=b?"outFx":"inFx",d={},f=b?c.timeOut:c.timeIn,h=i.trim(k[0].replace(/\s+/g," ")).split(" ");if(b&&h.length===1&&a.hasOwnProperty(h)&&typeof a[h][0].selector!== "undefined")return e=a[h][0].outFx,e[0].duration=k[2]||c.timeOut,e[0].easing=k[3]||c.easing,[e,a[h][0].selector||[]];i.each(h,function(e,h){if(a.hasOwnProperty(h)){var g=typeof k[1]==="undefined"||k[1]==="",g=g?a:p(k[1]);i.extend(!0,d,g[h][0][j]);g=k[2]||d.duration||f;d.duration=b?g/2:g;d.easing=isNaN(k[3])?k[3]||c.easing:k[4]||c.easing}});return[d]},m=i(this).bind(c.outFxBind,function(a,b){if(!(c.stopRepeat&&b.$lastPage[0]===b.$targetPage[0])){var e,j,d,f=b.$lastPage.add(b.$items.eq(b.exactPage)).add(b.$targetPage), h=b.fx;b.exactPage===0&&(f=f.add(b.$items.eq(b.pages)));b.options.animationTime<c.timeOut&&(d=b.options.animationTime||c.timeOut);f=f.find("*").andSelf();for(e in h)if(e==="outFx")for(j in h.outFx)f.filter(j).length&&l(f.filter(j),h.outFx[j],!0);else e!=="inFx"&&i.isArray(h[e])&&f.filter(e).length&&l(f.filter(e),g(h[e],!0),!0,d)}}).bind(c.inFxBind,function(a,b){if(!(c.stopRepeat&&b.$lastPage[0]===b.$targetPage[0])){var e,j,d=b.$currentPage.add(b.$items.eq(b.exactPage)),f=b.fx,d=d.find("*").andSelf(); for(e in f)if(e==="inFx")for(j in f.inFx)d.filter(j).length&&l(d.filter(j),f.inFx[j],!1);else e!=="outFx"&&i.isArray(f[e])&&d.filter(e).length&&l(d.filter(e),g(f[e],!1),!1)}}).data("AnythingSlider");i(window).load(function(){m.gotoPage(m.currentPage,m.playing)})})}})(jQuery);
|
||||
795
sites/all/libraries/AnythingSlider/js/jquery.anythingslider.js
Normal file
795
sites/all/libraries/AnythingSlider/js/jquery.anythingslider.js
Normal file
@@ -0,0 +1,795 @@
|
||||
/*
|
||||
AnythingSlider v1.7.16
|
||||
Original by Chris Coyier: http://css-tricks.com
|
||||
Get the latest version: https://github.com/ProLoser/AnythingSlider
|
||||
|
||||
To use the navigationFormatter function, you must have a function that
|
||||
accepts two paramaters, and returns a string of HTML text.
|
||||
|
||||
index = integer index (1 based);
|
||||
panel = jQuery wrapped LI item this tab references
|
||||
@return = Must return a string of HTML/Text
|
||||
|
||||
navigationFormatter: function(index, panel){
|
||||
return "Panel #" + index; // This would have each tab with the text 'Panel #X' where X = index
|
||||
}
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
|
||||
$.anythingSlider = function(el, options) {
|
||||
|
||||
var base = this, o;
|
||||
|
||||
// Wraps the ul in the necessary divs and then gives Access to jQuery element
|
||||
base.el = el;
|
||||
base.$el = $(el).addClass('anythingBase').wrap('<div class="anythingSlider"><div class="anythingWindow" /></div>');
|
||||
|
||||
// Add a reverse reference to the DOM object
|
||||
base.$el.data("AnythingSlider", base);
|
||||
|
||||
base.init = function(){
|
||||
|
||||
// Added "o" to be used in the code instead of "base.options" which doesn't get modifed by the compiler - reduces size by ~1k
|
||||
base.options = o = $.extend({}, $.anythingSlider.defaults, options);
|
||||
|
||||
base.initialized = false;
|
||||
if ($.isFunction(o.onBeforeInitialize)) { base.$el.bind('before_initialize', o.onBeforeInitialize); }
|
||||
base.$el.trigger('before_initialize', base);
|
||||
|
||||
// Cache existing DOM elements for later
|
||||
// base.$el = original ul
|
||||
// for wrap - get parent() then closest in case the ul has "anythingSlider" class
|
||||
base.$wrapper = base.$el.parent().closest('div.anythingSlider').addClass('anythingSlider-' + o.theme);
|
||||
base.$window = base.$el.closest('div.anythingWindow');
|
||||
base.win = window;
|
||||
base.$win = $(base.win);
|
||||
|
||||
base.$controls = $('<div class="anythingControls"></div>').appendTo( (o.appendControlsTo !== null && $(o.appendControlsTo).length) ? $(o.appendControlsTo) : base.$wrapper);
|
||||
base.$startStop = $('<a href="#" class="start-stop"></a>');
|
||||
if (o.buildStartStop) {
|
||||
base.$startStop.appendTo( (o.appendStartStopTo !== null && $(o.appendStartStopTo).length) ? $(o.appendStartStopTo) : base.$controls );
|
||||
}
|
||||
base.$nav = $('<ul class="thumbNav" />').appendTo( (o.appendNavigationTo !== null && $(o.appendNavigationTo).length) ? $(o.appendNavigationTo) : base.$controls );
|
||||
|
||||
// Set up a few defaults & get details
|
||||
base.flag = false; // event flag to prevent multiple calls (used in control click/focusin)
|
||||
base.playing = o.autoPlay; // slideshow state; removed "startStopped" option
|
||||
base.slideshow = false; // slideshow flag needed to correctly trigger slideshow events
|
||||
base.hovered = false; // actively hovering over the slider
|
||||
base.panelSize = []; // will contain dimensions and left position of each panel
|
||||
base.currentPage = o.startPanel = parseInt(o.startPanel,10) || 1; // make sure this isn't a string
|
||||
o.changeBy = parseInt(o.changeBy,10) || 1;
|
||||
base.adj = (o.infiniteSlides) ? 0 : 1; // adjust page limits for infinite or limited modes
|
||||
base.width = base.$el.width();
|
||||
base.height = base.$el.height();
|
||||
base.outerPad = [ base.$wrapper.innerWidth() - base.$wrapper.width(), base.$wrapper.innerHeight() - base.$wrapper.height() ];
|
||||
if (o.playRtl) { base.$wrapper.addClass('rtl'); }
|
||||
|
||||
// Expand slider to fit parent
|
||||
if (o.expand) {
|
||||
base.$outer = base.$wrapper.parent();
|
||||
base.$window.css({ width: '100%', height: '100%' }); // needed for Opera
|
||||
base.checkResize();
|
||||
}
|
||||
|
||||
// Build start/stop button
|
||||
if (o.buildStartStop) { base.buildAutoPlay(); }
|
||||
|
||||
// Build forwards/backwards buttons
|
||||
if (o.buildArrows) { base.buildNextBackButtons(); }
|
||||
|
||||
// can't lock autoplay it if it's not enabled
|
||||
if (!o.autoPlay) { o.autoPlayLocked = false; }
|
||||
|
||||
base.updateSlider();
|
||||
|
||||
base.$lastPage = base.$currentPage;
|
||||
|
||||
// Get index (run time) of this slider on the page
|
||||
base.runTimes = $('div.anythingSlider').index(base.$wrapper) + 1;
|
||||
base.regex = new RegExp('panel' + base.runTimes + '-(\\d+)', 'i'); // hash tag regex
|
||||
if (base.runTimes === 1) { base.makeActive(); } // make the first slider on the page active
|
||||
|
||||
// Make sure easing function exists.
|
||||
if (!$.isFunction($.easing[o.easing])) { o.easing = "swing"; }
|
||||
|
||||
// If pauseOnHover then add hover effects
|
||||
if (o.pauseOnHover) {
|
||||
base.$wrapper.hover(function() {
|
||||
if (base.playing) {
|
||||
base.$el.trigger('slideshow_paused', base);
|
||||
base.clearTimer(true);
|
||||
}
|
||||
}, function() {
|
||||
if (base.playing) {
|
||||
base.$el.trigger('slideshow_unpaused', base);
|
||||
base.startStop(base.playing, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// If a hash can not be used to trigger the plugin, then go to start panel
|
||||
base.setCurrentPage(base.gotoHash() || o.startPage, false);
|
||||
|
||||
// Hide/Show navigation & play/stop controls
|
||||
base.slideControls(false);
|
||||
base.$wrapper.bind('mouseenter mouseleave', function(e){
|
||||
base.hovered = (e.type === "mouseenter") ? true : false;
|
||||
base.slideControls( base.hovered, false );
|
||||
});
|
||||
|
||||
// Add keyboard navigation
|
||||
$(document).keyup(function(e){
|
||||
// Stop arrow keys from working when focused on form items
|
||||
if (o.enableKeyboard && base.$wrapper.is('.activeSlider') && !e.target.tagName.match('TEXTAREA|INPUT|SELECT')) {
|
||||
if (!o.vertical && (e.which === 38 || e.which === 40)) { return; }
|
||||
switch (e.which) {
|
||||
case 39: case 40: // right & down arrow
|
||||
base.goForward();
|
||||
break;
|
||||
case 37: case 38: // left & up arrow
|
||||
base.goBack();
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Fix tabbing through the page, but don't change the view if the link is in view (showMultiple = true)
|
||||
base.$items.delegate('a', 'focus.AnythingSlider', function(e){
|
||||
var panel = $(this).closest('.panel'),
|
||||
indx = base.$items.index(panel) + base.adj; // index can be -1 in nested sliders - issue #208
|
||||
base.$items.find('.focusedLink').removeClass('focusedLink');
|
||||
$(this).addClass('focusedLink');
|
||||
base.$window.scrollLeft(0);
|
||||
if ( ( indx !== -1 && (indx >= base.currentPage + o.showMultiple || indx < base.currentPage) ) ) {
|
||||
base.gotoPage(indx);
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
// Binds events
|
||||
var triggers = "slideshow_paused slideshow_unpaused slide_init slide_begin slideshow_stop slideshow_start initialized swf_completed".split(" ");
|
||||
$.each("onShowPause onShowUnpause onSlideInit onSlideBegin onShowStop onShowStart onInitialized onSWFComplete".split(" "), function(i,f){
|
||||
if ($.isFunction(o[f])){
|
||||
base.$el.bind(triggers[i], o[f]);
|
||||
}
|
||||
});
|
||||
if ($.isFunction(o.onSlideComplete)){
|
||||
// Added setTimeout (zero time) to ensure animation is complete... see this bug report: http://bugs.jquery.com/ticket/7157
|
||||
base.$el.bind('slide_complete', function(){
|
||||
setTimeout(function(){ o.onSlideComplete(base); }, 0);
|
||||
});
|
||||
}
|
||||
base.initialized = true;
|
||||
base.$el.trigger('initialized', base);
|
||||
|
||||
// trigger the slideshow
|
||||
base.startStop(base.playing);
|
||||
|
||||
};
|
||||
|
||||
// called during initialization & to update the slider if a panel is added or deleted
|
||||
base.updateSlider = function(){
|
||||
// needed for updating the slider
|
||||
base.$el.children('.cloned').remove();
|
||||
base.$nav.empty();
|
||||
// set currentPage to 1 in case it was zero - occurs when adding slides after removing them all
|
||||
base.currentPage = base.currentPage || 1;
|
||||
|
||||
base.$items = base.$el.children();
|
||||
base.pages = base.$items.length;
|
||||
base.dir = (o.vertical) ? 'top' : 'left';
|
||||
o.showMultiple = (o.vertical) ? 1 : parseInt(o.showMultiple,10) || 1; // only integers allowed
|
||||
o.navigationSize = (o.navigationSize === false) ? 0 : parseInt(o.navigationSize,10) || 0;
|
||||
|
||||
if (o.showMultiple > 1) {
|
||||
if (o.showMultiple > base.pages) { o.showMultiple = base.pages; }
|
||||
base.adjustMultiple = (o.infiniteSlides && base.pages > 1) ? 0 : o.showMultiple - 1;
|
||||
base.pages = base.$items.length - base.adjustMultiple;
|
||||
}
|
||||
|
||||
// Hide navigation & player if there is only one page
|
||||
base.$controls
|
||||
.add(base.$nav)
|
||||
.add(base.$startStop)
|
||||
.add(base.$forward)
|
||||
.add(base.$back)[(base.pages <= 1) ? 'hide' : 'show']();
|
||||
if (base.pages > 1) {
|
||||
// Build/update navigation tabs
|
||||
base.buildNavigation();
|
||||
}
|
||||
|
||||
// Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
|
||||
// This supports the "infinite" scrolling, also ensures any cloned elements don't duplicate an ID
|
||||
// Moved removeAttr before addClass otherwise IE7 ignores the addClass: http://bugs.jquery.com/ticket/9871
|
||||
if (o.infiniteSlides && base.pages > 1) {
|
||||
base.$el.prepend( base.$items.filter(':last').clone().removeAttr('id').addClass('cloned') );
|
||||
// Add support for multiple sliders shown at the same time
|
||||
if (o.showMultiple > 1) {
|
||||
base.$el.append( base.$items.filter(':lt(' + o.showMultiple + ')').clone().removeAttr('id').addClass('cloned').addClass('multiple') );
|
||||
} else {
|
||||
base.$el.append( base.$items.filter(':first').clone().removeAttr('id').addClass('cloned') );
|
||||
}
|
||||
base.$el.find('.cloned').each(function(){
|
||||
// disable all focusable elements in cloned panels to prevent shifting the panels by tabbing
|
||||
$(this).find('a,input,textarea,select,button,area').attr('disabled', 'disabled');
|
||||
$(this).find('[id]').removeAttr('id');
|
||||
});
|
||||
}
|
||||
|
||||
// We just added two items, time to re-cache the list, then get the dimensions of each panel
|
||||
base.$items = base.$el.children().addClass('panel' + (o.vertical ? ' vertical' : ''));
|
||||
base.setDimensions();
|
||||
|
||||
// Set the dimensions of each panel
|
||||
if (o.resizeContents) {
|
||||
base.$items.css('width', base.width);
|
||||
base.$wrapper.css('width', base.getDim(base.currentPage)[0]);
|
||||
base.$wrapper.add(base.$items).css('height', base.height);
|
||||
} else {
|
||||
base.$win.load(function(){ base.setDimensions(); }); // set dimensions after all images load
|
||||
}
|
||||
|
||||
if (base.currentPage > base.pages) {
|
||||
base.currentPage = base.pages;
|
||||
}
|
||||
base.setCurrentPage(base.currentPage, false);
|
||||
base.$nav.find('a').eq(base.currentPage - 1).addClass('cur'); // update current selection
|
||||
|
||||
};
|
||||
|
||||
// Creates the numbered navigation links
|
||||
base.buildNavigation = function() {
|
||||
if (o.buildNavigation && (base.pages > 1)) {
|
||||
var t, $a;
|
||||
base.$items.filter(':not(.cloned)').each(function(i) {
|
||||
var index = i + 1;
|
||||
t = ((index === 1) ? 'first' : '') + ((index === base.pages) ? 'last' : '');
|
||||
$a = $('<a href="#"></a>').addClass('panel' + index).wrap('<li class="' + t + '" />');
|
||||
base.$nav.append($a.parent()); // use $a.parent() so it will add <li> instead of only the <a> to the <ul>
|
||||
|
||||
// If a formatter function is present, use it
|
||||
if ($.isFunction(o.navigationFormatter)) {
|
||||
t = o.navigationFormatter(index, $(this));
|
||||
$a.html('<span>' + t + '</span>');
|
||||
// Add formatting to title attribute if text is hidden
|
||||
if (parseInt($a.find('span').css('text-indent'),10) < 0) { $a.addClass(o.tooltipClass).attr('title', t); }
|
||||
} else {
|
||||
$a.html('<span>' + index + '</span>');
|
||||
}
|
||||
|
||||
$a.bind(o.clickControls, function(e) {
|
||||
if (!base.flag && o.enableNavigation) {
|
||||
// prevent running functions twice (once for click, second time for focusin)
|
||||
base.flag = true; setTimeout(function(){ base.flag = false; }, 100);
|
||||
base.gotoPage(index);
|
||||
if (o.hashTags) { base.setHash(index); }
|
||||
}
|
||||
e.preventDefault();
|
||||
});
|
||||
});
|
||||
|
||||
// Add navigation tab scrolling - use !! in case someone sets the size to zero
|
||||
if (!!o.navigationSize && o.navigationSize < base.pages) {
|
||||
if (!base.$controls.find('.anythingNavWindow').length){
|
||||
base.$nav
|
||||
.before('<ul><li class="prev"><a href="#"><span>' + o.backText + '</span></a></li></ul>')
|
||||
.after('<ul><li class="next"><a href="#"><span>' + o.forwardText + '</span></a></li></ul>')
|
||||
.wrap('<div class="anythingNavWindow"></div>');
|
||||
}
|
||||
// include half of the left position to include extra width from themes like tabs-light and tabs-dark (still not perfect)
|
||||
base.navWidths = base.$nav.find('li').map(function(){
|
||||
return $(this).innerWidth() + Math.ceil(parseInt($(this).find('span').css('left'),10)/2 || 0);
|
||||
}).get();
|
||||
base.navLeft = 1;
|
||||
// add 5 pixels to make sure the tabs don't wrap to the next line
|
||||
base.$nav.width( base.navWidth( 1, base.pages + 1 ) + 5 );
|
||||
base.$controls.find('.anythingNavWindow')
|
||||
.width( base.navWidth( 1, o.navigationSize + 1 ) ).end()
|
||||
.find('.prev,.next').bind(o.clickControls, function(e) {
|
||||
if (!base.flag) {
|
||||
base.flag = true; setTimeout(function(){ base.flag = false; }, 200);
|
||||
base.navWindow( base.navLeft + o.navigationSize * ( $(this).is('.prev') ? -1 : 1 ) );
|
||||
}
|
||||
e.preventDefault();
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
base.navWidth = function(x,y){
|
||||
var i, s = Math.min(x,y),
|
||||
e = Math.max(x,y),
|
||||
w = 0;
|
||||
for (i = s; i < e; i++) {
|
||||
w += base.navWidths[i-1] || 0;
|
||||
}
|
||||
return w;
|
||||
};
|
||||
|
||||
base.navWindow = function(n){
|
||||
if (!!o.navigationSize && o.navigationSize < base.pages && base.navWidths) {
|
||||
var p = base.pages - o.navigationSize + 1;
|
||||
n = (n <= 1) ? 1 : (n > 1 && n < p) ? n : p;
|
||||
if (n !== base.navLeft) {
|
||||
base.$controls.find('.anythingNavWindow').animate(
|
||||
{ scrollLeft: base.navWidth(1, n), width: base.navWidth(n, n + o.navigationSize) },
|
||||
{ queue: false, duration: o.animationTime });
|
||||
base.navLeft = n;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Creates the Forward/Backward buttons
|
||||
base.buildNextBackButtons = function() {
|
||||
base.$forward = $('<span class="arrow forward"><a href="#"><span>' + o.forwardText + '</span></a></span>');
|
||||
base.$back = $('<span class="arrow back"><a href="#"><span>' + o.backText + '</span></a></span>');
|
||||
|
||||
// Bind to the forward and back buttons
|
||||
base.$back.bind(o.clickBackArrow, function(e) {
|
||||
// prevent running functions twice (once for click, second time for swipe)
|
||||
if (o.enableArrows && !base.flag) {
|
||||
base.flag = true; setTimeout(function(){ base.flag = false; }, 100);
|
||||
base.goBack();
|
||||
}
|
||||
e.preventDefault();
|
||||
});
|
||||
base.$forward.bind(o.clickForwardArrow, function(e) {
|
||||
// prevent running functions twice (once for click, second time for swipe)
|
||||
if (o.enableArrows && !base.flag) {
|
||||
base.flag = true; setTimeout(function(){ base.flag = false; }, 100);
|
||||
base.goForward();
|
||||
}
|
||||
e.preventDefault();
|
||||
});
|
||||
// using tab to get to arrow links will show they have focus (outline is disabled in css)
|
||||
base.$back.add(base.$forward).find('a').bind('focusin focusout',function(){
|
||||
$(this).toggleClass('hover');
|
||||
});
|
||||
|
||||
// Append elements to page
|
||||
base.$back.appendTo( (o.appendBackTo !== null && $(o.appendBackTo).length) ? $(o.appendBackTo) : base.$wrapper );
|
||||
base.$forward.appendTo( (o.appendForwardTo !== null && $(o.appendForwardTo).length) ? $(o.appendForwardTo) : base.$wrapper );
|
||||
|
||||
base.$arrowWidth = base.$forward.width(); // assuming the left & right arrows are the same width - used for toggle
|
||||
};
|
||||
|
||||
// Creates the Start/Stop button
|
||||
base.buildAutoPlay = function(){
|
||||
base.$startStop
|
||||
.html('<span>' + (base.playing ? o.stopText : o.startText) + '</span>')
|
||||
.bind(o.clickSlideshow, function(e) {
|
||||
if (o.enableStartStop) {
|
||||
base.startStop(!base.playing);
|
||||
base.makeActive();
|
||||
if (base.playing && !o.autoPlayDelayed) {
|
||||
base.goForward(true);
|
||||
}
|
||||
}
|
||||
e.preventDefault();
|
||||
})
|
||||
// show button has focus while tabbing
|
||||
.bind('focusin focusout',function(){
|
||||
$(this).toggleClass('hover');
|
||||
});
|
||||
};
|
||||
|
||||
// Adjust slider dimensions on parent element resize
|
||||
base.checkResize = function(stopTimer){
|
||||
clearTimeout(base.resizeTimer);
|
||||
base.resizeTimer = setTimeout(function(){
|
||||
var w = base.$outer.width() - base.outerPad[0],
|
||||
h = (base.$outer[0].tagName === "BODY" ? base.$win.height() : base.$outer.height()) - base.outerPad[1];
|
||||
// base.width = width of one panel, so multiply by # of panels; outerPad is padding added for arrows.
|
||||
if (base.width * o.showMultiple !== w || base.height !== h) {
|
||||
base.setDimensions(); // adjust panel sizes
|
||||
// make sure page is lined up (use -1 animation time, so we can differeniate it from when animationTime = 0)
|
||||
base.gotoPage(base.currentPage, base.playing, null, -1);
|
||||
}
|
||||
if (typeof(stopTimer) === 'undefined'){ base.checkResize(); }
|
||||
}, 500);
|
||||
};
|
||||
|
||||
// Set panel dimensions to either resize content or adjust panel to content
|
||||
base.setDimensions = function(){
|
||||
var w, h, c, edge = 0,
|
||||
fullsize = { width: '100%', height: '100%' },
|
||||
// determine panel width
|
||||
pw = (o.showMultiple > 1) ? base.width || base.$window.width()/o.showMultiple : base.$window.width(),
|
||||
winw = base.$win.width();
|
||||
if (o.expand){
|
||||
w = base.$outer.width() - base.outerPad[0];
|
||||
base.height = h = base.$outer.height() - base.outerPad[1];
|
||||
base.$wrapper.add(base.$window).add(base.$items).css({ width: w, height: h });
|
||||
base.width = pw = (o.showMultiple > 1) ? w/o.showMultiple : w;
|
||||
}
|
||||
base.$items.each(function(i){
|
||||
c = $(this).children();
|
||||
if (o.resizeContents){
|
||||
// resize panel
|
||||
w = base.width;
|
||||
h = base.height;
|
||||
$(this).css({ width: w, height: h });
|
||||
if (c.length) {
|
||||
if (c[0].tagName === "EMBED") { c.attr(fullsize); } // needed for IE7; also c.length > 1 in IE7
|
||||
if (c[0].tagName === "OBJECT") { c.find('embed').attr(fullsize); }
|
||||
// resize panel contents, if solitary (wrapped content or solitary image)
|
||||
if (c.length === 1){ c.css(fullsize); }
|
||||
}
|
||||
} else {
|
||||
// get panel width & height and save it
|
||||
w = $(this).width() || base.width; // if image hasn't finished loading, width will be zero, so set it to base width instead
|
||||
if (c.length === 1 && w >= winw){
|
||||
w = (c.width() >= winw) ? pw : c.width(); // get width of solitary child
|
||||
c.css('max-width', w); // set max width for all children
|
||||
}
|
||||
$(this).css('width', w); // set width of panel
|
||||
h = (c.length === 1 ? c.outerHeight(true) : $(this).height()); // get height after setting width
|
||||
if (h <= base.outerPad[1]) { h = base.height; } // if height less than the outside padding, then set it to the preset height
|
||||
$(this).css('height', h);
|
||||
}
|
||||
base.panelSize[i] = [w,h,edge];
|
||||
edge += (o.vertical) ? h : w;
|
||||
});
|
||||
// Set total width of slider, Note that this is limited to 32766 by Opera - option removed
|
||||
base.$el.css((o.vertical ? 'height' : 'width'), edge);
|
||||
};
|
||||
|
||||
// get dimension of multiple panels, as needed
|
||||
base.getDim = function(page){
|
||||
if (base.pages < 1 || isNaN(page)) { return [ base.width, base.height ]; } // prevent errors when base.panelSize is empty
|
||||
page = (o.infiniteSlides && base.pages > 1) ? page : page - 1;
|
||||
var i,
|
||||
w = base.panelSize[page][0],
|
||||
h = base.panelSize[page][1];
|
||||
if (o.showMultiple > 1) {
|
||||
for (i=1; i < o.showMultiple; i++) {
|
||||
w += base.panelSize[(page + i)%o.showMultiple][0];
|
||||
h = Math.max(h, base.panelSize[page + i][1]);
|
||||
}
|
||||
}
|
||||
return [w,h];
|
||||
};
|
||||
|
||||
base.goForward = function(autoplay) {
|
||||
base.gotoPage(base.currentPage + o.changeBy * (o.playRtl ? -1 : 1), autoplay);
|
||||
};
|
||||
|
||||
base.goBack = function(autoplay) {
|
||||
base.gotoPage(base.currentPage + o.changeBy * (o.playRtl ? 1 : -1), autoplay);
|
||||
};
|
||||
|
||||
base.gotoPage = function(page, autoplay, callback, time) {
|
||||
if (autoplay !== true) {
|
||||
autoplay = false;
|
||||
base.startStop(false);
|
||||
base.makeActive();
|
||||
}
|
||||
// check if page is an id or class name
|
||||
if (/^[#|.]/.test(page) && $(page).length) {
|
||||
page = $(page).closest('.panel').index() + base.adj;
|
||||
}
|
||||
// rewind effect occurs here when changeBy > 1
|
||||
if (o.changeBy !== 1){
|
||||
if (page < 0) { page += base.pages; }
|
||||
if (page > base.pages) { page -= base.pages; }
|
||||
}
|
||||
if (base.pages <= 1) { return; } // prevents animation
|
||||
base.$lastPage = base.$currentPage;
|
||||
if (typeof(page) !== "number") {
|
||||
page = o.startPanel;
|
||||
base.setCurrentPage(page);
|
||||
}
|
||||
|
||||
// pause YouTube videos before scrolling or prevent change if playing
|
||||
if (autoplay && o.isVideoPlaying(base)) { return; }
|
||||
|
||||
if (page > base.pages + 1 - base.adj) { page = (!o.infiniteSlides && !o.stopAtEnd) ? 1 : base.pages; }
|
||||
if (page < base.adj ) { page = (!o.infiniteSlides && !o.stopAtEnd) ? base.pages : 1; }
|
||||
base.currentPage = ( page > base.pages ) ? base.pages : ( page < 1 ) ? 1 : base.currentPage;
|
||||
base.$currentPage = base.$items.eq(base.currentPage - base.adj);
|
||||
base.exactPage = page;
|
||||
base.targetPage = (page === 0) ? base.pages - base.adj : (page > base.pages) ? 1 - base.adj : page - base.adj;
|
||||
base.$targetPage = base.$items.eq( base.targetPage );
|
||||
time = time || o.animationTime;
|
||||
// don't trigger events when time = 1 - to prevent FX from firing multiple times on page resize
|
||||
if (time >= 0) { base.$el.trigger('slide_init', base); }
|
||||
|
||||
base.slideControls(true, false);
|
||||
|
||||
// When autoplay isn't passed, we stop the timer
|
||||
if (autoplay !== true) { autoplay = false; }
|
||||
// Stop the slider when we reach the last page, if the option stopAtEnd is set to true
|
||||
if (!autoplay || (o.stopAtEnd && page === base.pages)) { base.startStop(false); }
|
||||
|
||||
if (time >= 0) { base.$el.trigger('slide_begin', base); }
|
||||
|
||||
// delay starting slide animation
|
||||
setTimeout(function(d){
|
||||
// resize slider if content size varies
|
||||
if (!o.resizeContents) {
|
||||
// animating the wrapper resize before the window prevents flickering in Firefox
|
||||
d = base.getDim(page);
|
||||
base.$wrapper.filter(':not(:animated)').animate(
|
||||
// prevent animating a dimension to zero
|
||||
{ width: d[0] || base.width, height: d[1] || base.height },
|
||||
{ queue: false, duration: (time < 0 ? 0 : time), easing: o.easing }
|
||||
);
|
||||
}
|
||||
d = {};
|
||||
d[base.dir] = -base.panelSize[(o.infiniteSlides && base.pages > 1) ? page : page - 1][2];
|
||||
// Animate Slider
|
||||
base.$el.filter(':not(:animated)').animate(
|
||||
d, { queue: false, duration: time, easing: o.easing, complete: function(){ base.endAnimation(page, callback, time); } }
|
||||
);
|
||||
}, parseInt(o.delayBeforeAnimate, 10) || 0);
|
||||
};
|
||||
|
||||
base.endAnimation = function(page, callback, time){
|
||||
if (page === 0) {
|
||||
base.$el.css( base.dir, -base.panelSize[base.pages][2]);
|
||||
page = base.pages;
|
||||
} else if (page > base.pages) {
|
||||
// reset back to start position
|
||||
base.$el.css( base.dir, -base.panelSize[1][2]);
|
||||
page = 1;
|
||||
}
|
||||
base.exactPage = page;
|
||||
base.setCurrentPage(page, false);
|
||||
// Add active panel class
|
||||
base.$items.removeClass('activePage').eq(page - base.adj).addClass('activePage');
|
||||
|
||||
if (!base.hovered) { base.slideControls(false); }
|
||||
|
||||
if (time >= 0) { base.$el.trigger('slide_complete', base); }
|
||||
// callback from external slide control: $('#slider').anythingSlider(4, function(slider){ })
|
||||
if (typeof callback === 'function') { callback(base); }
|
||||
|
||||
// Continue slideshow after a delay
|
||||
if (o.autoPlayLocked && !base.playing) {
|
||||
setTimeout(function(){
|
||||
base.startStop(true);
|
||||
// subtract out slide delay as the slideshow waits that additional time.
|
||||
}, o.resumeDelay - (o.autoPlayDelayed ? o.delay : 0));
|
||||
}
|
||||
};
|
||||
|
||||
base.setCurrentPage = function(page, move) {
|
||||
page = parseInt(page, 10);
|
||||
if (base.pages < 1 || page === 0 || isNaN(page)) { return; }
|
||||
if (page > base.pages + 1 - base.adj) { page = base.pages - base.adj; }
|
||||
if (page < base.adj ) { page = 1; }
|
||||
|
||||
// Set visual
|
||||
if (o.buildNavigation){
|
||||
base.$nav
|
||||
.find('.cur').removeClass('cur').end()
|
||||
.find('a').eq(page - 1).addClass('cur');
|
||||
}
|
||||
|
||||
// hide/show arrows based on infinite scroll mode
|
||||
if (!o.infiniteSlides && o.stopAtEnd){
|
||||
base.$wrapper
|
||||
.find('span.forward')[ page === base.pages ? 'addClass' : 'removeClass']('disabled').end()
|
||||
.find('span.back')[ page === 1 ? 'addClass' : 'removeClass']('disabled');
|
||||
if (page === base.pages && base.playing) { base.startStop(); }
|
||||
}
|
||||
|
||||
// Only change left if move does not equal false
|
||||
if (!move) {
|
||||
var d = base.getDim(page);
|
||||
base.$wrapper
|
||||
.css({ width: d[0], height: d[1] })
|
||||
.add(base.$window).scrollLeft(0); // reset in case tabbing changed this scrollLeft - probably overly redundant
|
||||
base.$el.css( base.dir, -base.panelSize[(o.infiniteSlides && base.pages > 1) ? page : page - 1][2] );
|
||||
}
|
||||
// Update local variable
|
||||
base.currentPage = page;
|
||||
base.$currentPage = base.$items.removeClass('activePage').eq(page - base.adj).addClass('activePage');
|
||||
|
||||
};
|
||||
|
||||
base.makeActive = function(){
|
||||
// Set current slider as active so keyboard navigation works properly
|
||||
if (!base.$wrapper.is('.activeSlider')){
|
||||
$('.activeSlider').removeClass('activeSlider');
|
||||
base.$wrapper.addClass('activeSlider');
|
||||
}
|
||||
};
|
||||
|
||||
// This method tries to find a hash that matches an ID and panel-X
|
||||
// If either found, it tries to find a matching item
|
||||
// If that is found as well, then it returns the page number
|
||||
base.gotoHash = function(){
|
||||
var h = base.win.location.hash,
|
||||
i = h.indexOf('&'),
|
||||
n = h.match(base.regex);
|
||||
if (n === null && !/^#&/.test(h)) {
|
||||
// #quote2&panel1-3&panel3-3
|
||||
h = h.substring(0, (i >= 0 ? i : h.length));
|
||||
// ensure the element is in the same slider
|
||||
n = ($(h).closest('.anythingBase')[0] === base.el) ? $(h).closest('.panel').index() : null;
|
||||
} else if (n !== null) {
|
||||
// #&panel1-3&panel3-3
|
||||
n = (o.hashTags) ? parseInt(n[1],10) : null;
|
||||
}
|
||||
return n;
|
||||
};
|
||||
|
||||
base.setHash = function(n){
|
||||
var s = 'panel' + base.runTimes + '-',
|
||||
h = base.win.location.hash;
|
||||
if ( typeof h !== 'undefined' ) {
|
||||
base.win.location.hash = (h.indexOf(s) > 0) ? h.replace(base.regex, s + n) : h + "&" + s + n;
|
||||
}
|
||||
};
|
||||
|
||||
// Slide controls (nav and play/stop button up or down)
|
||||
base.slideControls = function(toggle){
|
||||
var dir = (toggle) ? 'slideDown' : 'slideUp',
|
||||
t1 = (toggle) ? 0 : o.animationTime,
|
||||
t2 = (toggle) ? o.animationTime: 0,
|
||||
op = (toggle) ? 1 : 0,
|
||||
sign = (toggle) ? 0 : 1; // 0 = visible, 1 = hidden
|
||||
if (o.toggleControls) {
|
||||
base.$controls.stop(true,true).delay(t1)[dir](o.animationTime/2).delay(t2);
|
||||
}
|
||||
if (o.buildArrows && o.toggleArrows) {
|
||||
if (!base.hovered && base.playing) { sign = 1; op = 0; } // don't animate arrows during slideshow
|
||||
base.$forward.stop(true,true).delay(t1).animate({ right: sign * base.$arrowWidth, opacity: op }, o.animationTime/2);
|
||||
base.$back.stop(true,true).delay(t1).animate({ left: sign * base.$arrowWidth, opacity: op }, o.animationTime/2);
|
||||
}
|
||||
};
|
||||
|
||||
base.clearTimer = function(paused){
|
||||
// Clear the timer only if it is set
|
||||
if (base.timer) {
|
||||
base.win.clearInterval(base.timer);
|
||||
if (!paused && base.slideshow) {
|
||||
base.$el.trigger('slideshow_stop', base);
|
||||
base.slideshow = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Pass startStop(false) to stop and startStop(true) to play
|
||||
base.startStop = function(playing, paused) {
|
||||
if (playing !== true) { playing = false; } // Default if not supplied is false
|
||||
base.playing = playing;
|
||||
|
||||
if (playing && !paused) {
|
||||
base.$el.trigger('slideshow_start', base);
|
||||
base.slideshow = true;
|
||||
}
|
||||
|
||||
// Toggle playing and text
|
||||
if (o.buildStartStop) {
|
||||
base.$startStop.toggleClass('playing', playing).find('span').html( playing ? o.stopText : o.startText );
|
||||
// add button text to title attribute if it is hidden by text-indent
|
||||
if (parseInt(base.$startStop.find('span').css('text-indent'),10) < 0) {
|
||||
base.$startStop.addClass(o.tooltipClass).attr( 'title', playing ? o.stopText : o.startText );
|
||||
}
|
||||
}
|
||||
|
||||
// Pause slideshow while video is playing
|
||||
if (playing){
|
||||
base.clearTimer(true); // Just in case this was triggered twice in a row
|
||||
base.timer = base.win.setInterval(function() {
|
||||
// prevent autoplay if video is playing
|
||||
if ( !o.isVideoPlaying(base) ) {
|
||||
base.goForward(true);
|
||||
// stop slideshow if resume if false
|
||||
} else if (!o.resumeOnVideoEnd) {
|
||||
base.startStop();
|
||||
}
|
||||
}, o.delay);
|
||||
} else {
|
||||
base.clearTimer();
|
||||
}
|
||||
};
|
||||
|
||||
// Trigger the initialization
|
||||
base.init();
|
||||
};
|
||||
|
||||
$.anythingSlider.defaults = {
|
||||
// Appearance
|
||||
theme : "default", // Theme name, add the css stylesheet manually
|
||||
expand : false, // If true, the entire slider will expand to fit the parent element
|
||||
resizeContents : true, // If true, solitary images/objects in the panel will expand to fit the viewport
|
||||
vertical : false, // If true, all panels will slide vertically; they slide horizontally otherwise
|
||||
showMultiple : false, // Set this value to a number and it will show that many slides at once
|
||||
easing : "swing", // Anything other than "linear" or "swing" requires the easing plugin or jQuery UI
|
||||
|
||||
buildArrows : true, // If true, builds the forwards and backwards buttons
|
||||
buildNavigation : true, // If true, builds a list of anchor links to link to each panel
|
||||
buildStartStop : true, // ** If true, builds the start/stop button
|
||||
|
||||
appendForwardTo : null, // Append forward arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
|
||||
appendBackTo : null, // Append back arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
|
||||
appendControlsTo : null, // Append controls (navigation + start-stop) to a HTML element (jQuery Object, selector or HTMLNode), if not null
|
||||
appendNavigationTo : null, // Append navigation buttons to a HTML element (jQuery Object, selector or HTMLNode), if not null
|
||||
appendStartStopTo : null, // Append start-stop button to a HTML element (jQuery Object, selector or HTMLNode), if not null
|
||||
|
||||
toggleArrows : false, // If true, side navigation arrows will slide out on hovering & hide @ other times
|
||||
toggleControls : false, // if true, slide in controls (navigation + play/stop button) on hover and slide change, hide @ other times
|
||||
|
||||
startText : "Start", // Start button text
|
||||
stopText : "Stop", // Stop button text
|
||||
forwardText : "»", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image)
|
||||
backText : "«", // Link text used to move the slider back (hidden by CSS, replace with arrow image)
|
||||
tooltipClass : "tooltip", // Class added to navigation & start/stop button (text copied to title if it is hidden by a negative text indent)
|
||||
|
||||
// Function
|
||||
enableArrows : true, // if false, arrows will be visible, but not clickable.
|
||||
enableNavigation : true, // if false, navigation links will still be visible, but not clickable.
|
||||
enableStartStop : true, // if false, the play/stop button will still be visible, but not clickable. Previously "enablePlay"
|
||||
enableKeyboard : true, // if false, keyboard arrow keys will not work for this slider.
|
||||
|
||||
// Navigation
|
||||
startPanel : 1, // This sets the initial panel
|
||||
changeBy : 1, // Amount to go forward or back when changing panels.
|
||||
hashTags : true, // Should links change the hashtag in the URL?
|
||||
infiniteSlides : true, // if false, the slider will not wrap & not clone any panels
|
||||
navigationFormatter : null, // Details at the top of the file on this use (advanced use)
|
||||
navigationSize : false, // Set this to the maximum number of visible navigation tabs; false to disable
|
||||
|
||||
// Slideshow options
|
||||
autoPlay : false, // If true, the slideshow will start running; replaces "startStopped" option
|
||||
autoPlayLocked : false, // If true, user changing slides will not stop the slideshow
|
||||
autoPlayDelayed : false, // If true, starting a slideshow will delay advancing slides; if false, the slider will immediately advance to the next slide when slideshow starts
|
||||
pauseOnHover : true, // If true & the slideshow is active, the slideshow will pause on hover
|
||||
stopAtEnd : false, // If true & the slideshow is active, the slideshow will stop on the last page. This also stops the rewind effect when infiniteSlides is false.
|
||||
playRtl : false, // If true, the slideshow will move right-to-left
|
||||
|
||||
// Times
|
||||
delay : 3000, // How long between slideshow transitions in AutoPlay mode (in milliseconds)
|
||||
resumeDelay : 15000, // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
|
||||
animationTime : 600, // How long the slideshow transition takes (in milliseconds)
|
||||
delayBeforeAnimate : 0, // How long to pause slide animation before going to the desired slide (used if you want your "out" FX to show).
|
||||
|
||||
// Callbacks - removed from options to reduce size - they still work
|
||||
|
||||
// Interactivity
|
||||
clickForwardArrow : "click", // Event used to activate forward arrow functionality (e.g. add jQuery mobile's "swiperight")
|
||||
clickBackArrow : "click", // Event used to activate back arrow functionality (e.g. add jQuery mobile's "swipeleft")
|
||||
clickControls : "click focusin", // Events used to activate navigation control functionality
|
||||
clickSlideshow : "click", // Event used to activate slideshow play/stop button
|
||||
|
||||
// Video
|
||||
resumeOnVideoEnd : true, // If true & the slideshow is active & a supported video is playing, it will pause the autoplay until the video is complete
|
||||
resumeOnVisible : true, // If true the video will resume playing (if previously paused, except for YouTube iframe - known issue); if false, the video remains paused.
|
||||
addWmodeToObject : "opaque", // If your slider has an embedded object, the script will automatically add a wmode parameter with this setting
|
||||
isVideoPlaying : function(base){ return false; } // return true if video is playing or false if not - used by video extension
|
||||
|
||||
};
|
||||
|
||||
$.fn.anythingSlider = function(options, callback) {
|
||||
|
||||
return this.each(function(){
|
||||
var page, anySlide = $(this).data('AnythingSlider');
|
||||
|
||||
// initialize the slider but prevent multiple initializations
|
||||
if ((typeof(options)).match('object|undefined')){
|
||||
if (!anySlide) {
|
||||
(new $.anythingSlider(this, options));
|
||||
} else {
|
||||
anySlide.updateSlider();
|
||||
}
|
||||
// If options is a number, process as an external link to page #: $(element).anythingSlider(#)
|
||||
} else if (/\d/.test(options) && !isNaN(options) && anySlide) {
|
||||
page = (typeof(options) === "number") ? options : parseInt($.trim(options),10); // accepts " 2 "
|
||||
// ignore out of bound pages
|
||||
if ( page >= 1 && page <= anySlide.pages ) {
|
||||
anySlide.gotoPage(page, false, callback); // page #, autoplay, one time callback
|
||||
}
|
||||
// Accept id or class name
|
||||
} else if (/^[#|.]/.test(options) && $(options).length) {
|
||||
anySlide.gotoPage(options, false, callback);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
6
sites/all/libraries/AnythingSlider/js/jquery.anythingslider.min.js
vendored
Normal file
6
sites/all/libraries/AnythingSlider/js/jquery.anythingslider.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -0,0 +1,379 @@
|
||||
/*
|
||||
* AnythingSlider Video Controller 1.3 beta for AnythingSlider v1.6+
|
||||
* By Rob Garrison (aka Mottie & Fudgey)
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
*/
|
||||
(function($) {
|
||||
$.fn.anythingSliderVideo = function(options){
|
||||
|
||||
//Set the default values, use comma to separate the settings, example:
|
||||
var defaults = {
|
||||
videoID : 'asvideo' // id prefix
|
||||
};
|
||||
|
||||
return this.each(function(){
|
||||
// make sure a AnythingSlider is attached
|
||||
var video, tmp, service, sel, base = $(this).data('AnythingSlider');
|
||||
if (!base) { return; }
|
||||
video = base.video = {};
|
||||
// Next update, I may just force users to call the video extension instead of it auto-running on window load
|
||||
// then they can change the video options in that call instead of the base defaults, and maybe prevent the
|
||||
// videos being initialized twice on startup (once as a regular video and second time with the API string)
|
||||
video.options = $.extend({}, defaults, options);
|
||||
|
||||
// check if SWFObject is loaded
|
||||
video.hasSwfo = (typeof(swfobject) !== 'undefined' && swfobject.hasOwnProperty('embedSWF') && typeof(swfobject.embedSWF) === 'function') ? true : false;
|
||||
|
||||
video.list = {};
|
||||
video.hasVid = false;
|
||||
video.hasEmbed = false;
|
||||
video.services = $.fn.anythingSliderVideo.services;
|
||||
video.len = 0; // used to add a unique ID to videos "asvideo#"
|
||||
video.hasEmbedCount = 0;
|
||||
video.hasiframeCount = 0;
|
||||
video.$items = base.$items.filter(':not(.cloned)');
|
||||
|
||||
// find and save all known videos
|
||||
for (service in video.services) {
|
||||
if (typeof(service) === 'string') {
|
||||
sel = video.services[service].selector;
|
||||
video.$items.find(sel).each(function(){
|
||||
tmp = $(this);
|
||||
// save panel and video selector in the list
|
||||
tmp.attr('id', video.options.videoID + video.len);
|
||||
video.list[video.len] = {
|
||||
id : video.options.videoID + video.len++,
|
||||
panel : tmp.closest('.panel')[0],
|
||||
service : service,
|
||||
selector : sel,
|
||||
status : -1 // YouTube uses -1 to mean the video is unstarted
|
||||
};
|
||||
video.hasVid = true;
|
||||
if (sel.match('embed|object')) {
|
||||
video.hasEmbed = true;
|
||||
video.hasEmbedCount++;
|
||||
} else if (sel.match('iframe')) {
|
||||
video.hasiframeCount++;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize each video, as needed
|
||||
$.each(video.list, function(i,s){
|
||||
// s.id = ID, s.panel = slider panel (DOM), s.selector = 'jQuery selector'
|
||||
var tmp, $tar, vidsrc, opts,
|
||||
$vid = $(s.panel).find(s.selector),
|
||||
service = video.services[s.service],
|
||||
api = service.initAPI || '';
|
||||
// Initialize embeded video javascript api using SWFObject, if loaded
|
||||
if (video.hasEmbed && video.hasSwfo && s.selector.match('embed|object')) {
|
||||
$vid.each(function(){
|
||||
// Older IE doesn't have an object - just make sure we are wrapping the correct element
|
||||
$tar = ($(this).parent()[0].tagName === 'OBJECT') ? $(this).parent() : $(this);
|
||||
vidsrc = ($tar[0].tagName === 'EMBED') ? $tar.attr('src') : $tar.find('embed').attr('src') || $tar.children().filter('[name=movie]').attr('value');
|
||||
opts = $.extend(true, {}, {
|
||||
flashvars : null,
|
||||
params : { allowScriptAccess: 'always', wmode : base.options.addWmodeToObject, allowfullscreen : true },
|
||||
attr : { 'class' : $tar.attr('class'), 'style' : $tar.attr('style'), 'data-url' : vidsrc }
|
||||
}, service.embedOpts);
|
||||
$tar.wrap('<div id="' + s.id + '"></div>');
|
||||
// use SWFObject if it exists, it replaces the wrapper with the object/embed
|
||||
swfobject.embedSWF(vidsrc + (api === '' ? '': api + s.id), s.id,
|
||||
$tar.attr('width'), $tar.attr('height'), '10', null,
|
||||
opts.flashvars, opts.params, opts.attr, function(){
|
||||
// run init code if it exists
|
||||
if (service.hasOwnProperty('init')) {
|
||||
video.list[i].player = service.init(base, s.id, i);
|
||||
}
|
||||
if (i >= video.hasEmbedCount) {
|
||||
base.$el.trigger('swf_completed', base); // swf callback
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
} else if (s.selector.match('iframe')) {
|
||||
$vid.each(function(i,v){
|
||||
vidsrc = $(this).attr('src');
|
||||
tmp = (vidsrc.match(/\?/g) ? '' : '?') + '&wmode=' + base.options.addWmodeToObject; // string connector & wmode
|
||||
$(this).attr('src', function(i,r){ return r + tmp + (api === '' ? '': api + s.id); });
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Returns URL parameter; url: http://www.somesite.com?name=hello&id=11111
|
||||
// Original code from Netlobo.com (http://www.netlobo.com/url_query_string_javascript.html)
|
||||
video.gup = function(n,s){
|
||||
n = n.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");
|
||||
var p = (new RegExp("[\\?&]"+n+"=([^&#]*)")).exec(s || window.location.href);
|
||||
return (p===null) ? "" : p[1];
|
||||
};
|
||||
|
||||
// postMessage to iframe - http://benalman.com/projects/jquery-postmessage-plugin/ (FOR IE7)
|
||||
video.postMsg = function(data, vid){
|
||||
var $vid = $('#' + vid);
|
||||
if ($vid.length){
|
||||
$vid[0].contentWindow.postMessage(data, $vid.attr('src').split('?')[0]);
|
||||
}
|
||||
};
|
||||
|
||||
// receive message from iframe
|
||||
// no way to figure out which iframe since the message is from the window
|
||||
video.message = function(e){
|
||||
if (e.data) {
|
||||
if (/infoDelivery/g.test(e.data)) { return; } // ignore youtube video loading spam
|
||||
var data = $.parseJSON(e.data);
|
||||
$.each(video.list, function(i,s){
|
||||
if (video.services[video.list[i].service].hasOwnProperty('message')) {
|
||||
video.services[video.list[i].service].message(base, data);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// toDO = 'cont', 'pause' or 'isPlaying'
|
||||
video.control = function(toDo){
|
||||
var i,
|
||||
s = video.list,
|
||||
slide = (toDo === 'pause') ? base.$lastPage[0] : base.$currentPage[0],
|
||||
isPlaying = false;
|
||||
for (i=0; i < video.len; i++){
|
||||
if (s[i].panel === slide && video.services[s[i].service].hasOwnProperty(toDo)){
|
||||
isPlaying = video.services[s[i].service][toDo](base, s[i].id, i);
|
||||
}
|
||||
}
|
||||
return isPlaying;
|
||||
};
|
||||
|
||||
// iframe event listener
|
||||
if (video.hasiframeCount){
|
||||
if (window.addEventListener){
|
||||
window.addEventListener('message', video.message, false);
|
||||
} else { // IE
|
||||
window.attachEvent('onmessage', video.message, false);
|
||||
}
|
||||
}
|
||||
|
||||
// bind to events
|
||||
base.$el
|
||||
.bind('slide_init', function(){
|
||||
video.control('pause');
|
||||
})
|
||||
.bind('slide_complete', function(){
|
||||
video.control('cont');
|
||||
});
|
||||
|
||||
base.options.isVideoPlaying = function(){ return video.control('isPlaying'); };
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
/* Each video service is set up as follows
|
||||
* service-name : {
|
||||
* // initialization
|
||||
* selector : 'object[data-url*=service], embed[src*=service]', // required: jQuery selector used to find the video ('video' or 'iframe[src*=service]' are other examples)
|
||||
* initAPI : 'string added to the URL to initialize the API', // optional: the string must end with a parameter pointing to the video id (e.g. "&player_id=")
|
||||
* embedOpts : { flashvars: {}, params: {}, attr: {} }, // optional: add any required flashvars, parameters or attributes to initialize the API
|
||||
* // video startup functions
|
||||
* init : function(base, vid, index){ }, // optional: include any additional initialization code here; function called AFTER the embeded video is added using SWFObject
|
||||
* // required functions
|
||||
* cont : function(base, vid, index){ }, // required: continue play if video was previously played
|
||||
* pause : function(base, vid, index){ }, // required: pause ALL videos
|
||||
* message : function(base, data){ }, // required for iframe: process data received from iframe and update the video status for the "isPlaying" function
|
||||
* isPlaying : function(base, vid, index){ } // required: return true if video is playing and return false if not playing (paused or ended)
|
||||
* }
|
||||
*
|
||||
* Function variables
|
||||
* base (object) = plugin base, all video values/functions are stored in base.video
|
||||
* vid (string) is the ID of the video: vid = "asvideo1"; so jQuery needs a "#" in front... "#" + videoID option default ("asvideo") + index (e.g. "1"); each video matching a service will have a unquie vid
|
||||
* index (number) is the unique video number from the vid (starts from zero)
|
||||
*
|
||||
* var list = base.video.list[index]; list will contain:
|
||||
* list.id = vid
|
||||
* list.service = service name (e.g. 'video', 'vimeo1', 'vimeo2', etc)
|
||||
* list.selector = 'jQuery selector' (e.g. 'video', 'object[data-url*=vimeo]', 'iframe[src*=vimeo]', etc)
|
||||
* list.panel = AnythingSlider panel DOM object. So you can target the video using $(list[index].panel).find(list[index].service) or $('#' + vid)
|
||||
* list.status = video status, updated by the iframe event listeners added in the video service "ready" function; see examples below
|
||||
*/
|
||||
|
||||
$.fn.anythingSliderVideo.services = {
|
||||
|
||||
// *** HTML5 video ***
|
||||
video : {
|
||||
selector : 'video',
|
||||
cont : function(base, vid, index){
|
||||
var $vid = $('#' + vid);
|
||||
if ($vid.length && $vid[0].paused && $vid[0].currentTime > 0 && !$vid[0].ended) {
|
||||
$vid[0].play();
|
||||
}
|
||||
},
|
||||
pause : function(base, vid){
|
||||
// pause ALL videos on the page
|
||||
$('video').each(function(){
|
||||
if (typeof(this.pause) !== 'undefined') { this.pause(); } // throws an error in older ie without this
|
||||
});
|
||||
},
|
||||
isPlaying : function(base, vid, index){
|
||||
var $vid = $('#' + vid);
|
||||
// media.paused seems to be the only way to determine if a video is playing
|
||||
return ($vid.length && typeof($vid[0].pause) !== 'undefined' && !$vid[0].paused && !$vid[0].ended) ? true : false;
|
||||
}
|
||||
},
|
||||
|
||||
// *** Vimeo iframe *** isolated demo: http://jsfiddle.net/Mottie/GxwEX/
|
||||
vimeo1 : {
|
||||
selector : 'iframe[src*=vimeo]',
|
||||
initAPI : '&api=1&player_id=', // video ID added to the end
|
||||
cont : function(base, vid, index){
|
||||
if (base.options.resumeOnVisible && base.video.list[index].status === 'pause'){
|
||||
// Commands sent to the iframe originally had "JSON.stringify" applied to them,
|
||||
// but not all browsers support this, so it's just as easy to wrap it in quotes.
|
||||
base.video.postMsg('{"method":"play"}', vid);
|
||||
}
|
||||
},
|
||||
pause : function(base, vid){
|
||||
// pause ALL videos on the page
|
||||
$('iframe[src*=vimeo]').each(function(){
|
||||
base.video.postMsg('{"method":"pause"}', this.id);
|
||||
});
|
||||
},
|
||||
message : function(base, data){
|
||||
// *** VIMEO *** iframe uses data.player_id
|
||||
var index, vid = data.player_id || ''; // vid = data.player_id (unique to vimeo)
|
||||
if (vid !== ''){
|
||||
index = vid.replace(base.video.options.videoID, '');
|
||||
if (data.event === 'ready') {
|
||||
// Vimeo ready, add additional event listeners for video status
|
||||
base.video.postMsg('{"method":"addEventListener","value":"play"}', vid);
|
||||
base.video.postMsg('{"method":"addEventListener","value":"pause"}', vid);
|
||||
base.video.postMsg('{"method":"addEventListener","value":"finish"}', vid);
|
||||
}
|
||||
// update current status - vimeo puts it in data.event
|
||||
if (base.video.list[index]) { base.video.list[index].status = data.event; }
|
||||
}
|
||||
},
|
||||
isPlaying : function(base, vid, index){
|
||||
return (base.video.list[index].status === 'play') ? true : false;
|
||||
}
|
||||
},
|
||||
|
||||
// *** Embeded Vimeo ***
|
||||
// SWFObject adds the url to the object data
|
||||
// using param as a selector, the script above looks for the parent if it sees "param"
|
||||
vimeo2 : {
|
||||
selector : 'object[data-url*=vimeo], embed[src*=vimeo]',
|
||||
embedOpts : { flashvars : { api : 1 } },
|
||||
cont : function(base, vid, index) {
|
||||
if (base.options.resumeOnVisible) {
|
||||
var $vid = $('#' + vid);
|
||||
// continue video if previously played & not finished (api_finish doesn't seem to exist) - duration can be a decimal number, so subtract it and look at the difference (2 seconds here)
|
||||
if (typeof($vid[0].api_play) === 'function' && $vid[0].api_paused() && $vid[0].api_getCurrentTime() !== 0 && ($vid[0].api_getDuration() - $vid[0].api_getCurrentTime()) > 2) {
|
||||
$vid[0].api_play();
|
||||
}
|
||||
}
|
||||
},
|
||||
pause : function(base, vid){
|
||||
// find ALL videos and pause them, just in case
|
||||
$('object[data-url*=vimeo], embed[src*=vimeo]').each(function(){
|
||||
var el = (this.tagName === 'EMBED') ? $(this).parent()[0] : this;
|
||||
if (typeof(el.api_pause) === 'function') {
|
||||
el.api_pause();
|
||||
}
|
||||
});
|
||||
},
|
||||
isPlaying : function(base, vid, index){
|
||||
var $vid = $('#' + vid);
|
||||
return (typeof($vid[0].api_paused) === 'function' && !$vid[0].api_paused()) ? true : false;
|
||||
}
|
||||
},
|
||||
|
||||
// *** iframe YouTube *** isolated demo: http://jsfiddle.net/Mottie/qk5MY/
|
||||
youtube1 : {
|
||||
selector : 'iframe[src*=youtube]',
|
||||
// "iv_load_policy=3" should turn off annotations on init, but doesn't seem to
|
||||
initAPI : '&iv_load_policy=3&enablejsapi=1&playerapiid=',
|
||||
cont : function(base, vid, index){
|
||||
if (base.options.resumeOnVisible && base.video.list[index].status === 2){
|
||||
base.video.postMsg('{"event":"command","func":"playVideo"}', vid);
|
||||
}
|
||||
},
|
||||
pause : function(base, vid, index){
|
||||
// pause ALL videos on the page - in IE, pausing a video means it will continue when next seen =(
|
||||
$('iframe[src*=youtube]').each(function(){
|
||||
// if (this.id !== vid || (this.id === vid && base.video.list[index].status >= 0)) { // trying to fix the continue video problem; this only breaks it
|
||||
base.video.postMsg('{"event":"command","func":"pauseVideo"}', vid);
|
||||
// }
|
||||
});
|
||||
},
|
||||
message : function(base, data){
|
||||
if (data.event === 'infoDelivery') { return; } // ignore youtube video loading spam
|
||||
// *** YouTube *** iframe returns an embeded url (data.info.videoUrl) but no video id...
|
||||
if (data.info && data.info.videoUrl) {
|
||||
// figure out vid for youtube
|
||||
// data.info.videoURL = http://www.youtube.com/watch?v=###########&feature=player_embedded
|
||||
var url = base.video.gup('v', data.info.videoUrl), // end up with ###########, now find it
|
||||
v = $('iframe[src*=' + url + ']'), vid, index;
|
||||
// iframe src changes when watching related videos; so there is no way to tell which video has an update
|
||||
if (v.length) {
|
||||
vid = v[0].id;
|
||||
index = vid.replace(base.video.options.videoID, '');
|
||||
// YouTube ready, add additional event listeners for video status. BUT this never fires off =(
|
||||
// Fixing this may solve the continue problem
|
||||
if (data.event === 'onReady') {
|
||||
base.video.postMsg('{"event":"listening","func":"onStateChange"}', vid);
|
||||
}
|
||||
// Update status, so the "isPlaying" function can access it
|
||||
if (data.event === 'onStateChange' && base.video.list[index]) {
|
||||
// update list with current status; data.info.playerState = YouTube
|
||||
base.video.list[index].status = data.info.playerState;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
isPlaying : function(base, vid, index){
|
||||
var status = base.video.list[index].status;
|
||||
// state: unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5).
|
||||
return (status === 1 || status > 2) ? true : false;
|
||||
}
|
||||
},
|
||||
|
||||
// *** Embeded YouTube ***
|
||||
// include embed for IE; SWFObject adds the url to the object data attribute
|
||||
youtube2 : {
|
||||
selector : 'object[data-url*=youtube], embed[src*=youtube]',
|
||||
initAPI : '&iv_load_policy=3&enablejsapi=1&version=3&playerapiid=', // video ID added to the end
|
||||
// YouTube - player states: unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5).
|
||||
cont : function(base, vid, index) {
|
||||
if (base.options.resumeOnVisible) {
|
||||
var $vid = $('#' + vid);
|
||||
// continue video if previously played and not cued
|
||||
if ($vid.length && typeof($vid[0].getPlayerState) === 'function' && $vid[0].getPlayerState() > 0) {
|
||||
$vid[0].playVideo();
|
||||
}
|
||||
}
|
||||
},
|
||||
pause : function(base, vid){
|
||||
// find ALL videos and pause them, just in case
|
||||
$('object[data-url*=youtube], embed[src*=youtube]').each(function(){
|
||||
var el = (this.tagName === 'EMBED') ? $(this).parent()[0] : this;
|
||||
// player states: unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5).
|
||||
if (typeof(el.getPlayerState) === 'function' && el.getPlayerState() > 0) {
|
||||
// pause video if not autoplaying (if already initialized)
|
||||
el.pauseVideo();
|
||||
}
|
||||
});
|
||||
},
|
||||
isPlaying : function(base, vid){
|
||||
var $vid = $('#' + vid);
|
||||
return (typeof($vid[0].getPlayerState) === 'function' && ($vid[0].getPlayerState() === 1 || $vid[0].getPlayerState() > 2)) ? true : false;
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
|
||||
// Initialize video extension automatically
|
||||
jQuery(window).load(function(){
|
||||
jQuery('.anythingBase').anythingSliderVideo();
|
||||
});
|
||||
8
sites/all/libraries/AnythingSlider/js/jquery.anythingslider.video.min.js
vendored
Normal file
8
sites/all/libraries/AnythingSlider/js/jquery.anythingslider.video.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
140
sites/all/libraries/AnythingSlider/js/jquery.easing.1.2.js
Normal file
140
sites/all/libraries/AnythingSlider/js/jquery.easing.1.2.js
Normal file
@@ -0,0 +1,140 @@
|
||||
/*
|
||||
* jQuery EasIng v1.1.2 - http://gsgd.co.uk/sandbox/jquery.easIng.php
|
||||
*
|
||||
* Uses the built In easIng capabilities added In jQuery 1.1
|
||||
* to offer multiple easIng options
|
||||
*
|
||||
* Copyright (c) 2007 George Smith
|
||||
* Licensed under the MIT License:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*/
|
||||
|
||||
// t: current time, b: begInnIng value, c: change In value, d: duration
|
||||
|
||||
jQuery.extend( jQuery.easing,
|
||||
{
|
||||
easeInQuad: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t + b;
|
||||
},
|
||||
easeOutQuad: function (x, t, b, c, d) {
|
||||
return -c *(t/=d)*(t-2) + b;
|
||||
},
|
||||
easeInOutQuad: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t + b;
|
||||
return -c/2 * ((--t)*(t-2) - 1) + b;
|
||||
},
|
||||
easeInCubic: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t*t + b;
|
||||
},
|
||||
easeOutCubic: function (x, t, b, c, d) {
|
||||
return c*((t=t/d-1)*t*t + 1) + b;
|
||||
},
|
||||
easeInOutCubic: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t + b;
|
||||
return c/2*((t-=2)*t*t + 2) + b;
|
||||
},
|
||||
easeInQuart: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t*t*t + b;
|
||||
},
|
||||
easeOutQuart: function (x, t, b, c, d) {
|
||||
return -c * ((t=t/d-1)*t*t*t - 1) + b;
|
||||
},
|
||||
easeInOutQuart: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
|
||||
return -c/2 * ((t-=2)*t*t*t - 2) + b;
|
||||
},
|
||||
easeInQuint: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t*t*t*t + b;
|
||||
},
|
||||
easeOutQuint: function (x, t, b, c, d) {
|
||||
return c*((t=t/d-1)*t*t*t*t + 1) + b;
|
||||
},
|
||||
easeInOutQuint: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
|
||||
return c/2*((t-=2)*t*t*t*t + 2) + b;
|
||||
},
|
||||
easeInSine: function (x, t, b, c, d) {
|
||||
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
|
||||
},
|
||||
easeOutSine: function (x, t, b, c, d) {
|
||||
return c * Math.sin(t/d * (Math.PI/2)) + b;
|
||||
},
|
||||
easeInOutSine: function (x, t, b, c, d) {
|
||||
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
|
||||
},
|
||||
easeInExpo: function (x, t, b, c, d) {
|
||||
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
|
||||
},
|
||||
easeOutExpo: function (x, t, b, c, d) {
|
||||
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
|
||||
},
|
||||
easeInOutExpo: function (x, t, b, c, d) {
|
||||
if (t==0) return b;
|
||||
if (t==d) return b+c;
|
||||
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
|
||||
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
|
||||
},
|
||||
easeInCirc: function (x, t, b, c, d) {
|
||||
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
|
||||
},
|
||||
easeOutCirc: function (x, t, b, c, d) {
|
||||
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
|
||||
},
|
||||
easeInOutCirc: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
|
||||
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
|
||||
},
|
||||
easeInElastic: function (x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
|
||||
},
|
||||
easeOutElastic: function (x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
|
||||
},
|
||||
easeInOutElastic: function (x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
|
||||
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
|
||||
},
|
||||
easeInBack: function (x, t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
return c*(t/=d)*t*((s+1)*t - s) + b;
|
||||
},
|
||||
easeOutBack: function (x, t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
|
||||
},
|
||||
easeInOutBack: function (x, t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
|
||||
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
|
||||
},
|
||||
easeInBounce: function (x, t, b, c, d) {
|
||||
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
|
||||
},
|
||||
easeOutBounce: function (x, t, b, c, d) {
|
||||
if ((t/=d) < (1/2.75)) {
|
||||
return c*(7.5625*t*t) + b;
|
||||
} else if (t < (2/2.75)) {
|
||||
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
|
||||
} else if (t < (2.5/2.75)) {
|
||||
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
|
||||
} else {
|
||||
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
|
||||
}
|
||||
},
|
||||
easeInOutBounce: function (x, t, b, c, d) {
|
||||
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
|
||||
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
|
||||
}
|
||||
});
|
||||
18
sites/all/libraries/AnythingSlider/js/jquery.min.js
vendored
Normal file
18
sites/all/libraries/AnythingSlider/js/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
4
sites/all/libraries/AnythingSlider/js/swfobject.js
Normal file
4
sites/all/libraries/AnythingSlider/js/swfobject.js
Normal file
File diff suppressed because one or more lines are too long
165
sites/all/libraries/AnythingSlider/license.txt
Normal file
165
sites/all/libraries/AnythingSlider/license.txt
Normal file
@@ -0,0 +1,165 @@
|
||||
GNU LESSER GENERAL PUBLIC LICENSE
|
||||
Version 3, 29 June 2007
|
||||
|
||||
Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
of this license document, but changing it is not allowed.
|
||||
|
||||
|
||||
This version of the GNU Lesser General Public License incorporates
|
||||
the terms and conditions of version 3 of the GNU General Public
|
||||
License, supplemented by the additional permissions listed below.
|
||||
|
||||
0. Additional Definitions.
|
||||
|
||||
As used herein, "this License" refers to version 3 of the GNU Lesser
|
||||
General Public License, and the "GNU GPL" refers to version 3 of the GNU
|
||||
General Public License.
|
||||
|
||||
"The Library" refers to a covered work governed by this License,
|
||||
other than an Application or a Combined Work as defined below.
|
||||
|
||||
An "Application" is any work that makes use of an interface provided
|
||||
by the Library, but which is not otherwise based on the Library.
|
||||
Defining a subclass of a class defined by the Library is deemed a mode
|
||||
of using an interface provided by the Library.
|
||||
|
||||
A "Combined Work" is a work produced by combining or linking an
|
||||
Application with the Library. The particular version of the Library
|
||||
with which the Combined Work was made is also called the "Linked
|
||||
Version".
|
||||
|
||||
The "Minimal Corresponding Source" for a Combined Work means the
|
||||
Corresponding Source for the Combined Work, excluding any source code
|
||||
for portions of the Combined Work that, considered in isolation, are
|
||||
based on the Application, and not on the Linked Version.
|
||||
|
||||
The "Corresponding Application Code" for a Combined Work means the
|
||||
object code and/or source code for the Application, including any data
|
||||
and utility programs needed for reproducing the Combined Work from the
|
||||
Application, but excluding the System Libraries of the Combined Work.
|
||||
|
||||
1. Exception to Section 3 of the GNU GPL.
|
||||
|
||||
You may convey a covered work under sections 3 and 4 of this License
|
||||
without being bound by section 3 of the GNU GPL.
|
||||
|
||||
2. Conveying Modified Versions.
|
||||
|
||||
If you modify a copy of the Library, and, in your modifications, a
|
||||
facility refers to a function or data to be supplied by an Application
|
||||
that uses the facility (other than as an argument passed when the
|
||||
facility is invoked), then you may convey a copy of the modified
|
||||
version:
|
||||
|
||||
a) under this License, provided that you make a good faith effort to
|
||||
ensure that, in the event an Application does not supply the
|
||||
function or data, the facility still operates, and performs
|
||||
whatever part of its purpose remains meaningful, or
|
||||
|
||||
b) under the GNU GPL, with none of the additional permissions of
|
||||
this License applicable to that copy.
|
||||
|
||||
3. Object Code Incorporating Material from Library Header Files.
|
||||
|
||||
The object code form of an Application may incorporate material from
|
||||
a header file that is part of the Library. You may convey such object
|
||||
code under terms of your choice, provided that, if the incorporated
|
||||
material is not limited to numerical parameters, data structure
|
||||
layouts and accessors, or small macros, inline functions and templates
|
||||
(ten or fewer lines in length), you do both of the following:
|
||||
|
||||
a) Give prominent notice with each copy of the object code that the
|
||||
Library is used in it and that the Library and its use are
|
||||
covered by this License.
|
||||
|
||||
b) Accompany the object code with a copy of the GNU GPL and this license
|
||||
document.
|
||||
|
||||
4. Combined Works.
|
||||
|
||||
You may convey a Combined Work under terms of your choice that,
|
||||
taken together, effectively do not restrict modification of the
|
||||
portions of the Library contained in the Combined Work and reverse
|
||||
engineering for debugging such modifications, if you also do each of
|
||||
the following:
|
||||
|
||||
a) Give prominent notice with each copy of the Combined Work that
|
||||
the Library is used in it and that the Library and its use are
|
||||
covered by this License.
|
||||
|
||||
b) Accompany the Combined Work with a copy of the GNU GPL and this license
|
||||
document.
|
||||
|
||||
c) For a Combined Work that displays copyright notices during
|
||||
execution, include the copyright notice for the Library among
|
||||
these notices, as well as a reference directing the user to the
|
||||
copies of the GNU GPL and this license document.
|
||||
|
||||
d) Do one of the following:
|
||||
|
||||
0) Convey the Minimal Corresponding Source under the terms of this
|
||||
License, and the Corresponding Application Code in a form
|
||||
suitable for, and under terms that permit, the user to
|
||||
recombine or relink the Application with a modified version of
|
||||
the Linked Version to produce a modified Combined Work, in the
|
||||
manner specified by section 6 of the GNU GPL for conveying
|
||||
Corresponding Source.
|
||||
|
||||
1) Use a suitable shared library mechanism for linking with the
|
||||
Library. A suitable mechanism is one that (a) uses at run time
|
||||
a copy of the Library already present on the user's computer
|
||||
system, and (b) will operate properly with a modified version
|
||||
of the Library that is interface-compatible with the Linked
|
||||
Version.
|
||||
|
||||
e) Provide Installation Information, but only if you would otherwise
|
||||
be required to provide such information under section 6 of the
|
||||
GNU GPL, and only to the extent that such information is
|
||||
necessary to install and execute a modified version of the
|
||||
Combined Work produced by recombining or relinking the
|
||||
Application with a modified version of the Linked Version. (If
|
||||
you use option 4d0, the Installation Information must accompany
|
||||
the Minimal Corresponding Source and Corresponding Application
|
||||
Code. If you use option 4d1, you must provide the Installation
|
||||
Information in the manner specified by section 6 of the GNU GPL
|
||||
for conveying Corresponding Source.)
|
||||
|
||||
5. Combined Libraries.
|
||||
|
||||
You may place library facilities that are a work based on the
|
||||
Library side by side in a single library together with other library
|
||||
facilities that are not Applications and are not covered by this
|
||||
License, and convey such a combined library under terms of your
|
||||
choice, if you do both of the following:
|
||||
|
||||
a) Accompany the combined library with a copy of the same work based
|
||||
on the Library, uncombined with any other library facilities,
|
||||
conveyed under the terms of this License.
|
||||
|
||||
b) Give prominent notice with the combined library that part of it
|
||||
is a work based on the Library, and explaining where to find the
|
||||
accompanying uncombined form of the same work.
|
||||
|
||||
6. Revised Versions of the GNU Lesser General Public License.
|
||||
|
||||
The Free Software Foundation may publish revised and/or new versions
|
||||
of the GNU Lesser General Public License from time to time. Such new
|
||||
versions will be similar in spirit to the present version, but may
|
||||
differ in detail to address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the
|
||||
Library as you received it specifies that a certain numbered version
|
||||
of the GNU Lesser General Public License "or any later version"
|
||||
applies to it, you have the option of following the terms and
|
||||
conditions either of that published version or of any later version
|
||||
published by the Free Software Foundation. If the Library as you
|
||||
received it does not specify a version number of the GNU Lesser
|
||||
General Public License, you may choose any version of the GNU Lesser
|
||||
General Public License ever published by the Free Software Foundation.
|
||||
|
||||
If the Library as you received it specifies that a proxy can decide
|
||||
whether future versions of the GNU Lesser General Public License shall
|
||||
apply, that proxy's public statement of acceptance of any version is
|
||||
permanent authorization for you to choose that version for the
|
||||
Library.
|
||||
79
sites/all/libraries/AnythingSlider/simple.html
Normal file
79
sites/all/libraries/AnythingSlider/simple.html
Normal file
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>AnythingSlider Simple Demo</title>
|
||||
<link rel="shortcut icon" href="demos/images/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="demos/images/apple-touch-icon.png">
|
||||
|
||||
<!-- jQuery (required) -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="demos/css/page.css">
|
||||
|
||||
<!-- Anything Slider -->
|
||||
<link rel="stylesheet" href="css/anythingslider.css">
|
||||
<script src="js/jquery.anythingslider.js"></script>
|
||||
|
||||
<!-- AnythingSlider optional extensions -->
|
||||
<!-- <script src="js/jquery.anythingslider.fx.js"></script> -->
|
||||
<!-- <script src="js/jquery.anythingslider.video.js"></script> -->
|
||||
|
||||
<!-- Define slider dimensions here -->
|
||||
<style>
|
||||
#slider { width: 700px; height: 390px; }
|
||||
</style>
|
||||
|
||||
<!-- AnythingSlider initialization -->
|
||||
<script>
|
||||
// DOM Ready
|
||||
$(function(){
|
||||
$('#slider').anythingSlider();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Older IE stylesheet, to reposition navigation arrows, added AFTER the theme stylesheet -->
|
||||
<!--[if lte IE 7]>
|
||||
<link rel="stylesheet" href="css/anythingslider-ie.css" type="text/css" media="screen" />
|
||||
<![endif]-->
|
||||
</head>
|
||||
|
||||
<body id="simple">
|
||||
|
||||
<!-- Links to other demo pages & docs -->
|
||||
<div id="nav">
|
||||
<a href="index.html">Main Demo</a>
|
||||
<a class="current" href="simple.html">Simple Demo</a>
|
||||
<a href="expand.html">Expand Demo</a>
|
||||
<a href="video.html">Video Demo</a>
|
||||
<a href="demos.html">FX Demos</a>
|
||||
<a class="play" href="http://jsfiddle.net/Mottie/VM8XG/">Playground</a>
|
||||
<a class="git" href="https://github.com/ProLoser/AnythingSlider/wiki">Documentation</a>
|
||||
<a class="git" href="http://github.com/ProLoser/AnythingSlider/downloads">Download</a>
|
||||
<a class="issue" href="https://github.com/ProLoser/AnythingSlider/issues">Issues</a><br><br>
|
||||
</div>
|
||||
<!-- End Links -->
|
||||
|
||||
<!-- Simple AnythingSlider -->
|
||||
|
||||
<ul id="slider">
|
||||
|
||||
<li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
|
||||
|
||||
<li><img src="demos/images/slide-env-1.jpg" alt=""></li>
|
||||
|
||||
<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
|
||||
|
||||
<li><img src="demos/images/slide-env-2.jpg" alt=""></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<!-- END AnythingSlider -->
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
351
sites/all/libraries/AnythingSlider/video.html
Normal file
351
sites/all/libraries/AnythingSlider/video.html
Normal file
@@ -0,0 +1,351 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>AnythingSlider Video Demo</title>
|
||||
<link rel="shortcut icon" href="demos/images/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="demos/images/apple-touch-icon.png">
|
||||
|
||||
<!-- jQuery (required) -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="demos/css/page.css">
|
||||
|
||||
<!-- Anything Slider optional plugins, but needed so the embeded video controls will work in IE -->
|
||||
<!-- http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js -->
|
||||
<script src="js/swfobject.js"></script>
|
||||
|
||||
<!-- Anything Slider -->
|
||||
<link rel="stylesheet" href="css/anythingslider.css">
|
||||
<script src="js/jquery.anythingslider.js"></script>
|
||||
|
||||
<!-- AnythingSlider video extension; optional, but needed to control video pause/play -->
|
||||
<script src="js/jquery.anythingslider.video.js"></script>
|
||||
|
||||
<script>
|
||||
// DOM Ready
|
||||
$(function(){
|
||||
$('#slider').anythingSlider({
|
||||
resizeContents : true,
|
||||
addWmodeToObject : 'transparent',
|
||||
navigationFormatter : function(index, panel){ // Format navigation labels with text
|
||||
return ['Vimeo-iframe', 'Vimeo-embed', 'YouTube-iframe', 'YouTube-embed', 'HTML5 Video'][index - 1];
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Older IE stylesheet, to reposition navigation arrows, added AFTER the theme stylesheet above -->
|
||||
<!--[if lte IE 7]>
|
||||
<link rel="stylesheet" href="css/anythingslider-ie.css" type="text/css" media="screen" />
|
||||
<![endif]-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<br>
|
||||
<div id="nav">
|
||||
<a href="index.html">Main Demo</a>
|
||||
<a href="simple.html">Simple Demo</a>
|
||||
<a href="expand.html">Expand Demo</a>
|
||||
<a class="current" href="video.html">Video Demo</a>
|
||||
<a href="demos.html">FX Demos</a>
|
||||
<a class="play" href="http://jsfiddle.net/Mottie/VM8XG/">Playground</a>
|
||||
<a class="git" href="https://github.com/ProLoser/AnythingSlider/wiki">Documentation</a>
|
||||
<a class="git" href="http://github.com/ProLoser/AnythingSlider/downloads">Download</a>
|
||||
<a class="issue" href="https://github.com/ProLoser/AnythingSlider/issues">Issues</a>
|
||||
</div>
|
||||
<br><br>
|
||||
|
||||
<!-- START AnythingSlider -->
|
||||
<ul id="slider">
|
||||
|
||||
<!-- Vimeo: iframe -->
|
||||
<li class="panel1"><iframe src="http://player.vimeo.com/video/18011143?title=0&byline=0&portrait=0" width="400" height="225" frameborder="0"></iframe></li>
|
||||
|
||||
<!-- Vimeo: Embeded -->
|
||||
<li class="panel2"><object width="940" height="529"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=12280336&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00adef&fullscreen=1&autoplay=0&loop=0" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=12280336&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00adef&fullscreen=1&autoplay=0&loop=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="940" height="529"></embed></object></li>
|
||||
|
||||
<!-- YouTube: iframe -->
|
||||
<li class="panel3"><iframe title="YouTube video player" width="480" height="385" src="http://www.youtube.com/embed/1gOyrAVZHi4" frameborder="0" allowfullscreen></iframe></li>
|
||||
|
||||
<!-- YouTube: Embedded -->
|
||||
<li class="panel4"><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&hl=en_US&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zSgiXGELjbc&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>
|
||||
|
||||
<!-- HTML5 Video -->
|
||||
<li class="panel5">
|
||||
<video width="320" height="240" controls="controls">
|
||||
<source src="demos/video/movie.ogg" type="video/ogg">
|
||||
<source src="demos/video/movie.mp4" type="video/mp4">
|
||||
<source src="demos/video/movie.webm" type="video/webm">
|
||||
Your browser does not support the video tag. But you could include an iframe/embeded video here.
|
||||
</video>
|
||||
</li>
|
||||
|
||||
</ul> <!-- END AnythingSlider -->
|
||||
|
||||
<br>
|
||||
|
||||
<!-- Video compatibility table -->
|
||||
<div class="video-info">
|
||||
<h2>AnythingSlider Video Extension Compatibility</h2>
|
||||
<table border="1" class="data">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">Video Type</th>
|
||||
<th rowspan="2">Function</th>
|
||||
<th colspan="7">Browser</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="header">FF</th>
|
||||
<th class="header">C</th>
|
||||
<th class="header">S</th>
|
||||
<th class="header">O</th>
|
||||
<th class="header">IE9</th>
|
||||
<th class="header">IE8</th>
|
||||
<th class="header">IE7</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<th rowspan="4">Vimeo iframe</th>
|
||||
<td>Setup</td>
|
||||
<td class="good"></td> <!-- Firefox -->
|
||||
<td class="good"></td> <!-- Chrome -->
|
||||
<td class="good"></td> <!-- Safari -->
|
||||
<td class="good"></td> <!-- Opera -->
|
||||
<td class="good"></td> <!-- IE9 -->
|
||||
<td class="good"></td> <!-- IE8 -->
|
||||
<td class="good"></td> <!-- IE7 -->
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Continue</td>
|
||||
<td class="good"></td> <!-- Firefox -->
|
||||
<td class="good"></td> <!-- Chrome -->
|
||||
<td class="good"></td> <!-- Safari -->
|
||||
<td class="good"></td> <!-- Opera -->
|
||||
<td class="good"></td> <!-- IE9 -->
|
||||
<td class="good"></td> <!-- IE8 -->
|
||||
<td class="bad"></td> <!-- IE7 -->
|
||||
</tr>
|
||||
<tr><td>Pause</td>
|
||||
<td class="good"></td> <!-- Firefox -->
|
||||
<td class="good"></td> <!-- Chrome -->
|
||||
<td class="good"></td> <!-- Safari -->
|
||||
<td class="good"></td> <!-- Opera -->
|
||||
<td class="good"></td> <!-- IE9 -->
|
||||
<td class="good"></td> <!-- IE8 -->
|
||||
<td class="bad"></td> <!-- IE7 -->
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pause Slideshow</td>
|
||||
<td class="good"></td> <!-- Firefox -->
|
||||
<td class="good"></td> <!-- Chrome -->
|
||||
<td class="good"></td> <!-- Safari -->
|
||||
<td class="good"></td> <!-- Opera -->
|
||||
<td class="good"></td> <!-- IE9 -->
|
||||
<td class="good"></td> <!-- IE8 -->
|
||||
<td class="bad"></td> <!-- IE7 -->
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th rowspan="4">Vimeo embed</th>
|
||||
<td>Setup</td>
|
||||
<td class="good"></td> <!-- Firefox -->
|
||||
<td class="good"></td> <!-- Chrome -->
|
||||
<td class="good"></td> <!-- Safari -->
|
||||
<td class="good"></td> <!-- Opera -->
|
||||
<td class="good"></td> <!-- IE9 -->
|
||||
<td class="good"></td> <!-- IE8 -->
|
||||
<td class="good"></td> <!-- IE7 -->
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Continue</td>
|
||||
<td class="good"></td> <!-- Firefox -->
|
||||
<td class="good"></td> <!-- Chrome -->
|
||||
<td class="good"></td> <!-- Safari -->
|
||||
<td class="good"></td> <!-- Opera -->
|
||||
<td class="good"></td> <!-- IE9 -->
|
||||
<td class="good"></td> <!-- IE8 -->
|
||||
<td class="good"></td> <!-- IE7 -->
|
||||
</tr>
|
||||
<tr><td>Pause</td>
|
||||
<td class="good"></td> <!-- Firefox -->
|
||||
<td class="good"></td> <!-- Chrome -->
|
||||
<td class="good"></td> <!-- Safari -->
|
||||
<td class="good"></td> <!-- Opera -->
|
||||
<td class="good"></td> <!-- IE9 -->
|
||||
<td class="good"></td> <!-- IE8 -->
|
||||
<td class="good"></td> <!-- IE7 -->
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pause Slideshow</td>
|
||||
<td class="good"></td> <!-- Firefox -->
|
||||
<td class="good"></td> <!-- Chrome -->
|
||||
<td class="good"></td> <!-- Safari -->
|
||||
<td class="good"></td> <!-- Opera -->
|
||||
<td class="good"></td> <!-- IE9 -->
|
||||
<td class="good"></td> <!-- IE8 -->
|
||||
<td class="good"></td> <!-- IE7 -->
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th rowspan="4">YouTube iframe</th>
|
||||
<td>Setup</td>
|
||||
<td class="good"></td> <!-- Firefox -->
|
||||
<td class="good"></td> <!-- Chrome -->
|
||||
<td class="good"></td> <!-- Safari -->
|
||||
<td class="good"></td> <!-- Opera -->
|
||||
<td class="good"></td> <!-- IE9 -->
|
||||
<td class="good"></td> <!-- IE8 -->
|
||||
<td class="good"></td> <!-- IE7 -->
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Continue *</td>
|
||||
<td class="prob"></td> <!-- Firefox -->
|
||||
<td class="prob"></td> <!-- Chrome -->
|
||||
<td class="prob"></td> <!-- Safari -->
|
||||
<td class="bad"></td> <!-- Opera -->
|
||||
<td class="prob"></td> <!-- IE9 -->
|
||||
<td class="prob"></td> <!-- IE8 -->
|
||||
<td class="bad"></td> <!-- IE7 -->
|
||||
</tr>
|
||||
<tr><td>Pause</td>
|
||||
<td class="good"></td> <!-- Firefox -->
|
||||
<td class="good"></td> <!-- Chrome -->
|
||||
<td class="good"></td> <!-- Safari -->
|
||||
<td class="good"></td> <!-- Opera -->
|
||||
<td class="good"></td> <!-- IE9 -->
|
||||
<td class="good"></td> <!-- IE8 -->
|
||||
<td class="bad"></td> <!-- IE7 -->
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pause Slideshow</td>
|
||||
<td class="good"></td> <!-- Firefox -->
|
||||
<td class="good"></td> <!-- Chrome -->
|
||||
<td class="good"></td> <!-- Safari -->
|
||||
<td class="bad"></td> <!-- Opera -->
|
||||
<td class="good"></td> <!-- IE9 -->
|
||||
<td class="good"></td> <!-- IE8 -->
|
||||
<td class="bad"></td> <!-- IE7 -->
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th rowspan="4">YouTube embed</th>
|
||||
<td>Setup</td>
|
||||
<td class="good"></td> <!-- Firefox -->
|
||||
<td class="good"></td> <!-- Chrome -->
|
||||
<td class="good"></td> <!-- Safari -->
|
||||
<td class="good"></td> <!-- Opera -->
|
||||
<td class="good"></td> <!-- IE9 -->
|
||||
<td class="good"></td> <!-- IE8 -->
|
||||
<td class="good"></td> <!-- IE7 -->
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Continue</td>
|
||||
<td class="good"></td> <!-- Firefox -->
|
||||
<td class="good"></td> <!-- Chrome -->
|
||||
<td class="good"></td> <!-- Safari -->
|
||||
<td class="good"></td> <!-- Opera -->
|
||||
<td class="good"></td> <!-- IE9 -->
|
||||
<td class="good"></td> <!-- IE8 -->
|
||||
<td class="good"></td> <!-- IE7 -->
|
||||
</tr>
|
||||
<tr><td>Pause</td>
|
||||
<td class="good"></td> <!-- Firefox -->
|
||||
<td class="good"></td> <!-- Chrome -->
|
||||
<td class="good"></td> <!-- Safari -->
|
||||
<td class="good"></td> <!-- Opera -->
|
||||
<td class="good"></td> <!-- IE9 -->
|
||||
<td class="good"></td> <!-- IE8 -->
|
||||
<td class="good"></td> <!-- IE7 -->
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pause Slideshow</td>
|
||||
<td class="good"></td> <!-- Firefox -->
|
||||
<td class="good"></td> <!-- Chrome -->
|
||||
<td class="good"></td> <!-- Safari -->
|
||||
<td class="good"></td> <!-- Opera -->
|
||||
<td class="good"></td> <!-- IE9 -->
|
||||
<td class="good"></td> <!-- IE8 -->
|
||||
<td class="good"></td> <!-- IE7 -->
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th rowspan="4">HTML5 Video</th>
|
||||
<td>Setup</td>
|
||||
<td class="good"></td> <!-- Firefox -->
|
||||
<td class="good"></td> <!-- Chrome -->
|
||||
<td class="prob"></td> <!-- Safari -->
|
||||
<td class="good"></td> <!-- Opera -->
|
||||
<td class="good"></td> <!-- IE9 -->
|
||||
<td class="bad"></td> <!-- IE8 -->
|
||||
<td class="bad"></td> <!-- IE7 -->
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Continue</td>
|
||||
<td class="good"></td> <!-- Firefox -->
|
||||
<td class="good"></td> <!-- Chrome -->
|
||||
<td class="good"></td> <!-- Safari -->
|
||||
<td class="good"></td> <!-- Opera -->
|
||||
<td class="good"></td> <!-- IE9 -->
|
||||
<td class="bad"></td> <!-- IE8 -->
|
||||
<td class="bad"></td> <!-- IE7 -->
|
||||
</tr>
|
||||
<tr><td>Pause</td>
|
||||
<td class="good"></td> <!-- Firefox -->
|
||||
<td class="good"></td> <!-- Chrome -->
|
||||
<td class="good"></td> <!-- Safari -->
|
||||
<td class="good"></td> <!-- Opera -->
|
||||
<td class="good"></td> <!-- IE9 -->
|
||||
<td class="bad"></td> <!-- IE8 -->
|
||||
<td class="bad"></td> <!-- IE7 -->
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pause Slideshow</td>
|
||||
<td class="good"></td> <!-- Firefox -->
|
||||
<td class="good"></td> <!-- Chrome -->
|
||||
<td class="good"></td> <!-- Safari -->
|
||||
<td class="good"></td> <!-- Opera -->
|
||||
<td class="good"></td> <!-- IE9 -->
|
||||
<td class="bad"></td> <!-- IE8 -->
|
||||
<td class="bad"></td> <!-- IE7 -->
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<br>
|
||||
<h3>Legend</h3>
|
||||
<ul>
|
||||
<li>(*) YouTube iframe
|
||||
<ul>
|
||||
<li>The video autoplays (continues) the second time the video comes into view, because it gets paused even though it hasn't started; oddly this isn't a problem in Firefox. Still working on a fix.</li>
|
||||
<li>Watching a related video breaks the ability if the slider to continue playing and pause the slideshow while playing these videos. This is because the iframe does not update the video URL and there is no way, that I know of, of determining which iframe is reporting a status change.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>(FF) Firefox 3+ - No problems noted.</li>
|
||||
<li>(C) Chrome - Ignore "Unsafe JavaScript attempt to access frame with URL" error.</li>
|
||||
<li>(S) Safari 4+
|
||||
<ul>
|
||||
<li>HTML5 video shows up as a black box when it should be hidden by overflow (at least in Windows).</li>
|
||||
<li>In Safari for Windows, including an HTML5 along with other videos appears to offset every video down and right (about 100px) for an unknown reason. For now, this issue can be solved by keeping HTML5 videos separate from other videos.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>(O) Opera 9+ - YouTube iframe does not update player status when the script controls it (<a href="https://groups.google.com/forum/#!msg/youtube-api-gdata/eaPsecXHVmc/NXNDQhMZcwsJ">reported</a>). So this breaks this extension's ability to resume a video and pause the slideshow.</li>
|
||||
<li>(IE9) Internet Explorer 9 - See "*" Note above.</li>
|
||||
<li>(IE8) Internet Explorer 8 - no support for HTML5.</li>
|
||||
<li>(IE7) Internet Explorer 7 - no support for HTML5 and no support for iframe communication.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user