├── .gitattributes ├── .gitignore ├── README.md ├── anythingslider.jquery.json ├── component.json ├── css ├── LESS │ ├── anythingslider.less │ ├── theme-construction.less │ ├── theme-cs-portfolio.less │ ├── theme-metallic.less │ ├── theme-minimalist-round.less │ └── theme-minimalist-square.less ├── animate.css ├── anythingslider.css ├── theme-construction.css ├── theme-cs-portfolio.css ├── theme-metallic.css ├── theme-minimalist-round.css └── theme-minimalist-square.css ├── css3.html ├── demos.html ├── demos ├── colorbox │ ├── border.png │ ├── colorbox.css │ ├── controls.png │ ├── ie6 │ │ ├── borderBottomCenter.png │ │ ├── borderBottomLeft.png │ │ ├── borderBottomRight.png │ │ ├── borderMiddleLeft.png │ │ ├── borderMiddleRight.png │ │ ├── borderTopCenter.png │ │ ├── borderTopLeft.png │ │ └── borderTopRight.png │ ├── jquery.colorbox-min.js │ ├── jquery.colorbox.js │ ├── loading.gif │ ├── loading_background.png │ └── overlay.png ├── css │ └── page.css ├── images │ ├── 251356.jpg │ ├── apple-touch-icon.png │ ├── favicon.ico │ ├── slide-civil-1.jpg │ ├── slide-civil-2.jpg │ ├── slide-env-1.jpg │ ├── slide-env-2.jpg │ ├── slide-tele-1.jpg │ ├── slide-tele-2.jpg │ ├── th-slide-civil-1.jpg │ ├── th-slide-civil-2.jpg │ ├── th-slide-env-1.jpg │ └── th-slide-env-2.jpg ├── js │ ├── css3demo.js │ ├── demo.js │ └── jquery.jatt.min.js ├── prettify │ ├── prettify.css │ └── prettify.js └── video │ ├── movie.mp4 │ ├── movie.ogg │ └── movie.webm ├── expand.html ├── images ├── arrows-metallic.png ├── arrows-minimalist.png ├── construction.gif ├── cs-portfolio.png └── default.png ├── index.html ├── js ├── jquery.anythingslider.fx.js ├── jquery.anythingslider.fx.min.js ├── jquery.anythingslider.js ├── jquery.anythingslider.min.js ├── jquery.anythingslider.video.js ├── jquery.anythingslider.video.min.js ├── jquery.easing.1.2.js ├── jquery.min.js └── swfobject.js ├── license.txt ├── package.json ├── simple.html └── video.html /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | *.sln merge=union 7 | *.csproj merge=union 8 | *.vbproj merge=union 9 | *.fsproj merge=union 10 | *.dbproj merge=union 11 | 12 | # Standard to msysgit 13 | *.doc diff=astextplain 14 | *.DOC diff=astextplain 15 | *.docx diff=astextplain 16 | *.DOCX diff=astextplain 17 | *.dot diff=astextplain 18 | *.DOT diff=astextplain 19 | *.pdf diff=astextplain 20 | *.PDF diff=astextplain 21 | *.rtf diff=astextplain 22 | *.RTF diff=astextplain 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ################# 2 | ## Eclipse 3 | ################# 4 | 5 | *.pydevproject 6 | .project 7 | .metadata 8 | bin/ 9 | tmp/ 10 | *_test*.* 11 | *.tmp 12 | *.bak 13 | *.swp 14 | *~.nib 15 | local.properties 16 | .classpath 17 | .settings/ 18 | .loadpath 19 | 20 | # External tool builders 21 | .externalToolBuilders/ 22 | 23 | # Locally stored "Eclipse launch configurations" 24 | *.launch 25 | 26 | # CDT-specific 27 | .cproject 28 | 29 | # PDT-specific 30 | .buildpath 31 | 32 | 33 | ################# 34 | ## Visual Studio 35 | ################# 36 | 37 | ## Ignore Visual Studio temporary files, build results, and 38 | ## files generated by popular Visual Studio add-ons. 39 | 40 | # User-specific files 41 | *.suo 42 | *.user 43 | *.sln.docstates 44 | 45 | # Build results 46 | [Dd]ebug/ 47 | [Rr]elease/ 48 | *_i.c 49 | *_p.c 50 | *.ilk 51 | *.meta 52 | *.obj 53 | *.pch 54 | *.pdb 55 | *.pgc 56 | *.pgd 57 | *.rsp 58 | *.sbr 59 | *.tlb 60 | *.tli 61 | *.tlh 62 | *.tmp 63 | *.vspscc 64 | .builds 65 | *.dotCover 66 | 67 | ## TODO: If you have NuGet Package Restore enabled, uncomment this 68 | #packages/ 69 | 70 | # Visual C++ cache files 71 | ipch/ 72 | *.aps 73 | *.ncb 74 | *.opensdf 75 | *.sdf 76 | 77 | # Visual Studio profiler 78 | *.psess 79 | *.vsp 80 | 81 | # ReSharper is a .NET coding add-in 82 | _ReSharper* 83 | 84 | # Installshield output folder 85 | [Ee]xpress 86 | 87 | # DocProject is a documentation generator add-in 88 | DocProject/buildhelp/ 89 | DocProject/Help/*.HxT 90 | DocProject/Help/*.HxC 91 | DocProject/Help/*.hhc 92 | DocProject/Help/*.hhk 93 | DocProject/Help/*.hhp 94 | DocProject/Help/Html2 95 | DocProject/Help/html 96 | 97 | # Click-Once directory 98 | publish 99 | 100 | # Others 101 | [Bb]in 102 | [Oo]bj 103 | sql 104 | TestResults 105 | *.Cache 106 | ClientBin 107 | stylecop.* 108 | ~$* 109 | *.dbmdl 110 | Generated_Code #added for RIA/Silverlight projects 111 | 112 | # Backup & report files from converting an old project file to a newer 113 | # Visual Studio version. Backup files are not needed, because we have git ;-) 114 | _UpgradeReport_Files/ 115 | Backup*/ 116 | UpgradeLog*.XML 117 | 118 | 119 | 120 | ############ 121 | ## Windows 122 | ############ 123 | 124 | # Windows image file caches 125 | Thumbs.db 126 | 127 | # Folder config file 128 | Desktop.ini 129 | 130 | 131 | ############# 132 | ## Python 133 | ############# 134 | 135 | *.py[co] 136 | 137 | # Packages 138 | *.egg 139 | *.egg-info 140 | dist 141 | build 142 | eggs 143 | parts 144 | bin 145 | var 146 | sdist 147 | develop-eggs 148 | .installed.cfg 149 | 150 | # Installer logs 151 | pip-log.txt 152 | 153 | # Unit test / coverage reports 154 | .coverage 155 | .tox 156 | 157 | #Translations 158 | *.mo 159 | 160 | #Mr Developer 161 | .mr.developer.cfg 162 | 163 | # Mac crap 164 | .DS_Store 165 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # AnythingSlider jQuery Plugin 2 | 3 | A very robust jQuery-based slider plugin. Need to link to a specific slide? No problem. Like a choice of themes? Got it. Need callbacks for when specific slider actions happen? Sure. Need custom tab names? You got it. Need more than one slider per page? Easy. 4 | 5 | * Having problems with installing or getting the plugin to work? Ask your question in the [CSS-Tricks forums](http://css-tricks.com/forums/) or on [StackOverflow](http://stackoverflow.com/questions/tagged/anythingslider). 6 | * Find a bug or have an enhancement request? Submit it [here](https://github.com/CSS-Tricks/AnythingSlider/issues) 7 | 8 | ## [Main Demo](http://css-tricks.github.com/AnythingSlider/) 9 | 10 | * [Documentation](https://github.com/CSS-Tricks/AnythingSlider/wiki) ([FAQ](https://github.com/CSS-Tricks/AnythingSlider/wiki/FAQ)). 11 | * [Original CSS-Tricks demo](http://css-tricks.com/examples/AnythingSlider/). 12 | * [Latest demos!](http://css-tricks.github.com/AnythingSlider/). 13 | * [Download](https://github.com/CSS-Tricks/AnythingSlider/zipball/master). 14 | 15 | ## Related Projects 16 | 17 | Download the full repo for a full set of all the cool stuff AnythingSlider can do. 18 | 19 | * More themes - [AnythingSlider-Themes](https://github.com/CSS-Tricks/AnythingSlider-Themes) 20 | * Fx bookmarklet - [AnythingSlider-FX-Builder](https://github.com/CSS-Tricks/AnythingSlider-Fx-Builder) 21 | 22 | CMS plugins/mods 23 | 24 | * Wordpress plugin - [AnythingSlider-for-WordPress](https://github.com/jacobdubail/AnythingSlider-for-WordPress) 25 | * Movable Type plugin - [mt-plugin-anythingslider](https://github.com/meancode/mt-plugin-anythingslider) 26 | * Joomla 2.5 mod - [mod_anythingslider](https://github.com/CSS-Tricks/mod_anythingslider) 27 | 28 | ## Recent Changes 29 | 30 | # Version 1.9.7 (12/1/2017) 31 | 32 | * Core: Prevent JS error when panel doesn't exist. Fixes [issue #659](https://github.com/CSS-Tricks/AnythingSlider/issues/659). 33 | 34 | # Version 1.9.6 (5/25/2016) 35 | 36 | * Video: Use https for YouTube api calls. Fixes [issue #648](https://github.com/CSS-Tricks/AnythingSlider/issues/648). 37 | * Demos: Use https for external files. Fixes [issue #646](https://github.com/CSS-Tricks/AnythingSlider/issues/646). 38 | 39 | # Version 1.9.5 (3/4/2016) 40 | 41 | * Dynamic video extension 42 | * Prevent reinitializing the video more than once. 43 | * Allow dynamically adding & removing videos; call `.anythingSliderVideo()` to update. 44 | * Add dynamic demo to video page. 45 | * All thanks to [christian-seifert](https://github.com/christian-seifert) in [pull #604](https://github.com/CSS-Tricks/AnythingSlider/pull/604)! 46 | * Force vimeo iframe to use `https` to prevent iframe communication issues. Fixes [issue #645](https://github.com/CSS-Tricks/AnythingSlider/issues/645). 47 | -------------------------------------------------------------------------------- /anythingslider.jquery.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "anythingslider", 3 | "title": "AnythingSlider", 4 | "version": "1.9.7", 5 | "description": "Just what the world needs, another jQuery slider. YAWN. I know, check this one out though, it's got lots of cool features.\n\nHere on CSS-Tricks, I've created a number of different sliders. Three, in fact. A \"featured content\" slider, a \"start/stop slider\", and \"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.\n\nThis 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.", 6 | "author": { 7 | "name": "Chris Coyier", 8 | "url": "https://github.com/chriscoyier" 9 | }, 10 | "maintainers": [{ 11 | "name": "Rob Garrison", 12 | "url": "https://github.com/Mottie", 13 | "email": "wowmotty@gmail.com" 14 | },{ 15 | "name": "Dean Sofer", 16 | "url": "https://github.com/ProLoser" 17 | }], 18 | "licenses": [{ 19 | "type": "GPL3", 20 | "url": "https://github.com/CSS-Tricks/AnythingSlider/blob/master/license.txt" 21 | }], 22 | "bugs": "https://github.com/CSS-Tricks/AnythingSlider/issues", 23 | "homepage": "http://css-tricks.com/3412-anythingslider-jquery-plugin/", 24 | "docs": "https://github.com/CSS-Tricks/AnythingSlider/wiki", 25 | "demo": "http://css-tricks.github.io/AnythingSlider/", 26 | "dependencies": { 27 | "jquery": ">=1.4.2" 28 | }, 29 | "keywords": [ 30 | "customizable", 31 | "effects", 32 | "slider", 33 | "video" 34 | ], 35 | "files": [ 36 | "css/anythingslider.css", 37 | "js/jquery.anythingslider.js", 38 | "js/jquery.anythingslider.min.js", 39 | "js/jquery.anythingslider.fx.js", 40 | "js/jquery.anythingslider.video.js" 41 | ], 42 | "jam": { 43 | "main": "js/jquery.anythingslider.js", 44 | "dependencies": { 45 | "jquery": ">=1.4.2" 46 | }, 47 | "shim": { 48 | "deps": ["jquery"] 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /component.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "anythingslider", 3 | "title": "AnythingSlider", 4 | "version": "1.9.7", 5 | "description": "Just what the world needs, another jQuery slider. YAWN. I know, check this one out though, it's got lots of cool features.\n\nHere on CSS-Tricks, I've created a number of different sliders. Three, in fact. A \"featured content\" slider, a \"start/stop slider\", and \"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.\n\nThis 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.", 6 | "author": { 7 | "name": "Chris Coyier", 8 | "url": "https://github.com/chriscoyier" 9 | }, 10 | "maintainers": [{ 11 | "name": "Rob Garrison", 12 | "url": "https://github.com/Mottie", 13 | "email": "wowmotty@gmail.com" 14 | },{ 15 | "name": "Dean Sofer", 16 | "url": "https://github.com/ProLoser" 17 | }], 18 | "licenses": [{ 19 | "type": "GPL3", 20 | "url": "https://github.com/CSS-Tricks/AnythingSlider/blob/master/license.txt" 21 | }], 22 | "bugs": "https://github.com/CSS-Tricks/AnythingSlider/issues", 23 | "homepage": "http://css-tricks.com/3412-anythingslider-jquery-plugin/", 24 | "docs": "https://github.com/CSS-Tricks/AnythingSlider/wiki", 25 | "demo": "http://css-tricks.github.io/AnythingSlider/", 26 | "dependencies": { 27 | "jquery": ">=1.4.2" 28 | }, 29 | "keywords": [ 30 | "customizable", 31 | "effects", 32 | "slider", 33 | "video" 34 | ], 35 | "files": [ 36 | "css/anythingslider.css", 37 | "js/jquery.anythingslider.js", 38 | "js/jquery.anythingslider.min.js", 39 | "js/jquery.anythingslider.fx.js", 40 | "js/jquery.anythingslider.video.js" 41 | ], 42 | "jam": { 43 | "main": "js/jquery.anythingslider.js", 44 | "dependencies": { 45 | "jquery": ">=1.4.2" 46 | }, 47 | "shim": { 48 | "deps": ["jquery"] 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /css/LESS/anythingslider.less: -------------------------------------------------------------------------------- 1 | /* 2 | AnythingSlider v1.8+ LESS Default theme 3 | By Rob Garrison, based on default anythingslider.css 4 | */ 5 | 6 | /***************************** 7 | SET DEFAULT DIMENSIONS HERE 8 | *****************************/ 9 | /* change the ID & dimensions to match your slider */ 10 | #slider { 11 | width: 700px; 12 | height: 390px; 13 | list-style: none; 14 | /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */ 15 | overflow-y: auto; 16 | overflow-x: hidden; 17 | } 18 | 19 | /* slider borders */ 20 | @slider-border-size : 3px; 21 | @inactive-border-color : #777; 22 | @active-border-color : #7C9127; 23 | 24 | /* current navigation tab styling - uses same navigation background image */ 25 | @inactive-background-current : #888; 26 | @active-background-current : #7C9127; 27 | @navigation-text-color-current : #000; 28 | 29 | /* non-current navigation styling */ 30 | @inactive-background-tab : #777; 31 | @active-background-tab : #7C9127; 32 | @navigation-text-color : #000; 33 | .navigation-text-styling { 34 | font: 11px/18px Georgia, Serif; 35 | height: 18px; 36 | padding: 2px 8px; 37 | margin: 0 5px 0 0; 38 | } 39 | .navigation-border (@radius: 0 0 5px 5px) { 40 | border-radius: @radius; 41 | -moz-border-radius: @radius; 42 | -webkit-border-radius: @radius; 43 | } 44 | .navigation-background { 45 | /* top shadow */ 46 | background: url(../images/default.png) center -288px repeat-x; 47 | } 48 | .navigation-background-hovered { 49 | background-image: none; 50 | } 51 | 52 | /* start-stop button background color */ 53 | @inactive-start-stop-stopped : #040; 54 | @inactive-start-stop-playing : #800; 55 | @active-start-stop-stopped : #080; 56 | @active-start-stop-playing : #d00; 57 | 58 | /* start-stop button text */ 59 | @inactive-start-stop-text : #ddd; 60 | @active-start-stop-text : #fff; 61 | @active-start-stop-text-hover : #fff; 62 | 63 | /* navigation arrows */ 64 | @arrow-width : 45px; 65 | @arrow-height : 140px; 66 | @arrow-image : url(../images/default.png); 67 | @arrow-back-position : left top; 68 | @arrow-back-position-hovered : left -140px; 69 | @arrow-forward-position : right top; 70 | @arrow-forward-position-hovered: right -140px; 71 | @arrow-horizontal-pad : 45px; /* distance the arrow protrudes horizontally outside of the AnythingSlider wrapper */ 72 | @navigation-bottom-pad : 28px; /* distance the navigation controls (tabs & start-stop button) protrudes below the wrapper */ 73 | 74 | .anythingSlider-default { 75 | /* 76 | ================================= 77 | Default state (no keyboard focus) 78 | ================================= 79 | */ 80 | /* Overall Wrapper */ 81 | margin: 0 auto; 82 | padding: 0 @arrow-horizontal-pad @navigation-bottom-pad @arrow-horizontal-pad; 83 | 84 | /* slider window - top & bottom borders, default state */ 85 | .anythingWindow { 86 | border-top: @slider-border-size solid @inactive-border-color; 87 | border-bottom: @slider-border-size solid @inactive-border-color; 88 | } 89 | 90 | /* Navigation buttons + start/stop button, default state */ 91 | .anythingControls a { 92 | .navigation-background; /* top shadow */ 93 | background-color: @inactive-background-tab; 94 | color: @navigation-text-color; 95 | .navigation-border; 96 | 97 | /* Make sure navigation text is visible */ 98 | span { 99 | visibility: visible; 100 | } 101 | 102 | /* Navigation current button, default state */ 103 | &.cur { 104 | background: @inactive-background-current; 105 | color: @navigation-text-color-current; 106 | } 107 | 108 | /* start-stop button, stopped, default state */ 109 | &.start-stop { 110 | background-color: @inactive-start-stop-stopped; 111 | color: @inactive-start-stop-text; 112 | 113 | /* start-stop button, playing, default state */ 114 | &.playing { background-color: @inactive-start-stop-playing; } 115 | 116 | /* start-stop button, default hovered text color (when visible) */ 117 | /* hide nav/start-stop background image shadow on hover - makes the button appear to come forward */ 118 | &:hover, &.hover, .anythingControls ul a:hover { 119 | color: @active-start-stop-text-hover; 120 | .navigation-background-hovered; 121 | } 122 | } 123 | 124 | } 125 | 126 | /* 127 | ================================= 128 | Active State (has keyboard focus) 129 | ================================= 130 | */ 131 | &.activeSlider { 132 | 133 | /* slider window - top & bottom borders, active state */ 134 | .anythingWindow { 135 | border-color: @active-border-color; 136 | } 137 | 138 | /* Navigation buttons, active state */ 139 | .anythingControls a { 140 | /* background image = top shadow */ 141 | background-color: @active-background-tab; 142 | 143 | /* Navigation current & hovered button, active state */ 144 | &.cur, &:hover { 145 | /* background image removed */ 146 | background: @active-background-current; 147 | } 148 | 149 | /* start-stop button, stopped, active state */ 150 | &.start-stop { 151 | background-color: @active-start-stop-stopped; 152 | color: @active-start-stop-text; 153 | 154 | /* start-stop button, playing, active state */ 155 | &.playing { 156 | color: @active-start-stop-text; 157 | background-color: @active-start-stop-playing; 158 | } 159 | 160 | } 161 | 162 | } 163 | 164 | /* start-stop button, active slider hovered text color (when visible) */ 165 | .start-stop:hover, .start-stop.hover { 166 | color: @active-start-stop-text-hover; 167 | } 168 | 169 | } 170 | 171 | /************************ 172 | NAVIGATION POSITIONING 173 | ************************/ 174 | /* Navigation Arrows */ 175 | .arrow { 176 | top: 50%; 177 | position: absolute; 178 | display: block; 179 | 180 | a { 181 | display: block; 182 | width: @arrow-width; 183 | height: @arrow-height; 184 | margin: -@arrow-height/2 0 0 0; /* half height of image */ 185 | text-align: center; 186 | outline: 0; 187 | background: @arrow-image no-repeat; 188 | } 189 | 190 | } 191 | 192 | /* back arrow */ 193 | .back { 194 | left: 0; 195 | 196 | a { background-position: @arrow-back-position; } 197 | a:hover, a.hover { background-position: @arrow-back-position-hovered; } 198 | 199 | } 200 | 201 | /* forward arrow */ 202 | .forward { 203 | right: 0; 204 | 205 | a { background-position: @arrow-forward-position; } 206 | a:hover, a.hover { background-position: @arrow-forward-position-hovered; } 207 | 208 | } 209 | 210 | /* Navigation Links */ 211 | .anythingControls { 212 | 213 | outline: 0; 214 | display: none; 215 | 216 | ul { 217 | margin: 0; 218 | padding: 0; 219 | float: left; 220 | 221 | li { 222 | margin: 0; 223 | display: inline; 224 | } 225 | 226 | a { 227 | .navigation-text-styling; 228 | display: inline-block; 229 | text-decoration: none; 230 | text-align: center; 231 | outline: 0; 232 | } 233 | 234 | } 235 | 236 | /* navigationSize window */ 237 | .anythingNavWindow { 238 | overflow: hidden; 239 | float: left; 240 | } 241 | 242 | /* Autoplay Start/Stop button */ 243 | .start-stop { 244 | padding: 2px 5px; 245 | width: 40px; 246 | text-align: center; 247 | text-decoration: none; 248 | float: right; 249 | z-index: 100; 250 | outline: 0; 251 | } 252 | 253 | } 254 | 255 | } 256 | 257 | /*********************** 258 | IE8 AND OLDER STYLING 259 | ***********************/ 260 | .as-oldie .anythingSlider-default { 261 | 262 | /* Navigation Arrows */ 263 | .arrow { 264 | top: 35%; 265 | 266 | a { 267 | margin: 0; 268 | } 269 | 270 | } 271 | 272 | /* margin between nav buttons just looks better */ 273 | .anythingControls { 274 | li { 275 | margin-left: 3px; 276 | } 277 | 278 | /* When using the navigationSize option, the side margins need to be zero 279 | None of the navigation panels look good in IE7 now =( */ 280 | a { 281 | margin: 0; 282 | } 283 | 284 | } 285 | 286 | /* navigationSize window */ 287 | .anythingNavWindow { 288 | margin: 0 2px; 289 | } 290 | 291 | .anythingNavWindow li { 292 | padding: 3px 0 0 0; 293 | } 294 | 295 | } 296 | 297 | /*********************** 298 | COMMON SLIDER STYLING 299 | ***********************/ 300 | /* Overall Wrapper */ 301 | .anythingSlider { 302 | 303 | display: block; 304 | overflow: visible !important; 305 | position: relative; 306 | 307 | /* anythingSlider viewport window */ 308 | .anythingWindow { 309 | overflow: hidden; 310 | position: relative; 311 | width: 100%; 312 | height: 100%; 313 | } 314 | 315 | /* anythingSlider base (original element) */ 316 | .anythingBase { 317 | background: transparent; 318 | list-style: none; 319 | position: absolute; 320 | overflow: visible !important; 321 | top: 0; 322 | left: 0; 323 | margin: 0; 324 | padding: 0; 325 | } 326 | 327 | /* Navigation arrow text; indent moved to span inside "a", for IE7; 328 | apparently, a negative text-indent on an "a" link moves the link as well as the text */ 329 | .arrow span { 330 | display: block; 331 | visibility: hidden; 332 | } 333 | 334 | /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ 335 | .arrow.disabled { 336 | display: none; 337 | } 338 | 339 | /* all panels inside the slider; horizontal mode */ 340 | .panel { 341 | background: transparent; 342 | display: block; 343 | overflow: hidden; 344 | float: left; 345 | padding: 0; 346 | margin: 0; 347 | } 348 | 349 | /* vertical mode */ 350 | .vertical .panel { 351 | float: none; 352 | } 353 | 354 | /* fade mode */ 355 | .fade { 356 | .panel { 357 | float: none; 358 | position: absolute; 359 | top: 0; 360 | left: 0; 361 | z-index: 0; 362 | } 363 | 364 | .activePage { 365 | z-index: 1; 366 | } 367 | } 368 | 369 | /*********************** 370 | RTL STYLING 371 | ***********************/ 372 | /* slider autoplay right-to-left, reverse order of nav links to look better */ 373 | &.rtl { 374 | 375 | .anythingWindow { 376 | direction: ltr; 377 | unicode-bidi: bidi-override; 378 | } 379 | 380 | /* move nav link group to left */ 381 | .anythingControls ul { 382 | float: left; 383 | 384 | /* reverse order of nav links */ 385 | a { float: right; } 386 | } 387 | 388 | /* move start/stop button - in case you want to switch sides */ 389 | .start-stop { 390 | /* float: right; */ 391 | } 392 | 393 | } 394 | 395 | /* probably not necessary, but added just in case */ 396 | .anythingWindow, 397 | .anythingControls ul a, 398 | .arrow a, 399 | .start-stop { 400 | transition-duration: 0; 401 | -o-transition-duration: 0; 402 | -moz-transition-duration: 0; 403 | -webkit-transition-duration: 0; 404 | } 405 | 406 | } 407 | -------------------------------------------------------------------------------- /css/LESS/theme-construction.less: -------------------------------------------------------------------------------- 1 | /* 2 | AnythingSlider v1.8+ LESS Construction theme 3 | By Rob Garrison 4 | */ 5 | 6 | /***************************** 7 | SET DEFAULT DIMENSIONS HERE 8 | *****************************/ 9 | /* change the ID & dimensions to match your slider */ 10 | #slider { 11 | width: 700px; 12 | height: 390px; 13 | list-style: none; 14 | /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */ 15 | overflow-y: auto; 16 | overflow-x: hidden; 17 | } 18 | 19 | /* slider borders */ 20 | @slider-border-size : 3px; 21 | @inactive-border-color : #333; 22 | @active-border-color : #d0aa0d; 23 | 24 | /* current navigation tab styling - uses same navigation background image */ 25 | @inactive-background-current : -52px -18px; 26 | @active-background-current : #fff; 27 | @navigation-text-color-current : #000; 28 | 29 | /* non-current navigation styling */ 30 | @inactive-background-tab : transparent url(../images/construction.gif) -52px top no-repeat; 31 | @navigation-text-color : #fff; 32 | @navigation-tab-size : 15px; 33 | .navigation-tab-styling { 34 | width: @navigation-tab-size; 35 | height: @navigation-tab-size; 36 | margin: 3px; 37 | padding: 0; 38 | } 39 | .navigation-border (@radius: 5px) { 40 | border-radius: @radius; 41 | -moz-border-radius: @radius; 42 | -webkit-border-radius: @radius; 43 | } 44 | 45 | /* start-stop button background color */ 46 | @inactive-start-stop-stopped : -52px -35px; 47 | @inactive-start-stop-playing : -52px -52px; 48 | @active-start-stop-hover : -52px -18px; 49 | 50 | /* navigation arrows */ 51 | @arrow-width : 45px; 52 | @arrow-height : 200px; /* image height = 300px; set anywhere from 1-300 */ 53 | @arrow-image : url(../images/construction.gif); 54 | @arrow-back-position : left center; 55 | @arrow-back-position-hovered : -5px center; 56 | @arrow-forward-position : right center; 57 | @arrow-forward-position-hovered: -67px center; 58 | @arrow-horizontal-pad : 45px; /* distance the arrow protrudes horizontally outside of the AnythingSlider wrapper */ 59 | @navigation-bottom-pad : 0; /* distance the navigation controls (tabs & start-stop button) protrudes below the wrapper */ 60 | 61 | .anythingSlider-construction { 62 | /* 63 | ================================= 64 | Default state (no keyboard focus) 65 | ================================= 66 | */ 67 | /* Overall Wrapper */ 68 | margin: 0 auto; 69 | padding: 0 @arrow-horizontal-pad @navigation-bottom-pad @arrow-horizontal-pad; 70 | 71 | /* slider window - top & bottom borders, default state */ 72 | .anythingWindow { 73 | border-top: @slider-border-size solid @inactive-border-color; 74 | border-bottom: @slider-border-size solid @inactive-border-color; 75 | } 76 | 77 | /* Navigation buttons + start/stop button, default state */ 78 | .anythingControls { 79 | 80 | a { 81 | background: @inactive-background-tab; 82 | color: @navigation-text-color; 83 | 84 | /* Navigation current button, default state */ 85 | &.cur, &:hover { 86 | background-position: @inactive-background-current; 87 | color: @navigation-text-color-current; 88 | } 89 | 90 | /* start-stop button, stopped, default state */ 91 | &.start-stop { 92 | background-position: @inactive-start-stop-stopped; 93 | 94 | /* start-stop button, playing, default state */ 95 | &.playing { background-position: @inactive-start-stop-playing; } 96 | /* start-stop button, default hovered text color (when visible) */ 97 | /* hide nav/start-stop background image shadow on hover - makes the button appear to come forward */ 98 | &:hover, &.hover, .anythingControls ul a:hover { 99 | background-position: @active-start-stop-hover; 100 | } 101 | } 102 | 103 | } 104 | } 105 | 106 | /* 107 | ================================= 108 | Active State (has keyboard focus) 109 | ================================= 110 | */ 111 | &.activeSlider { 112 | 113 | /* slider window - top & bottom borders, active state */ 114 | .anythingWindow { 115 | border-color: @active-border-color; 116 | } 117 | 118 | } 119 | 120 | /************************ 121 | NAVIGATION POSITIONING 122 | ************************/ 123 | /* Navigation Arrows */ 124 | .arrow { 125 | top: 50%; 126 | position: absolute; 127 | display: block; 128 | 129 | a { 130 | display: block; 131 | width: @arrow-width; 132 | height: @arrow-height; 133 | margin: -@arrow-height/2 0 0 0; /* half height of image */ 134 | text-align: center; 135 | outline: 0; 136 | background: @arrow-image no-repeat; 137 | } 138 | 139 | } 140 | 141 | /* back arrow */ 142 | .back { 143 | left: 0; 144 | 145 | a { 146 | background-position: @arrow-back-position; 147 | .navigation-border(5px 0 0 5px); 148 | 149 | &:hover, &.hover { background-position: @arrow-back-position-hovered; } 150 | } 151 | } 152 | 153 | /* forward arrow */ 154 | .forward { 155 | right: 0; 156 | 157 | a { 158 | background-position: @arrow-forward-position; 159 | .navigation-border(0 5px 5px 0); 160 | 161 | &:hover, &.hover { background-position: @arrow-forward-position-hovered; } 162 | } 163 | } 164 | 165 | /* Navigation Links */ 166 | .anythingControls { 167 | height: @navigation-tab-size*1.5; /* limit height, needed for IE9 of all things */ 168 | outline: 0; 169 | display: none; 170 | float: right; 171 | position: absolute; 172 | bottom: 5px; 173 | right: 20px; 174 | margin: 0 @arrow-width; /* needed for IE */ 175 | z-index: 100; 176 | opacity: 0.90; 177 | filter: alpha(opacity=90); 178 | 179 | ul { 180 | margin: 0; 181 | padding: 0; 182 | float: left; 183 | 184 | li { 185 | list-style: none; 186 | float: left; 187 | margin: 0; 188 | padding: 0; 189 | } 190 | 191 | a { 192 | display: inline-block; 193 | .navigation-tab-styling; 194 | text-decoration: none; 195 | text-align: center; 196 | outline: 0; 197 | } 198 | 199 | } 200 | 201 | span { 202 | display: block; 203 | visibility: hidden; /* needed for IE8, instead of text-indent: -9999px */ 204 | } 205 | 206 | /* navigationSize window */ 207 | .anythingNavWindow { 208 | overflow: hidden; 209 | float: left; 210 | } 211 | 212 | /* navigationSize arrows */ 213 | li.next a, li.prev a { 214 | width: 14px; 215 | height: 14px; 216 | margin: 4px; 217 | } 218 | 219 | li.next a { 220 | background-position: -92px -143px; 221 | 222 | &:hover { 223 | background-position: -90px -143px; 224 | } 225 | } 226 | 227 | li.prev a { 228 | background-position: -11px -143px; 229 | 230 | &:hover { 231 | background-position: -13px -143px; 232 | } 233 | } 234 | 235 | /* Autoplay Start/Stop button */ 236 | .start-stop { 237 | display: inline-block; 238 | .navigation-tab-styling; 239 | text-decoration: none; 240 | float: right; 241 | z-index: 100; 242 | outline: 0; 243 | } 244 | 245 | } 246 | 247 | } 248 | 249 | /*********************** 250 | IE8 AND OLDER STYLING 251 | ***********************/ 252 | .as-oldie .anythingSlider-construction { 253 | 254 | /* Navigation Arrows */ 255 | .arrow { 256 | top: 14%; 257 | 258 | a { 259 | margin: 0; 260 | } 261 | 262 | } 263 | 264 | } 265 | 266 | /*********************** 267 | COMMON SLIDER STYLING 268 | ***********************/ 269 | /* Overall Wrapper */ 270 | .anythingSlider { 271 | display: block; 272 | overflow: visible !important; 273 | position: relative; 274 | 275 | /* anythingSlider viewport window */ 276 | .anythingWindow { 277 | overflow: hidden; 278 | position: relative; 279 | width: 100%; 280 | height: 100%; 281 | } 282 | 283 | /* anythingSlider base (original element) */ 284 | .anythingBase { 285 | background: transparent; 286 | list-style: none; 287 | position: absolute; 288 | overflow: visible !important; 289 | top: 0; 290 | left: 0; 291 | margin: 0; 292 | padding: 0; 293 | } 294 | 295 | /* Navigation arrow text; indent moved to span inside "a", for IE7; 296 | apparently, a negative text-indent on an "a" link moves the link as well as the text */ 297 | .arrow span { 298 | display: block; 299 | visibility: hidden; 300 | } 301 | 302 | /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ 303 | .arrow.disabled { 304 | display: none; 305 | } 306 | 307 | /* all panels inside the slider; horizontal mode */ 308 | .panel { 309 | background: transparent; 310 | display: block; 311 | overflow: hidden; 312 | float: left; 313 | padding: 0; 314 | margin: 0; 315 | } 316 | 317 | /* vertical mode */ 318 | .vertical .panel { 319 | float: none; 320 | } 321 | 322 | /* fade mode */ 323 | .fade { 324 | .panel { 325 | float: none; 326 | position: absolute; 327 | top: 0; 328 | left: 0; 329 | z-index: 0; 330 | } 331 | 332 | .activePage { 333 | z-index: 1; 334 | } 335 | } 336 | 337 | /*********************** 338 | RTL STYLING 339 | ***********************/ 340 | /* slider autoplay right-to-left, reverse order of nav links to look better */ 341 | &.rtl { 342 | 343 | .anythingWindow { 344 | direction: ltr; 345 | unicode-bidi: bidi-override; 346 | } 347 | 348 | /* move nav link group to left */ 349 | .anythingControls ul { 350 | float: left; 351 | 352 | /* reverse order of nav links */ 353 | a { float: right; } 354 | } 355 | 356 | /* move start/stop button - in case you want to switch sides */ 357 | .start-stop { 358 | /* float: right; */ 359 | } 360 | 361 | } 362 | 363 | /* probably not necessary, but added just in case */ 364 | .anythingWindow, 365 | .anythingControls ul a, 366 | .arrow a, 367 | .start-stop { 368 | transition-duration: 0; 369 | -o-transition-duration: 0; 370 | -moz-transition-duration: 0; 371 | -webkit-transition-duration: 0; 372 | } 373 | 374 | } 375 | -------------------------------------------------------------------------------- /css/LESS/theme-cs-portfolio.less: -------------------------------------------------------------------------------- 1 | /* 2 | AnythingSlider v1.8+ LESS cs-portfolio theme 3 | By Curtis Scott (http://www.curtisscott.com/portfolio.html) 4 | */ 5 | 6 | /*** Note: the nav-cs-portfolio.png used for navigation and slideshow buttons uses a semi-transparent png, 7 | through which the background color is seen... so colors set will turn out darker than normal ***/ 8 | 9 | /***************************** 10 | SET DEFAULT DIMENSIONS HERE 11 | *****************************/ 12 | /* change the ID & dimensions to match your slider */ 13 | #slider { 14 | width: 700px; 15 | height: 390px; 16 | list-style: none; 17 | /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */ 18 | overflow-y: auto; 19 | overflow-x: hidden; 20 | } 21 | 22 | /* slider borders */ 23 | @slider-border : 0; 24 | 25 | /* current navigation tab styling - uses same navigation background image */ 26 | @inactive-background-current : #0d5c9f; 27 | @navigation-text-color-current : #000; 28 | 29 | /* non-current navigation styling */ 30 | @inactive-background-tab : #fff; 31 | 32 | @navigation-text-color : #000; 33 | @navigation-height : 49px; 34 | @navigation-padding-left : 75px; /* distance from left edge (must be > than @back-arrow-left + @arrow-width */ 35 | .navigation-text-styling { 36 | font: 11px/18px Georgia, Serif; 37 | width: 17px; 38 | height: 17px; 39 | margin: 0 5px 0 0; 40 | padding: 0; 41 | } 42 | .navigation-background { 43 | /* top shadow */ 44 | background: @inactive-background-tab url(../images/cs-portfolio.png) right -20px no-repeat; 45 | } 46 | 47 | /* start-stop button background color */ 48 | @inactive-start-stop-stopped : #080; 49 | @inactive-start-stop-playing : #800; 50 | @active-start-stop-stopped : #0f0; 51 | @active-start-stop-playing : #f00; 52 | 53 | /* start-stop button text - HIDDEN */ 54 | @inactive-start-stop-text : #ddd; 55 | @active-start-stop-text : #fff; 56 | @active-start-stop-text-hover : #fff; 57 | 58 | .start-stop-position { 59 | right: 60px; 60 | top: 15px; 61 | margin: 0; 62 | padding: 0; 63 | } 64 | 65 | /* navigation arrows */ 66 | @arrow-width : 26px; 67 | @arrow-height : 27px; 68 | @forward-arrow-right : 20px; /* distance from right edge */ 69 | @back-arrow-left : 20px; /* distance from left edge */ 70 | @arrow-image : url(../images/cs-portfolio.png); 71 | @arrow-back-position : left top; 72 | @arrow-back-position-hovered : left -27px; 73 | @arrow-forward-position : -24px top; 74 | @arrow-forward-position-hovered: -24px -27px; 75 | 76 | .anythingSlider-cs-portfolio { 77 | /* 78 | ================================= 79 | Default state (no keyboard focus) 80 | ================================= 81 | */ 82 | /* Overall Wrapper */ 83 | margin: 0 auto; 84 | padding: 0; 85 | 86 | /* slider window - top & bottom borders, default state */ 87 | .anythingWindow { 88 | border: @slider-border; 89 | } 90 | 91 | /* Navigation buttons + start/stop button, default state */ 92 | .anythingControls a { 93 | .navigation-background; 94 | color: @navigation-text-color; 95 | 96 | /* Navigation current button, default state */ 97 | &.cur, &:hover { 98 | background-color: @inactive-background-current; 99 | color: @navigation-text-color-current; 100 | } 101 | 102 | /* start-stop button, stopped, default state */ 103 | &.start-stop { 104 | background-color: @inactive-start-stop-stopped; 105 | background-position: right top; 106 | color: @inactive-start-stop-text; 107 | 108 | /* start-stop button, default hovered text color (when visible) */ 109 | /* hide nav/start-stop background image shadow on hover - makes the button appear to come forward */ 110 | &:hover, &.hover { 111 | background-color: @active-start-stop-stopped; 112 | color: @active-start-stop-text-hover; 113 | } 114 | 115 | /* start-stop button, playing, default state */ 116 | &.playing { 117 | background-color: @inactive-start-stop-playing; 118 | 119 | &:hover { 120 | background-color: @active-start-stop-playing; 121 | } 122 | } 123 | 124 | 125 | } 126 | 127 | } 128 | 129 | /************************ 130 | NAVIGATION POSITIONING 131 | ************************/ 132 | /* Navigation Arrows */ 133 | .arrow { 134 | display: block; 135 | position: absolute; 136 | bottom: -@navigation-height/2 - @arrow-height/2; /* this is -18px for IE7 */ 137 | z-index: 100; 138 | 139 | a { 140 | display: block; 141 | width: @arrow-width; 142 | height: @arrow-height; 143 | text-align: center; 144 | outline: 0; 145 | background: @arrow-image no-repeat; 146 | } 147 | 148 | } 149 | 150 | /* back arrow */ 151 | .back { 152 | left: @back-arrow-left; 153 | 154 | a { background-position: @arrow-back-position; } 155 | a:hover, a.hover { background-position: @arrow-back-position-hovered; } 156 | 157 | } 158 | 159 | /* forward arrow */ 160 | .forward { 161 | right: @forward-arrow-right; 162 | 163 | a { background-position: @arrow-forward-position; } 164 | a:hover, a.hover { background-position: @arrow-forward-position-hovered; } 165 | 166 | } 167 | 168 | /* Navigation Links */ 169 | .anythingControls { 170 | 171 | position: relative; 172 | background: @arrow-image repeat-x bottom center; 173 | height: @navigation-height; 174 | margin: 0 auto; 175 | padding-left: @navigation-padding-left; 176 | text-align: center; 177 | 178 | ul { 179 | margin: 0; 180 | padding: 0; 181 | z-index: 100; 182 | 183 | &.thumbNav { 184 | padding-top: 18px; 185 | } 186 | 187 | li { 188 | margin: 0; 189 | padding: 0; 190 | display: inline; 191 | } 192 | 193 | a { 194 | .navigation-text-styling; 195 | float: left; 196 | text-decoration: none; 197 | text-align: center; 198 | outline: 0; 199 | border: 0; 200 | } 201 | 202 | } 203 | 204 | /* navigationSize window */ 205 | .anythingNavWindow { 206 | margin: 0 5px 0 0; 207 | overflow: hidden; 208 | float: left; 209 | } 210 | 211 | /* Navigation size window arrows */ 212 | li.next a, li.prev a { 213 | margin: 19px 5px 0 0; 214 | width: 16px; 215 | height: 15px; 216 | background: @arrow-image -25px -54px no-repeat; 217 | } 218 | li.prev a { background-position: -9px -54px; } 219 | li.next a:hover { background-position: -56px -54px; } 220 | li.prev a:hover { background-position: -41px -54px; } 221 | 222 | /* Autoplay Start/Stop button */ 223 | .start-stop { 224 | .start-stop-position; 225 | position: absolute; 226 | text-align: center; 227 | width: 20px; 228 | height: 20px; 229 | z-index: 100; 230 | border: 0; 231 | } 232 | 233 | } 234 | 235 | } 236 | 237 | /*********************** 238 | IE8 AND OLDER STYLING 239 | ***********************/ 240 | .as-oldie .anythingSlider-cs-portfolio { 241 | 242 | /* Navigation Arrows */ 243 | .arrow a span, .anythingControls a span { 244 | /* line-height: 1px; needed for IE7 */ 245 | } 246 | 247 | /* IE7 png fix*/ 248 | .arrow a, .anythingControls, .anythingControls a { 249 | background-image: url(../images/cs-portfolio.png); 250 | _background:none; 251 | _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/cs-portfolio.png',sizingMethod='crop'); 252 | } 253 | 254 | } 255 | 256 | /*********************** 257 | COMMON SLIDER STYLING 258 | ***********************/ 259 | /* Overall Wrapper */ 260 | .anythingSlider { 261 | 262 | display: block; 263 | overflow: visible !important; 264 | position: relative; 265 | 266 | /* anythingSlider viewport window */ 267 | .anythingWindow { 268 | overflow: hidden; 269 | position: relative; 270 | width: 100%; 271 | height: 100%; 272 | } 273 | 274 | /* anythingSlider base (original element) */ 275 | .anythingBase { 276 | background: transparent; 277 | list-style: none; 278 | position: absolute; 279 | overflow: visible !important; 280 | top: 0; 281 | left: 0; 282 | margin: 0; 283 | padding: 0; 284 | } 285 | 286 | /* Navigation arrow text; indent moved to span inside "a", for IE7; 287 | apparently, a negative text-indent on an "a" link moves the link as well as the text */ 288 | .arrow span, .anythingControls span { 289 | display: block; 290 | visibility: hidden; 291 | } 292 | 293 | /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ 294 | .arrow.disabled { 295 | display: none; 296 | } 297 | 298 | /* all panels inside the slider; horizontal mode */ 299 | .panel { 300 | background: transparent; 301 | display: block; 302 | overflow: hidden; 303 | float: left; 304 | padding: 0; 305 | margin: 0; 306 | } 307 | 308 | /* vertical mode */ 309 | .vertical .panel { 310 | float: none; 311 | } 312 | 313 | /* fade mode */ 314 | .fade { 315 | .panel { 316 | float: none; 317 | position: absolute; 318 | top: 0; 319 | left: 0; 320 | z-index: 0; 321 | } 322 | 323 | .activePage { 324 | z-index: 1; 325 | } 326 | } 327 | 328 | /*********************** 329 | RTL STYLING 330 | ***********************/ 331 | /* slider autoplay right-to-left, reverse order of nav links to look better */ 332 | &.rtl { 333 | 334 | .anythingWindow { 335 | direction: ltr; 336 | unicode-bidi: bidi-override; 337 | } 338 | 339 | /* move nav link group to left */ 340 | .anythingControls ul { 341 | float: left; 342 | 343 | /* reverse order of nav links */ 344 | a { float: right; } 345 | } 346 | 347 | /* move start/stop button - in case you want to switch sides */ 348 | .start-stop { 349 | /* float: right; */ 350 | } 351 | 352 | } 353 | 354 | /* probably not necessary, but added just in case */ 355 | .anythingWindow, 356 | .anythingControls ul a, 357 | .arrow a, 358 | .start-stop { 359 | transition-duration: 0; 360 | -o-transition-duration: 0; 361 | -moz-transition-duration: 0; 362 | -webkit-transition-duration: 0; 363 | } 364 | 365 | } 366 | -------------------------------------------------------------------------------- /css/LESS/theme-minimalist-round.less: -------------------------------------------------------------------------------- 1 | /* 2 | AnythingSlider v1.8+ LESS Minimalist Round theme 3 | By Rob Garrison 4 | */ 5 | 6 | /***************************** 7 | SET DEFAULT DIMENSIONS HERE 8 | *****************************/ 9 | /* change the ID & dimensions to match your slider */ 10 | #slider { 11 | width: 700px; 12 | height: 390px; 13 | list-style: none; 14 | /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */ 15 | overflow-y: auto; 16 | overflow-x: hidden; 17 | } 18 | 19 | /* slider borders */ 20 | @slider-border-size : 3px; 21 | @inactive-border-color : #333; 22 | @active-border-color : #164054; 23 | 24 | /* current navigation tab styling - uses same navigation background image */ 25 | @inactive-background-current : #777; 26 | @active-background-current : #fff; 27 | @navigation-text-color-current : #000; 28 | 29 | /* non-current navigation styling */ 30 | @inactive-background-tab : #333; 31 | @active-background-tab : #164054; 32 | @navigation-text-color : #fff; 33 | @navigation-tab-size : 10px; 34 | .navigation-tab-styling { 35 | width: @navigation-tab-size; 36 | height: @navigation-tab-size; 37 | margin: 3px; 38 | padding: 0; 39 | } 40 | .navigation-border (@radius: 5px) { 41 | border: #000 1px solid; 42 | border-radius: @radius; 43 | -moz-border-radius: @radius; 44 | -webkit-border-radius: @radius; 45 | } 46 | 47 | /* start-stop button background color */ 48 | @inactive-start-stop-stopped : #040; 49 | @inactive-start-stop-playing : #800; 50 | @active-start-stop-stopped : #080; 51 | @active-start-stop-playing : #f00; 52 | 53 | /* start-stop button text */ 54 | @inactive-start-stop-text : #ddd; 55 | @active-start-stop-text : #fff; 56 | @active-start-stop-text-hover : #fff; 57 | .start-stop-shadow (@shadow: inset 1px 2px 5px rgba(0,0,0,0.5)) { 58 | /* top shadow */ 59 | -moz-box-shadow: @shadow; 60 | -webkit-box-shadow: @shadow; 61 | box-shadow: @shadow; 62 | } 63 | 64 | /* navigation arrows */ 65 | @arrow-width : 30px; 66 | @arrow-height : 40px; 67 | @arrow-image : url(../images/arrows-minimalist.png); 68 | @arrow-back-position : left bottom; 69 | @arrow-back-position-hovered : left top; 70 | @arrow-forward-position : right bottom; 71 | @arrow-forward-position-hovered: right top; 72 | @arrow-horizontal-pad : 30px; /* distance the arrow protrudes horizontally outside of the AnythingSlider wrapper */ 73 | @navigation-bottom-pad : 0; /* distance the navigation controls (tabs & start-stop button) protrudes below the wrapper */ 74 | 75 | .anythingSlider-minimalist-round { 76 | /* 77 | ================================= 78 | Default state (no keyboard focus) 79 | ================================= 80 | */ 81 | /* Overall Wrapper */ 82 | margin: 0 auto; 83 | padding: 0 @arrow-horizontal-pad @navigation-bottom-pad @arrow-horizontal-pad; 84 | 85 | /* slider window - top & bottom borders, default state */ 86 | .anythingWindow { 87 | border-top: @slider-border-size solid @inactive-border-color; 88 | border-bottom: @slider-border-size solid @inactive-border-color; 89 | } 90 | 91 | /* Navigation buttons + start/stop button, default state */ 92 | .anythingControls a { 93 | background-color: @inactive-background-tab; 94 | color: @navigation-text-color; 95 | .navigation-border; 96 | 97 | /* Navigation current button, default state */ 98 | &.cur, &:hover { 99 | background-color: @inactive-background-current; 100 | color: @navigation-text-color-current; 101 | } 102 | 103 | /* start-stop button, stopped, default state */ 104 | &.start-stop { 105 | background: @inactive-start-stop-stopped; 106 | color: @inactive-start-stop-text; 107 | .start-stop-shadow; 108 | 109 | /* start-stop button, playing, default state */ 110 | &.playing { background-color: @inactive-start-stop-playing; } 111 | 112 | /* start-stop button, default hovered text color (when visible) */ 113 | /* hide nav/start-stop background image shadow on hover - makes the button appear to come forward */ 114 | &:hover, &.hover, .anythingControls ul a:hover { 115 | color: @active-start-stop-text-hover; 116 | .start-stop-shadow(inset 0 0 0 #000); 117 | } 118 | } 119 | 120 | } 121 | 122 | /* 123 | ================================= 124 | Active State (has keyboard focus) 125 | ================================= 126 | */ 127 | &.activeSlider { 128 | 129 | /* slider window - top & bottom borders, active state */ 130 | .anythingWindow { 131 | border-color: @active-border-color; 132 | } 133 | 134 | /* Navigation buttons, active state */ 135 | .anythingControls a { 136 | /* background image = top shadow */ 137 | background-color: @active-background-tab; 138 | color: @navigation-text-color; 139 | 140 | /* Navigation current button, active state */ 141 | &.cur, &:hover { 142 | background-color: @active-background-current; 143 | color: @navigation-text-color-current; 144 | } 145 | 146 | /* start-stop button, stopped, active state */ 147 | &.start-stop { 148 | background: @active-start-stop-stopped; 149 | color: @active-start-stop-text; 150 | 151 | /* start-stop button, playing, active state */ 152 | &.playing { 153 | color: @active-start-stop-text; 154 | background: @active-start-stop-playing; 155 | } 156 | 157 | } 158 | 159 | } 160 | 161 | /* start-stop button, active slider hovered text color (when visible) */ 162 | .start-stop:hover, .start-stop.hover { 163 | color: @active-start-stop-text-hover; 164 | } 165 | 166 | } 167 | 168 | /************************ 169 | NAVIGATION POSITIONING 170 | ************************/ 171 | /* Navigation Arrows */ 172 | .arrow { 173 | top: 50%; 174 | position: absolute; 175 | display: block; 176 | 177 | a { 178 | display: block; 179 | width: @arrow-width; 180 | height: @arrow-height; 181 | margin: -@arrow-height/2 0 0 0; /* half height of image */ 182 | text-align: center; 183 | outline: 0; 184 | background: @arrow-image no-repeat; 185 | } 186 | 187 | } 188 | 189 | /* back arrow */ 190 | .back { 191 | left: 0; 192 | 193 | a { 194 | background-position: @arrow-back-position; 195 | &:hover, &.hover { background-position: @arrow-back-position-hovered; } 196 | } 197 | 198 | } 199 | 200 | /* forward arrow */ 201 | .forward { 202 | right: 0; 203 | 204 | a { 205 | background-position: @arrow-forward-position; 206 | &:hover, &.hover { background-position: @arrow-forward-position-hovered; } 207 | } 208 | 209 | } 210 | 211 | /* Navigation Links */ 212 | .anythingControls { 213 | 214 | height: @navigation-tab-size*1.5; /* limit height, needed for IE9 of all things */ 215 | outline: 0; 216 | display: none; 217 | float: right; 218 | position: absolute; 219 | bottom: 5px; 220 | right: 20px; 221 | margin: 0 @arrow-width*1.5; /* needed for IE */ 222 | z-index: 100; 223 | opacity: 0.90; 224 | filter: alpha(opacity=90); 225 | 226 | ul { 227 | margin: 0; 228 | padding: 0; 229 | float: left; 230 | 231 | li { 232 | list-style: none; 233 | float: left; 234 | margin: 0; 235 | padding: 0; 236 | } 237 | 238 | a { 239 | display: inline-block; 240 | .navigation-tab-styling; 241 | text-decoration: none; 242 | text-align: center; 243 | outline: 0; 244 | } 245 | 246 | } 247 | 248 | span { 249 | display: block; 250 | visibility: hidden; /* needed for IE8, instead of text-indent: -9999px */ 251 | } 252 | 253 | /* navigationSize window */ 254 | .anythingNavWindow { 255 | overflow: hidden; 256 | float: left; 257 | } 258 | 259 | /* navigationSize nav arrow positioning */ 260 | li.prev a span, li.next a span { 261 | visibility: visible; 262 | position: relative; 263 | top: -6px; /* bring navigationSize text arrows into view */ 264 | } 265 | 266 | /* Autoplay Start/Stop button */ 267 | .start-stop { 268 | display: inline-block; 269 | .navigation-tab-styling; 270 | text-align: center; 271 | text-decoration: none; 272 | z-index: 100; 273 | outline: 0; 274 | } 275 | 276 | } 277 | 278 | } 279 | 280 | /*********************** 281 | IE8 AND OLDER STYLING 282 | ***********************/ 283 | .as-oldie .anythingSlider-minimalist-round { 284 | 285 | /* Navigation Arrows */ 286 | .arrow { 287 | top: 45%; 288 | 289 | a { 290 | margin: 0; 291 | } 292 | 293 | } 294 | 295 | } 296 | 297 | /*********************** 298 | COMMON SLIDER STYLING 299 | ***********************/ 300 | /* Overall Wrapper */ 301 | .anythingSlider { 302 | 303 | display: block; 304 | overflow: visible !important; 305 | position: relative; 306 | 307 | /* anythingSlider viewport window */ 308 | .anythingWindow { 309 | overflow: hidden; 310 | position: relative; 311 | width: 100%; 312 | height: 100%; 313 | } 314 | 315 | /* anythingSlider base (original element) */ 316 | .anythingBase { 317 | background: transparent; 318 | list-style: none; 319 | position: absolute; 320 | overflow: visible !important; 321 | top: 0; 322 | left: 0; 323 | margin: 0; 324 | padding: 0; 325 | } 326 | 327 | /* Navigation arrow text; indent moved to span inside "a", for IE7; 328 | apparently, a negative text-indent on an "a" link moves the link as well as the text */ 329 | .arrow span { 330 | display: block; 331 | visibility: hidden; 332 | } 333 | 334 | /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ 335 | .arrow.disabled { 336 | display: none; 337 | } 338 | 339 | /* all panels inside the slider; horizontal mode */ 340 | .panel { 341 | background: transparent; 342 | display: block; 343 | overflow: hidden; 344 | float: left; 345 | padding: 0; 346 | margin: 0; 347 | } 348 | 349 | /* vertical mode */ 350 | .vertical .panel { 351 | float: none; 352 | } 353 | 354 | /* fade mode */ 355 | .fade { 356 | .panel { 357 | float: none; 358 | position: absolute; 359 | top: 0; 360 | left: 0; 361 | z-index: 0; 362 | } 363 | 364 | .activePage { 365 | z-index: 1; 366 | } 367 | } 368 | 369 | /*********************** 370 | RTL STYLING 371 | ***********************/ 372 | /* slider autoplay right-to-left, reverse order of nav links to look better */ 373 | &.rtl { 374 | 375 | .anythingWindow { 376 | direction: ltr; 377 | unicode-bidi: bidi-override; 378 | } 379 | 380 | /* move nav link group to left */ 381 | .anythingControls ul { 382 | float: left; 383 | 384 | /* reverse order of nav links */ 385 | a { float: right; } 386 | } 387 | 388 | /* move start/stop button - in case you want to switch sides */ 389 | .start-stop { 390 | /* float: right; */ 391 | } 392 | 393 | } 394 | 395 | /* probably not necessary, but added just in case */ 396 | .anythingWindow, 397 | .anythingControls ul a, 398 | .arrow a, 399 | .start-stop { 400 | transition-duration: 0; 401 | -o-transition-duration: 0; 402 | -moz-transition-duration: 0; 403 | -webkit-transition-duration: 0; 404 | } 405 | 406 | } 407 | -------------------------------------------------------------------------------- /css/LESS/theme-minimalist-square.less: -------------------------------------------------------------------------------- 1 | /* 2 | AnythingSlider v1.8+ LESS Minimalist Square theme 3 | By Rob Garrison 4 | */ 5 | 6 | /***************************** 7 | SET DEFAULT DIMENSIONS HERE 8 | *****************************/ 9 | /* change the ID & dimensions to match your slider */ 10 | #slider { 11 | width: 700px; 12 | height: 390px; 13 | list-style: none; 14 | /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */ 15 | overflow-y: auto; 16 | overflow-x: hidden; 17 | } 18 | 19 | /* slider borders */ 20 | @slider-border-size : 3px; 21 | @inactive-border-color : #333; 22 | @active-border-color : #164054; 23 | 24 | /* current navigation tab styling - uses same navigation background image */ 25 | @inactive-background-current : #777; 26 | @active-background-current : #fff; 27 | @navigation-text-color-current : #000; 28 | 29 | /* non-current navigation styling */ 30 | @inactive-background-tab : #333; 31 | @active-background-tab : #164054; 32 | @navigation-text-color : #fff; 33 | @navigation-tab-size : 10px; 34 | .navigation-tab-styling { 35 | width: @navigation-tab-size; 36 | height: @navigation-tab-size; 37 | margin: 3px; 38 | padding: 0; 39 | } 40 | .navigation-border { 41 | border: #000 1px solid; 42 | } 43 | 44 | /* start-stop button background color */ 45 | @inactive-start-stop-stopped : #040; 46 | @inactive-start-stop-playing : #800; 47 | @active-start-stop-stopped : #080; 48 | @active-start-stop-playing : #f00; 49 | 50 | /* start-stop button text */ 51 | @inactive-start-stop-text : #ddd; 52 | @active-start-stop-text : #fff; 53 | @active-start-stop-text-hover : #fff; 54 | .start-stop-shadow (@shadow: inset 1px 2px 5px rgba(0,0,0,0.5)) { 55 | /* top shadow */ 56 | -moz-box-shadow: @shadow; 57 | -webkit-box-shadow: @shadow; 58 | box-shadow: @shadow; 59 | } 60 | 61 | /* navigation arrows */ 62 | @arrow-width : 30px; 63 | @arrow-height : 40px; 64 | @arrow-image : url(../images/arrows-minimalist.png); 65 | @arrow-back-position : left bottom; 66 | @arrow-back-position-hovered : left top; 67 | @arrow-forward-position : right bottom; 68 | @arrow-forward-position-hovered: right top; 69 | @arrow-horizontal-pad : 30px; /* distance the arrow protrudes horizontally outside of the AnythingSlider wrapper */ 70 | @navigation-bottom-pad : 0; /* distance the navigation controls (tabs & start-stop button) protrudes below the wrapper */ 71 | 72 | .anythingSlider-minimalist-square { 73 | /* 74 | ================================= 75 | Default state (no keyboard focus) 76 | ================================= 77 | */ 78 | /* Overall Wrapper */ 79 | margin: 0 auto; 80 | padding: 0 @arrow-horizontal-pad @navigation-bottom-pad @arrow-horizontal-pad; 81 | 82 | /* slider window - top & bottom borders, default state */ 83 | .anythingWindow { 84 | border-top: @slider-border-size solid @inactive-border-color; 85 | border-bottom: @slider-border-size solid @inactive-border-color; 86 | } 87 | 88 | /* Navigation buttons + start/stop button, default state */ 89 | .anythingControls a { 90 | background-color: @inactive-background-tab; 91 | color: @navigation-text-color; 92 | .navigation-border; 93 | 94 | /* Navigation current button, default state */ 95 | &.cur, &:hover { 96 | background-color: @inactive-background-current; 97 | color: @navigation-text-color-current; 98 | } 99 | 100 | /* start-stop button, stopped, default state */ 101 | &.start-stop { 102 | background: @inactive-start-stop-stopped; 103 | color: @inactive-start-stop-text; 104 | .start-stop-shadow; 105 | 106 | /* start-stop button, playing, default state */ 107 | &.playing { background-color: @inactive-start-stop-playing; } 108 | 109 | /* start-stop button, default hovered text color (when visible) */ 110 | /* hide nav/start-stop background image shadow on hover - makes the button appear to come forward */ 111 | &:hover, &.hover, .anythingControls ul a:hover { 112 | color: @active-start-stop-text-hover; 113 | .start-stop-shadow(inset 0 0 0 #000); 114 | } 115 | } 116 | 117 | } 118 | 119 | /* 120 | ================================= 121 | Active State (has keyboard focus) 122 | ================================= 123 | */ 124 | &.activeSlider { 125 | 126 | /* slider window - top & bottom borders, active state */ 127 | .anythingWindow { 128 | border-color: @active-border-color; 129 | } 130 | 131 | /* Navigation buttons, active state */ 132 | .anythingControls a { 133 | /* background image = top shadow */ 134 | background-color: @active-background-tab; 135 | color: @navigation-text-color; 136 | 137 | /* Navigation current button, active state */ 138 | &.cur, &:hover { 139 | background-color: @active-background-current; 140 | color: @navigation-text-color-current; 141 | } 142 | 143 | /* start-stop button, stopped, active state */ 144 | &.start-stop { 145 | background: @active-start-stop-stopped; 146 | color: @active-start-stop-text; 147 | 148 | /* start-stop button, playing, active state */ 149 | &.playing { 150 | color: @active-start-stop-text; 151 | background: @active-start-stop-playing; 152 | } 153 | 154 | } 155 | 156 | } 157 | 158 | /* start-stop button, active slider hovered text color (when visible) */ 159 | .start-stop:hover, .start-stop.hover { 160 | color: @active-start-stop-text-hover; 161 | } 162 | 163 | } 164 | 165 | /************************ 166 | NAVIGATION POSITIONING 167 | ************************/ 168 | /* Navigation Arrows */ 169 | .arrow { 170 | top: 50%; 171 | position: absolute; 172 | display: block; 173 | 174 | a { 175 | display: block; 176 | width: @arrow-width; 177 | height: @arrow-height; 178 | margin: -@arrow-height/2 0 0 0; /* half height of image */ 179 | text-align: center; 180 | outline: 0; 181 | background: @arrow-image no-repeat; 182 | } 183 | 184 | } 185 | 186 | /* back arrow */ 187 | .back { 188 | left: 0; 189 | 190 | a { 191 | background-position: @arrow-back-position; 192 | &:hover, &.hover { background-position: @arrow-back-position-hovered; } 193 | } 194 | 195 | } 196 | 197 | /* forward arrow */ 198 | .forward { 199 | right: 0; 200 | 201 | a { 202 | background-position: @arrow-forward-position; 203 | &:hover, &.hover { background-position: @arrow-forward-position-hovered; } 204 | } 205 | 206 | } 207 | 208 | /* Navigation Links */ 209 | .anythingControls { 210 | 211 | height: @navigation-tab-size*1.5; /* limit height, needed for IE9 of all things */ 212 | outline: 0; 213 | display: none; 214 | float: right; 215 | position: absolute; 216 | bottom: 5px; 217 | right: 20px; 218 | margin: 0 @arrow-width*1.5; /* needed for IE */ 219 | z-index: 100; 220 | opacity: 0.90; 221 | filter: alpha(opacity=90); 222 | 223 | ul { 224 | margin: 0; 225 | padding: 0; 226 | float: left; 227 | 228 | li { 229 | list-style: none; 230 | float: left; 231 | margin: 0; 232 | padding: 0; 233 | } 234 | 235 | a { 236 | display: inline-block; 237 | .navigation-tab-styling; 238 | text-decoration: none; 239 | text-align: center; 240 | outline: 0; 241 | } 242 | 243 | } 244 | 245 | span { 246 | display: block; 247 | visibility: hidden; /* needed for IE8, instead of text-indent: -9999px */ 248 | } 249 | 250 | /* navigationSize window */ 251 | .anythingNavWindow { 252 | overflow: hidden; 253 | float: left; 254 | } 255 | 256 | /* navigationSize nav arrow positioning */ 257 | li.prev a span, li.next a span { 258 | visibility: visible; 259 | position: relative; 260 | top: -6px; /* bring navigationSize text arrows into view */ 261 | } 262 | 263 | /* Autoplay Start/Stop button */ 264 | .start-stop { 265 | margin: 3px; 266 | padding: 0; 267 | display: inline-block; 268 | .navigation-tab-styling; 269 | text-align: center; 270 | text-decoration: none; 271 | z-index: 100; 272 | outline: 0; 273 | } 274 | 275 | } 276 | 277 | } 278 | 279 | /*********************** 280 | IE8 AND OLDER STYLING 281 | ***********************/ 282 | .as-oldie .anythingSlider-minimalist-square { 283 | 284 | /* Navigation Arrows */ 285 | .arrow { 286 | top: 45%; 287 | 288 | a { 289 | margin: 0; 290 | } 291 | 292 | } 293 | 294 | } 295 | 296 | /*********************** 297 | COMMON SLIDER STYLING 298 | ***********************/ 299 | /* Overall Wrapper */ 300 | .anythingSlider { 301 | 302 | display: block; 303 | overflow: visible !important; 304 | position: relative; 305 | 306 | /* anythingSlider viewport window */ 307 | .anythingWindow { 308 | overflow: hidden; 309 | position: relative; 310 | width: 100%; 311 | height: 100%; 312 | } 313 | 314 | /* anythingSlider base (original element) */ 315 | .anythingBase { 316 | background: transparent; 317 | list-style: none; 318 | position: absolute; 319 | overflow: visible !important; 320 | top: 0; 321 | left: 0; 322 | margin: 0; 323 | padding: 0; 324 | } 325 | 326 | /* Navigation arrow text; indent moved to span inside "a", for IE7; 327 | apparently, a negative text-indent on an "a" link moves the link as well as the text */ 328 | .arrow span { 329 | display: block; 330 | visibility: hidden; 331 | } 332 | 333 | /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ 334 | .arrow.disabled { 335 | display: none; 336 | } 337 | 338 | /* all panels inside the slider; horizontal mode */ 339 | .panel { 340 | background: transparent; 341 | display: block; 342 | overflow: hidden; 343 | float: left; 344 | padding: 0; 345 | margin: 0; 346 | } 347 | 348 | /* vertical mode */ 349 | .vertical .panel { 350 | float: none; 351 | } 352 | 353 | /* fade mode */ 354 | .fade { 355 | .panel { 356 | float: none; 357 | position: absolute; 358 | top: 0; 359 | left: 0; 360 | z-index: 0; 361 | } 362 | 363 | .activePage { 364 | z-index: 1; 365 | } 366 | } 367 | 368 | /*********************** 369 | RTL STYLING 370 | ***********************/ 371 | /* slider autoplay right-to-left, reverse order of nav links to look better */ 372 | &.rtl { 373 | 374 | .anythingWindow { 375 | direction: ltr; 376 | unicode-bidi: bidi-override; 377 | } 378 | 379 | /* move nav link group to left */ 380 | .anythingControls ul { 381 | float: left; 382 | 383 | /* reverse order of nav links */ 384 | a { float: right; } 385 | } 386 | 387 | /* move start/stop button - in case you want to switch sides */ 388 | .start-stop { 389 | /* float: right; */ 390 | } 391 | 392 | } 393 | 394 | /* probably not necessary, but added just in case */ 395 | .anythingWindow, 396 | .anythingControls ul a, 397 | .arrow a, 398 | .start-stop { 399 | transition-duration: 0; 400 | -o-transition-duration: 0; 401 | -moz-transition-duration: 0; 402 | -webkit-transition-duration: 0; 403 | } 404 | 405 | } 406 | -------------------------------------------------------------------------------- /css/anythingslider.css: -------------------------------------------------------------------------------- 1 | /* 2 | AnythingSlider v1.8+ Default theme 3 | By Chris Coyier: http://css-tricks.com 4 | with major improvements by Doug Neiner: http://pixelgraphics.us/ 5 | based on work by Remy Sharp: http://jqueryfordesigners.com/ 6 | */ 7 | 8 | /***************************** 9 | SET DEFAULT DIMENSIONS HERE 10 | *****************************/ 11 | /* change the ID & dimensions to match your slider */ 12 | #slider { 13 | width: 700px; 14 | height: 390px; 15 | list-style: none; 16 | /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */ 17 | overflow-y: auto; 18 | overflow-x: hidden; 19 | } 20 | 21 | /****************** 22 | SET STYLING HERE 23 | ****************** 24 | ================================= 25 | Default state (no keyboard focus) 26 | ==================================*/ 27 | /* Overall Wrapper */ 28 | .anythingSlider-default { 29 | margin: 0 auto; 30 | /* 45px right & left padding for the arrows, 28px @ bottom for navigation */ 31 | padding: 0 45px 28px 45px; 32 | } 33 | /* slider window - top & bottom borders, default state */ 34 | .anythingSlider-default .anythingWindow { 35 | border-top: 3px solid #777; 36 | border-bottom: 3px solid #777; 37 | } 38 | /* Navigation buttons + start/stop button, default state */ 39 | .anythingSlider-default .anythingControls a { 40 | /* top shadow */ 41 | background: #777 url(../images/default.png) center -288px repeat-x; 42 | color: #000; 43 | border-radius: 0 0 5px 5px; 44 | -moz-border-radius: 0 0 5px 5px; 45 | -webkit-border-radius: 0 0 5px 5px; 46 | } 47 | /* Make sure navigation text is visible */ 48 | .anythingSlider-default .anythingControls a span { 49 | visibility: visible; 50 | } 51 | /* Navigation current button, default state */ 52 | .anythingSlider-default .anythingControls a.cur { 53 | background: #888; 54 | color: #000; 55 | } 56 | 57 | /* start-stop button, stopped, default state */ 58 | .anythingSlider-default .anythingControls a.start-stop { 59 | background-color: #040; 60 | color: #ddd; 61 | } 62 | /* start-stop button, playing, default state */ 63 | .anythingSlider-default .anythingControls a.start-stop.playing { 64 | background-color: #800; 65 | } 66 | 67 | /* start-stop button, default hovered text color (when visible) */ 68 | /* hide nav/start-stop background image shadow on hover - makes the button appear to come forward */ 69 | .anythingSlider-default .anythingControls a.start-stop:hover, 70 | .anythingSlider-default .anythingControls a.start-stop.hover, 71 | .anythingSlider-default .anythingControls a.start-stop .anythingControls ul a:hover { 72 | background-image: none; 73 | color: #ddd; 74 | } 75 | 76 | /* 77 | ================================= 78 | Active State (has keyboard focus) 79 | ================================= 80 | */ 81 | /* slider window - top & bottom borders, active state */ 82 | .anythingSlider-default.activeSlider .anythingWindow { 83 | border-color: #7C9127; 84 | } 85 | /* Navigation buttons, active state */ 86 | .anythingSlider-default.activeSlider .anythingControls a { 87 | /* background image = top shadow */ 88 | background-color: #7C9127; 89 | } 90 | /* Navigation current & hovered button, active state */ 91 | .anythingSlider-default.activeSlider .anythingControls a.cur, 92 | .anythingSlider-default.activeSlider .anythingControls a:hover { 93 | /* background image removed */ 94 | background: #7C9127; 95 | } 96 | 97 | /* start-stop button, stopped, active state */ 98 | .anythingSlider-default.activeSlider .anythingControls a.start-stop { 99 | background-color: #080; 100 | color: #fff; 101 | } 102 | /* start-stop button, playing, active state */ 103 | .anythingSlider-default.activeSlider .anythingControls a.start-stop.playing { 104 | background-color: #d00; 105 | color: #fff; 106 | } 107 | /* start-stop button, active slider hovered text color (when visible) */ 108 | .anythingSlider-default.activeSlider .start-stop:hover, 109 | .anythingSlider-default.activeSlider .start-stop.hover { 110 | color: #fff; 111 | } 112 | 113 | /************************ 114 | NAVIGATION POSITIONING 115 | ************************/ 116 | /* Navigation Arrows */ 117 | .anythingSlider-default .arrow { 118 | top: 50%; 119 | position: absolute; 120 | display: block; 121 | } 122 | 123 | .anythingSlider-default .arrow a { 124 | display: block; 125 | width: 45px; 126 | height: 140px; 127 | margin: -70px 0 0 0; /* half height of image */ 128 | text-align: center; 129 | outline: 0; 130 | background: url(../images/default.png) no-repeat; 131 | } 132 | 133 | /* back arrow */ 134 | .anythingSlider-default .back { left: 0; } 135 | .anythingSlider-default .back a { background-position: left top; } 136 | .anythingSlider-default .back a:hover, 137 | .anythingSlider-default .back a.hover { background-position: left -140px; } 138 | /* forward arrow */ 139 | .anythingSlider-default .forward { right: 0; } 140 | .anythingSlider-default .forward a { background-position: right top; } 141 | .anythingSlider-default .forward a:hover, 142 | .anythingSlider-default .forward a.hover { background-position: right -140px; } 143 | 144 | /* Navigation Links */ 145 | .anythingSlider-default .anythingControls { outline: 0; display: none; } 146 | .anythingSlider-default .anythingControls ul { margin: 0; padding: 0; float: left; } 147 | .anythingSlider-default .anythingControls ul li { display: inline; } 148 | .anythingSlider-default .anythingControls ul a { 149 | font: 11px/18px Georgia, Serif; 150 | display: inline-block; 151 | text-decoration: none; 152 | padding: 2px 8px; 153 | height: 18px; 154 | margin: 0 5px 0 0; 155 | text-align: center; 156 | outline: 0; 157 | } 158 | 159 | /* navigationSize window */ 160 | .anythingSlider-default .anythingControls .anythingNavWindow { 161 | overflow: hidden; 162 | float: left; 163 | } 164 | 165 | /* Autoplay Start/Stop button */ 166 | .anythingSlider-default .anythingControls .start-stop { 167 | padding: 2px 5px; 168 | width: 40px; 169 | text-align: center; 170 | text-decoration: none; 171 | float: right; 172 | z-index: 100; 173 | outline: 0; 174 | } 175 | 176 | /*********************** 177 | IE8 AND OLDER STYLING 178 | ***********************/ 179 | 180 | /* Navigation Arrows */ 181 | .as-oldie .anythingSlider-default .arrow { 182 | top: 30%; 183 | } 184 | .as-oldie .anythingSlider-default .arrow a { 185 | margin: 0; 186 | } 187 | 188 | /* margin between nav buttons just looks better */ 189 | .as-oldie .anythingSlider-default .anythingControls li { 190 | margin-left: 3px; 191 | } 192 | 193 | /* When using the navigationSize option, the side margins need to be zero 194 | None of the navigation panels look good in IE7 now =( */ 195 | .as-oldie .anythingSlider-default .anythingControls a { 196 | margin: 0; 197 | } 198 | .as-oldie .anythingSlider-default .anythingNavWindow { 199 | margin: 0 2px; 200 | } 201 | .as-oldie .anythingSlider-default .anythingNavWindow li { 202 | padding: 3px 0 0 0; 203 | } 204 | 205 | /*********************** 206 | COMMON SLIDER STYLING 207 | ***********************/ 208 | /* Overall Wrapper */ 209 | .anythingSlider { 210 | display: block; 211 | overflow: visible !important; 212 | position: relative; 213 | } 214 | /* anythingSlider viewport window */ 215 | .anythingSlider .anythingWindow { 216 | overflow: hidden; 217 | position: relative; 218 | width: 100%; 219 | height: 100%; 220 | } 221 | /* anythingSlider base (original element) */ 222 | .anythingSlider .anythingBase { 223 | background: transparent; 224 | list-style: none; 225 | position: absolute; 226 | overflow: visible !important; 227 | top: 0; 228 | left: 0; 229 | margin: 0; 230 | padding: 0; 231 | } 232 | 233 | /* Navigation arrow text; indent moved to span inside "a", for IE7; 234 | apparently, a negative text-indent on an "a" link moves the link as well as the text */ 235 | .anythingSlider .arrow span { 236 | display: block; 237 | visibility: hidden; 238 | } 239 | /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ 240 | .anythingSlider .arrow.disabled { 241 | display: none; 242 | } 243 | /* all panels inside the slider; horizontal mode */ 244 | .anythingSlider .panel { 245 | background: transparent; 246 | display: block; 247 | overflow: hidden; 248 | float: left; 249 | padding: 0; 250 | margin: 0; 251 | } 252 | /* vertical mode */ 253 | .anythingSlider .vertical .panel { 254 | float: none; 255 | } 256 | /* fade mode */ 257 | .anythingSlider .fade .panel { 258 | float: none; 259 | position: absolute; 260 | top: 0; 261 | left: 0; 262 | z-index: 0; 263 | } 264 | /* fade mode active page - visible & on top */ 265 | .anythingSlider .fade .activePage { 266 | z-index: 1; 267 | } 268 | 269 | /*********************** 270 | RTL STYLING 271 | ***********************/ 272 | /* slider autoplay right-to-left, reverse order of nav links to look better */ 273 | .anythingSlider.rtl .anythingWindow { 274 | direction: ltr; 275 | unicode-bidi: bidi-override; 276 | } 277 | .anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */ 278 | .anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */ 279 | .anythingSlider.rtl .start-stop { /* float: right; */ } /* move start/stop button - in case you want to switch sides */ 280 | 281 | /* probably not necessary, but added just in case */ 282 | .anythingSlider, 283 | .anythingSlider .anythingWindow, 284 | .anythingSlider .anythingControls ul a, 285 | .anythingSlider .arrow a, 286 | .anythingSlider .start-stop { 287 | transition-duration: 0s; 288 | -o-transition-duration: 0s; 289 | -moz-transition-duration: 0s; 290 | -webkit-transition-duration: 0s; 291 | } 292 | -------------------------------------------------------------------------------- /css/theme-construction.css: -------------------------------------------------------------------------------- 1 | /* 2 | AnythingSlider v1.8+ Construction theme 3 | By Rob Garrison 4 | */ 5 | /***************************** 6 | SET DEFAULT DIMENSIONS HERE 7 | *****************************/ 8 | /* change the ID & dimensions to match your slider */ 9 | #slider { 10 | width: 700px; 11 | height: 390px; 12 | list-style: none; 13 | /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */ 14 | overflow-y: auto; 15 | overflow-x: hidden; 16 | } 17 | 18 | /****************** 19 | SET STYLING HERE 20 | ****************** 21 | ================================= 22 | Default state (no keyboard focus) 23 | =================================*/ 24 | /* Overall Wrapper */ 25 | .anythingSlider-construction { 26 | margin: 0 auto; 27 | /* 45px right & left padding for the navigation arrows */ 28 | padding: 0 45px; 29 | } 30 | /* slider window - top & bottom borders, default state */ 31 | .anythingSlider-construction .anythingWindow { 32 | border-top: 3px solid #333; 33 | border-bottom: 3px solid #333; 34 | } 35 | 36 | /* Navigation buttons + start/stop button, default state */ 37 | .anythingSlider-construction .anythingControls a { 38 | background: transparent url(../images/construction.gif) -52px top no-repeat; 39 | color: #fff; 40 | } 41 | /* Navigation current button, default state */ 42 | .anythingSlider-construction .anythingControls a.cur, 43 | .anythingSlider-construction .anythingControls a:hover { 44 | background-position: -52px -18px; 45 | color: #000; 46 | } 47 | 48 | /* start-stop button, stopped, default state */ 49 | .anythingSlider-construction .anythingControls a.start-stop { 50 | background-position: -52px -35px; 51 | } 52 | /* start-stop button, playing, default state */ 53 | .anythingSlider-construction .anythingControls a.start-stop.playing { 54 | background-position: -52px -52px; 55 | } 56 | 57 | /* start-stop button, default hovered text color (when visible) */ 58 | /* hide nav/start-stop background image shadow on hover - makes the button appear to come forward */ 59 | .anythingSlider-construction .anythingControls a.start-stop:hover, 60 | .anythingSlider-construction .anythingControls a.start-stop.hover, 61 | .anythingSlider-construction .anythingControls a.start-stop .anythingControls ul a:hover { 62 | background-position: -52px -18px; 63 | } 64 | 65 | /* 66 | ================================= 67 | Active State (has keyboard focus) 68 | ================================= 69 | */ 70 | /* slider window - top & bottom borders, active state */ 71 | .anythingSlider-construction.activeSlider .anythingWindow { 72 | border-color: #d0aa0d; 73 | } 74 | 75 | /************************ 76 | NAVIGATION POSITIONING 77 | ************************/ 78 | /* Navigation Arrows */ 79 | .anythingSlider-construction .arrow { 80 | top: 50%; 81 | position: absolute; 82 | display: block; 83 | } 84 | 85 | .anythingSlider-construction .arrow a { 86 | display: block; 87 | width: 45px; 88 | height: 200px; 89 | margin: -100px 0 0 0; /* half height of image */ 90 | text-align: center; 91 | outline: 0; 92 | background: url(../images/construction.gif) no-repeat; 93 | } 94 | 95 | /* back arrow */ 96 | .anythingSlider-construction .back { left: 0; } 97 | .anythingSlider-construction .back a { 98 | background-position: left center; 99 | border-radius: 5px 0 0 5px; 100 | -moz-border-radius: 5px 0 0 5px; 101 | -webkit-border-radius: 5px 0 0 5px; 102 | } 103 | .anythingSlider-construction .back a:hover, 104 | .anythingSlider-construction .back a.hover { 105 | background-position: -5px center; 106 | } 107 | 108 | /* forward arrow */ 109 | .anythingSlider-construction .forward { right: 0; } 110 | .anythingSlider-construction .forward a { 111 | background-position: right center; 112 | border-radius: 0 5px 5px 0; 113 | -moz-border-radius: 0 5px 5px 0; 114 | -webkit-border-radius: 0 5px 5px 0; 115 | } 116 | .anythingSlider-construction .forward a:hover, 117 | .anythingSlider-construction .forward a.hover { 118 | background-position: -67px center; 119 | } 120 | 121 | /* Navigation Links */ 122 | .anythingSlider-construction .anythingControls { 123 | height: 22px; /* limit height, needed for IE9 of all things */ 124 | outline: 0; 125 | display: none; 126 | float: right; 127 | position: absolute; 128 | bottom: 5px; 129 | right: 20px; 130 | margin: 0 45px; /* needed for IE */ 131 | z-index: 100; 132 | opacity: 0.90; 133 | filter: alpha(opacity=90); 134 | } 135 | 136 | .anythingSlider-construction .anythingControls ul { 137 | margin: 0; 138 | padding: 0; 139 | float: left; 140 | } 141 | .anythingSlider-construction .anythingControls ul li { 142 | list-style: none; 143 | float: left; 144 | margin: 0; 145 | padding: 0; 146 | } 147 | .anythingSlider-construction .anythingControls ul a { 148 | display: inline-block; 149 | width: 15px; 150 | height: 15px; 151 | margin: 3px; 152 | padding: 0; 153 | text-decoration: none; 154 | text-align: center; 155 | outline: 0; 156 | } 157 | 158 | .anythingSlider-construction .anythingControls span { 159 | display: block; 160 | visibility: hidden; /* needed for IE8, instead of text-indent: -9999px */ 161 | } 162 | 163 | /* navigationSize window */ 164 | .anythingSlider-construction .anythingControls .anythingNavWindow { 165 | overflow: hidden; 166 | float: left; 167 | } 168 | 169 | /* navigationSize arrows */ 170 | .anythingSlider-construction .anythingControls li.next a, 171 | .anythingSlider-construction .anythingControls li.prev a { 172 | width: 14px; 173 | height: 14px; 174 | margin: 4px; 175 | } 176 | /* navigationSize nav arrow positioning */ 177 | .anythingSlider-construction .anythingControls li.next a { 178 | background-position: -92px -143px; 179 | } 180 | .anythingSlider-construction .anythingControls li.next a:hover { 181 | background-position: -90px -143px; 182 | } 183 | .anythingSlider-construction .anythingControls li.prev a { 184 | background-position: -11px -143px; 185 | } 186 | .anythingSlider-construction .anythingControls li.prev a:hover { 187 | background-position: -13px -143px; 188 | } 189 | 190 | /* Autoplay Start/Stop button */ 191 | .anythingSlider-construction .anythingControls .start-stop { 192 | display: inline-block; 193 | width: 15px; 194 | height: 15px; 195 | margin: 3px; 196 | padding: 0; 197 | text-decoration: none; 198 | z-index: 100; 199 | outline: 0; 200 | } 201 | /*********************** 202 | IE8 AND OLDER STYLING 203 | ***********************/ 204 | /* Navigation Arrows */ 205 | .as-oldie .anythingSlider-construction .arrow { 206 | top: 14%; 207 | } 208 | .as-oldie .anythingSlider-construction .arrow a { 209 | margin: 0; 210 | } 211 | 212 | /*********************** 213 | COMMON SLIDER STYLING 214 | ***********************/ 215 | /* Overall Wrapper */ 216 | .anythingSlider { 217 | display: block; 218 | overflow: visible !important; 219 | position: relative; 220 | } 221 | /* anythingSlider viewport window */ 222 | .anythingSlider .anythingWindow { 223 | overflow: hidden; 224 | position: relative; 225 | width: 100%; 226 | height: 100%; 227 | } 228 | /* anythingSlider base (original element) */ 229 | .anythingSlider .anythingBase { 230 | background: transparent; 231 | list-style: none; 232 | position: absolute; 233 | overflow: visible !important; 234 | top: 0; 235 | left: 0; 236 | margin: 0; 237 | padding: 0; 238 | } 239 | 240 | /* Navigation arrow text; indent moved to span inside "a", for IE7; 241 | apparently, a negative text-indent on an "a" link moves the link as well as the text */ 242 | .anythingSlider .arrow span { 243 | display: block; 244 | visibility: hidden; 245 | } 246 | 247 | /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ 248 | .anythingSlider .arrow.disabled { 249 | display: none; 250 | } 251 | /* all panels inside the slider; horizontal mode */ 252 | .anythingSlider .panel { 253 | background: transparent; 254 | display: block; 255 | overflow: hidden; 256 | float: left; 257 | padding: 0; 258 | margin: 0; 259 | } 260 | /* vertical mode */ 261 | .anythingSlider .vertical .panel { 262 | float: none; 263 | } 264 | 265 | /* fade mode */ 266 | .anythingSlider .fade .panel { 267 | float: none; 268 | position: absolute; 269 | top: 0; 270 | left: 0; 271 | z-index: 0; 272 | } 273 | /* fade mode active page - visible & on top */ 274 | .anythingSlider .fade .activePage { 275 | z-index: 1; 276 | } 277 | 278 | /*********************** 279 | RTL STYLING 280 | ***********************/ 281 | /* slider autoplay right-to-left, reverse order of nav links to look better */ 282 | .anythingSlider.rtl .anythingWindow { 283 | direction: ltr; 284 | unicode-bidi: bidi-override; 285 | } 286 | .anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */ 287 | .anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */ 288 | .anythingSlider.rtl .start-stop { /* float: right; */ } /* move start/stop button - in case you want to switch sides */ 289 | 290 | /* probably not necessary, but added just in case */ 291 | .anythingSlider .anythingWindow, 292 | .anythingSlider .anythingControls ul a, 293 | .anythingSlider .arrow a, 294 | .anythingSlider .start-stop { 295 | transition-duration: 0s; 296 | -o-transition-duration: 0s; 297 | -moz-transition-duration: 0s; 298 | -webkit-transition-duration: 0s; 299 | } 300 | -------------------------------------------------------------------------------- /css/theme-cs-portfolio.css: -------------------------------------------------------------------------------- 1 | /* 2 | AnythingSlider v1.8+ cs-portfolio theme 3 | By Curtis Scott (http://www.curtisscott.com/portfolio.html) 4 | *** 5 | Note: the nav-cs-portfolio.png used for navigation and slideshow buttons uses a semi-transparent png, 6 | through which the background color is seen... so colors set will turn out darker than normal 7 | ***/ 8 | 9 | /***************************** 10 | SET DEFAULT DIMENSIONS HERE 11 | *****************************/ 12 | /* change the ID & dimensions to match your slider */ 13 | #slider { 14 | width: 700px; 15 | height: 390px; 16 | list-style: none; 17 | /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */ 18 | overflow-y: auto; 19 | overflow-x: hidden; 20 | } 21 | 22 | /****************** 23 | SET STYLING HERE 24 | ****************** 25 | ================================= 26 | Default state (no keyboard focus) 27 | ==================================*/ 28 | /* Overall Wrapper */ 29 | .anythingSlider-cs-portfolio { 30 | margin: 0 auto 50px auto; /* added 50px to bottom to accomodate controls */ 31 | padding: 0; 32 | } 33 | 34 | /* slider window - top & bottom borders, default state */ 35 | .anythingSlider-cs-portfolio .anythingWindow { 36 | border: 0; 37 | } 38 | /* Navigation buttons + start/stop button, default state */ 39 | .anythingSlider-cs-portfolio .anythingControls a { 40 | background: #fff url(../images/cs-portfolio.png) right -20px no-repeat; 41 | color: #000; 42 | } 43 | /* Navigation current button, default state */ 44 | .anythingSlider-cs-portfolio .anythingControls a.cur, 45 | .anythingSlider-cs-portfolio .anythingControls a:hover { 46 | background-color: #0d5c9f; 47 | color: #000; 48 | } 49 | 50 | /* start-stop button, stopped, default state */ 51 | .anythingSlider-cs-portfolio .anythingControls a.start-stop { 52 | background-color: #080; 53 | background-position: right top; 54 | color: #ddd; 55 | } 56 | /* start-stop button, default hovered text color (when visible) */ 57 | .anythingSlider-cs-portfolio .anythingControls a.start-stop:hover, 58 | .anythingSlider-cs-portfolio .anythingControls a.start-stop.hover { 59 | background-color: #0f0; 60 | color: #fff; 61 | } 62 | /* start-stop button, playing, default state */ 63 | .anythingSlider-cs-portfolio .anythingControls a.start-stop.playing { 64 | background-color: #800; 65 | } 66 | .anythingSlider-cs-portfolio .anythingControls a.start-stop.playing:hover { 67 | background-color: #f00; 68 | } 69 | 70 | /************************ 71 | NAVIGATION POSITIONING 72 | ************************/ 73 | /* Navigation Arrows */ 74 | .anythingSlider-cs-portfolio .arrow { 75 | display: block; 76 | position: absolute; 77 | bottom: -38px; 78 | z-index: 100; 79 | } 80 | .anythingSlider-cs-portfolio .arrow a { 81 | display: block; 82 | width: 26px; 83 | height: 27px; 84 | text-align: center; 85 | outline: 0; 86 | background: url(../images/cs-portfolio.png) no-repeat; 87 | } 88 | 89 | /* back arrow */ 90 | .anythingSlider-cs-portfolio .back { left: 20px; } 91 | .anythingSlider-cs-portfolio .back a { background-position: left top; } 92 | .anythingSlider-cs-portfolio .back a:hover, 93 | .anythingSlider-cs-portfolio .back a.hover { background-position: left -27px; } 94 | 95 | /* forward arrow */ 96 | .anythingSlider-cs-portfolio .forward { right: 20px; } 97 | .anythingSlider-cs-portfolio .forward a { background-position: -24px top; } 98 | .anythingSlider-cs-portfolio .forward a:hover, 99 | .anythingSlider-cs-portfolio .forward a.hover { background-position: -24px -27px; } 100 | 101 | /* Navigation Links */ 102 | .anythingSlider-cs-portfolio .anythingControls { 103 | position: relative; 104 | background: url(../images/cs-portfolio.png) repeat-x bottom center; 105 | height: 49px; 106 | margin: 0 auto; 107 | padding-left: 75px; 108 | text-align: center; 109 | } 110 | .anythingSlider-cs-portfolio .anythingControls ul { 111 | margin: 0; 112 | padding: 0; 113 | z-index: 100; 114 | } 115 | .anythingSlider-cs-portfolio .anythingControls ul.thumbNav { 116 | padding-top: 18px; 117 | } 118 | .anythingSlider-cs-portfolio .anythingControls ul li { 119 | margin: 0; 120 | padding: 0; 121 | display: inline; 122 | } 123 | .anythingSlider-cs-portfolio .anythingControls ul a { 124 | font: 11px/18px Georgia, Serif; 125 | width: 17px; 126 | height: 17px; 127 | margin: 0 5px 0 0; 128 | padding: 0; 129 | float: left; 130 | text-decoration: none; 131 | text-align: center; 132 | outline: 0; 133 | border: 0; 134 | } 135 | 136 | /* navigationSize window */ 137 | .anythingSlider-cs-portfolio .anythingControls .anythingNavWindow { 138 | margin: 0 5px 0 0; 139 | overflow: hidden; 140 | float: left; 141 | } 142 | .anythingSlider-cs-portfolio .anythingControls li.next a, 143 | .anythingSlider-cs-portfolio .anythingControls li.prev a { 144 | margin: 19px 5px 0 5px; 145 | width: 16px; 146 | height: 15px; 147 | background: url(../images/cs-portfolio.png) -25px -54px no-repeat; 148 | } 149 | .anythingSlider-cs-portfolio .anythingControls li.prev a { 150 | background-position: -9px -54px; 151 | } 152 | .anythingSlider-cs-portfolio .anythingControls li.next a:hover { 153 | background-position: -56px -54px; 154 | } 155 | .anythingSlider-cs-portfolio .anythingControls li.prev a:hover { 156 | background-position: -41px -54px; 157 | } 158 | 159 | /* Autoplay Start/Stop button */ 160 | .anythingSlider-cs-portfolio .anythingControls .start-stop { 161 | right: 60px; 162 | top: 15px; 163 | margin: 0; 164 | padding: 0; 165 | position: absolute; 166 | text-align: center; 167 | width: 20px; 168 | height: 20px; 169 | z-index: 100; 170 | border: 0; 171 | } 172 | 173 | /*********************** 174 | IE8 AND OLDER STYLING 175 | ***********************/ 176 | 177 | /* Navigation Arrows */ 178 | .as-oldie .anythingSlider-cs-portfolio .anythingControls a span { 179 | line-height: 1px; /* needed for IE7 */ 180 | } 181 | 182 | /* IE7 png fix*/ 183 | .as-oldie .anythingSlider-cs-portfolio .arrow a, 184 | .as-oldie .anythingSlider-cs-portfolio .anythingControls, 185 | .as-oldie .anythingSlider-cs-portfolio .anythingControls a { 186 | _background:none; 187 | _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/cs-portfolio.png',sizingMethod='crop'); 188 | } 189 | 190 | /*********************** 191 | COMMON SLIDER STYLING 192 | ***********************/ 193 | /* Overall Wrapper */ 194 | .anythingSlider { 195 | display: block; 196 | overflow: visible !important; 197 | position: relative; 198 | } 199 | /* anythingSlider viewport window */ 200 | .anythingSlider .anythingWindow { 201 | overflow: hidden; 202 | position: relative; 203 | width: 100%; 204 | height: 100%; 205 | } 206 | /* anythingSlider base (original element) */ 207 | .anythingSlider .anythingBase { 208 | background: transparent; 209 | list-style: none; 210 | position: absolute; 211 | overflow: visible !important; 212 | top: 0; 213 | left: 0; 214 | margin: 0; 215 | padding: 0; 216 | } 217 | 218 | /* Navigation arrow text; indent moved to span inside "a", for IE7; 219 | apparently, a negative text-indent on an "a" link moves the link as well as the text */ 220 | .anythingSlider .arrow span, 221 | .anythingSlider .anythingControls span { 222 | display: block; 223 | visibility: hidden; 224 | } 225 | /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ 226 | .anythingSlider .arrow.disabled { 227 | display: none; 228 | } 229 | /* all panels inside the slider; horizontal mode */ 230 | .anythingSlider .panel { 231 | background: transparent; 232 | display: block; 233 | overflow: hidden; 234 | float: left; 235 | padding: 0; 236 | margin: 0; 237 | } 238 | /* vertical mode */ 239 | .anythingSlider .vertical .panel { 240 | float: none; 241 | } 242 | /* fade mode */ 243 | .anythingSlider .fade .panel { 244 | float: none; 245 | position: absolute; 246 | top: 0; 247 | left: 0; 248 | z-index: 0; 249 | } 250 | /* fade mode active page - visible & on top */ 251 | .anythingSlider .fade .activePage { 252 | z-index: 1; 253 | } 254 | 255 | /*********************** 256 | RTL STYLING 257 | ***********************/ 258 | /* slider autoplay right-to-left, reverse order of nav links to look better */ 259 | .anythingSlider.rtl .anythingWindow { 260 | direction: ltr; 261 | unicode-bidi: bidi-override; 262 | } 263 | .anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */ 264 | .anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */ 265 | .anythingSlider.rtl .start-stop { /* float: right; */ } /* move start/stop button - in case you want to switch sides */ 266 | 267 | /* probably not necessary, but added just in case */ 268 | .anythingSlider, 269 | .anythingSlider .anythingWindow, 270 | .anythingSlider .anythingControls ul a, 271 | .anythingSlider .arrow a, 272 | .anythingSlider .start-stop { 273 | transition-duration: 0s; 274 | -o-transition-duration: 0s; 275 | -moz-transition-duration: 0s; 276 | -webkit-transition-duration: 0s; 277 | } 278 | -------------------------------------------------------------------------------- /css/theme-metallic.css: -------------------------------------------------------------------------------- 1 | /* 2 | AnythingSlider v1.8+ Metallic theme 3 | By Rob Garrison 4 | */ 5 | /***************************** 6 | SET DEFAULT DIMENSIONS HERE 7 | *****************************/ 8 | /* change the ID & dimensions to match your slider */ 9 | #slider { 10 | width: 700px; 11 | height: 390px; 12 | list-style: none; 13 | /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */ 14 | overflow-y: auto; 15 | overflow-x: hidden; 16 | } 17 | 18 | /****************** 19 | SET STYLING HERE 20 | ****************** 21 | ================================= 22 | Default state (no keyboard focus) 23 | ==================================*/ 24 | /* Overall Wrapper */ 25 | .anythingSlider-metallic { 26 | margin: 0 auto; 27 | /* 23px right & left padding for the navigation arrows */ 28 | padding: 0 23px; 29 | } 30 | /* slider window - top & bottom borders, default state */ 31 | .anythingSlider-metallic .anythingWindow { 32 | border-top: 3px solid #333; 33 | border-bottom: 3px solid #333; 34 | } 35 | /* Navigation buttons + start/stop button, default state */ 36 | .anythingSlider-metallic .anythingControls a { 37 | background: transparent url(../images/arrows-metallic.png) -68px -40px repeat-x; 38 | color: #000; 39 | border: #000 1px solid; 40 | border-radius: 5px; 41 | -moz-border-radius: 5px; 42 | -webkit-border-radius: 5px; 43 | } 44 | /* Navigation current button, default state */ 45 | .anythingSlider-metallic .anythingControls a.cur, 46 | .anythingSlider-metallic .anythingControls a:hover { 47 | background-position: -70px -137px; 48 | background-color: #888; 49 | color: #000; 50 | } 51 | 52 | /* start-stop button, stopped, default state */ 53 | .anythingSlider-metallic .anythingControls a.start-stop { 54 | background: #040; 55 | color: #ddd; 56 | /* top shadow */ 57 | -moz-box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5); 58 | -webkit-box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5); 59 | box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5); 60 | } 61 | /* start-stop button, playing, default state */ 62 | .anythingSlider-metallic .anythingControls a.start-stop.playing { 63 | background-color: #800; 64 | } 65 | 66 | /* start-stop button, default hovered text color (when visible) */ 67 | /* hide nav/start-stop background image shadow on hover - makes the button appear to come forward */ 68 | .anythingSlider-metallic .anythingControls a.start-stop:hover, 69 | .anythingSlider-metallic .anythingControls a.start-stop.hover, 70 | .anythingSlider-metallic .anythingControls a.start-stop .anythingControls ul a:hover { 71 | color: #fff; 72 | /* clear top shadow */ 73 | -moz-box-shadow: inset 0 0 0 #000000; 74 | -webkit-box-shadow: inset 0 0 0 #000000; 75 | box-shadow: inset 0 0 0 #000000; 76 | } 77 | 78 | /* 79 | ================================= 80 | Active State (has keyboard focus) 81 | ================================= 82 | */ 83 | /* slider window - top & bottom borders, active state */ 84 | .anythingSlider-metallic.activeSlider .anythingWindow { 85 | border-color: #0355a3; 86 | } 87 | 88 | /* Navigation buttons, active state */ 89 | .anythingSlider-metallic.activeSlider .anythingControls a { 90 | background-color: transparent; 91 | } 92 | /* Navigation current button, active state */ 93 | .anythingSlider-metallic.activeSlider .anythingControls a.cur, 94 | .anythingSlider-metallic.activeSlider .anythingControls a:hover { 95 | background-position: -76px -57px; 96 | background-color: #ccc; 97 | } 98 | 99 | /* start-stop button, stopped, active state */ 100 | .anythingSlider-metallic.activeSlider .anythingControls a.start-stop { 101 | background: #080; 102 | color: #fff; 103 | } 104 | /* start-stop button, playing, active state */ 105 | .anythingSlider-metallic.activeSlider .anythingControls a.start-stop.playing { 106 | color: #fff; 107 | background: #d00; 108 | } 109 | /* start-stop button, active slider hovered text color (when visible) */ 110 | .anythingSlider-metallic.activeSlider .start-stop:hover, 111 | .anythingSlider-metallic.activeSlider .start-stop.hover { 112 | color: #fff; 113 | } 114 | 115 | /************************ 116 | NAVIGATION POSITIONING 117 | ************************/ 118 | /* Navigation Arrows */ 119 | .anythingSlider-metallic .arrow { 120 | top: 50%; 121 | position: absolute; 122 | display: block; 123 | z-index: 100; 124 | } 125 | 126 | .anythingSlider-metallic .arrow a { 127 | display: block; 128 | width: 45px; 129 | height: 95px; 130 | margin: -47.5px 0 0 0; /* half height of image */ 131 | text-align: center; 132 | outline: 0; 133 | background: url(../images/arrows-metallic.png) no-repeat; 134 | } 135 | 136 | /* back arrow */ 137 | .anythingSlider-metallic .back { left: 0; } 138 | .anythingSlider-metallic .back a { background-position: left bottom; } 139 | .anythingSlider-metallic .back a:hover, 140 | .anythingSlider-metallic .back a.hover { background-position: left top; } 141 | /* forward arrow */ 142 | .anythingSlider-metallic .forward { right: 0; } 143 | .anythingSlider-metallic .forward a { background-position: right bottom; } 144 | .anythingSlider-metallic .forward a:hover, 145 | .anythingSlider-metallic .forward a.hover { background-position: right top; } 146 | 147 | /* Navigation Links */ 148 | .anythingSlider-metallic .anythingControls { 149 | height: 15px; /* limit height, needed for IE9 of all things */ 150 | outline: 0; 151 | display: none; 152 | float: right; 153 | position: absolute; 154 | bottom: 5px; 155 | right: 20px; 156 | margin: 0 45px; 157 | z-index: 100; 158 | opacity: 0.90; 159 | filter: alpha(opacity=90); 160 | } 161 | 162 | .anythingSlider-metallic .anythingControls ul { 163 | margin: 0; 164 | padding: 0; 165 | float: left; 166 | } 167 | .anythingSlider-metallic .anythingControls ul li { 168 | list-style: none; 169 | float: left; 170 | margin: 0; 171 | padding: 0; 172 | } 173 | .anythingSlider-metallic .anythingControls ul a { 174 | display: inline-block; 175 | width: 10px; 176 | height: 10px; 177 | margin: 3px; 178 | padding: 0; 179 | text-decoration: none; 180 | text-align: center; 181 | outline: 0; 182 | } 183 | 184 | .anythingSlider-metallic .anythingControls span { 185 | display: block; 186 | visibility: hidden; 187 | } 188 | 189 | /* navigationSize window */ 190 | .anythingSlider-metallic .anythingControls .anythingNavWindow { 191 | overflow: hidden; 192 | float: left; 193 | } 194 | /* navigationSize nav arrow positioning */ 195 | .anythingSlider-metallic .anythingControls li.prev a span, 196 | .anythingSlider-metallic .anythingControls li.next a span { 197 | visibility: visible; 198 | position: relative; 199 | top: -6px; /* bring navigationSize text arrows into view */ 200 | color: #fff; 201 | } 202 | 203 | /* Autoplay Start/Stop button */ 204 | .anythingSlider-metallic .anythingControls .start-stop { 205 | display: inline-block; 206 | width: 10px; 207 | height: 10px; 208 | margin: 3px; 209 | padding: 0; 210 | text-align: center; 211 | text-decoration: none; 212 | z-index: 100; 213 | outline: 0; 214 | } 215 | 216 | /*********************** 217 | IE8 AND OLDER STYLING 218 | ***********************/ 219 | /* Navigation Arrows */ 220 | .as-oldie .anythingSlider-metallic .arrow { 221 | top: 40%; 222 | } 223 | .as-oldie .anythingSlider-metallic .arrow a { 224 | margin: 0; 225 | } 226 | 227 | /*********************** 228 | COMMON SLIDER STYLING 229 | ***********************/ 230 | /* Overall Wrapper */ 231 | .anythingSlider { 232 | display: block; 233 | overflow: visible !important; 234 | position: relative; 235 | } 236 | /* anythingSlider viewport window */ 237 | .anythingSlider .anythingWindow { 238 | overflow: hidden; 239 | position: relative; 240 | width: 100%; 241 | height: 100%; 242 | } 243 | /* anythingSlider base (original element) */ 244 | .anythingSlider .anythingBase { 245 | background: transparent; 246 | list-style: none; 247 | position: absolute; 248 | overflow: visible !important; 249 | top: 0; 250 | left: 0; 251 | margin: 0; 252 | padding: 0; 253 | } 254 | 255 | /* Navigation arrow text; indent moved to span inside "a", for IE7; 256 | apparently, a negative text-indent on an "a" link moves the link as well as the text */ 257 | .anythingSlider .arrow span { 258 | display: block; 259 | visibility: hidden; 260 | } 261 | /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ 262 | .anythingSlider .arrow.disabled { 263 | display: none; 264 | } 265 | /* all panels inside the slider; horizontal mode */ 266 | .anythingSlider .panel { 267 | background: transparent; 268 | display: block; 269 | overflow: hidden; 270 | float: left; 271 | padding: 0; 272 | margin: 0; 273 | } 274 | /* vertical mode */ 275 | .anythingSlider .vertical .panel { 276 | float: none; 277 | } 278 | 279 | /* fade mode */ 280 | .anythingSlider .fade .panel { 281 | float: none; 282 | position: absolute; 283 | top: 0; 284 | left: 0; 285 | z-index: 0; 286 | } 287 | /* fade mode active page - visible & on top */ 288 | .anythingSlider .fade .activePage { 289 | z-index: 1; 290 | } 291 | 292 | /*********************** 293 | RTL STYLING 294 | ***********************/ 295 | /* slider autoplay right-to-left, reverse order of nav links to look better */ 296 | .anythingSlider.rtl .anythingWindow { 297 | direction: ltr; 298 | unicode-bidi: bidi-override; 299 | } 300 | .anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */ 301 | .anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */ 302 | .anythingSlider.rtl .start-stop { /* float: right; */ } /* move start/stop button - in case you want to switch sides */ 303 | 304 | /* probably not necessary, but added just in case */ 305 | .anythingSlider .anythingWindow, 306 | .anythingSlider .anythingControls ul a, 307 | .anythingSlider .arrow a, 308 | .anythingSlider .start-stop { 309 | transition-duration: 0s; 310 | -o-transition-duration: 0s; 311 | -moz-transition-duration: 0s; 312 | -webkit-transition-duration: 0s; 313 | } 314 | -------------------------------------------------------------------------------- /css/theme-minimalist-round.css: -------------------------------------------------------------------------------- 1 | /* 2 | AnythingSlider v1.8+ Minimalist Round theme 3 | By Rob Garrison 4 | */ 5 | /***************************** 6 | SET DEFAULT DIMENSIONS HERE 7 | *****************************/ 8 | /* change the ID & dimensions to match your slider */ 9 | #slider { 10 | width: 700px; 11 | height: 390px; 12 | list-style: none; 13 | /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */ 14 | overflow-y: auto; 15 | overflow-x: hidden; 16 | } 17 | 18 | /****************** 19 | SET STYLING HERE 20 | ****************** 21 | ================================= 22 | Default state (no keyboard focus) 23 | ==================================*/ 24 | /* Overall Wrapper */ 25 | .anythingSlider-minimalist-round { 26 | margin: 0 auto; 27 | /* 30px right & left padding for the navigation arrows */ 28 | padding: 0 30px; 29 | } 30 | /* slider window - top & bottom borders, default state */ 31 | .anythingSlider-minimalist-round .anythingWindow { 32 | border-top: 3px solid #333; 33 | border-bottom: 3px solid #333; 34 | } 35 | /* Navigation buttons + start/stop button, default state */ 36 | .anythingSlider-minimalist-round .anythingControls a { 37 | background-color: #333; 38 | color: #fff; 39 | border: #000 1px solid; 40 | border-radius: 5px; 41 | -moz-border-radius: 5px; 42 | -webkit-border-radius: 5px; 43 | } 44 | /* Navigation current button, default state */ 45 | .anythingSlider-minimalist-round .anythingControls a.cur, 46 | .anythingSlider-minimalist-round .anythingControls a:hover { 47 | background-color: #777; 48 | color: #000; 49 | } 50 | 51 | /* start-stop button, stopped, default state */ 52 | .anythingSlider-minimalist-round .anythingControls a.start-stop { 53 | background: #040; 54 | color: #ddd; 55 | /* top shadow */ 56 | -moz-box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5); 57 | -webkit-box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5); 58 | box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5); 59 | } 60 | /* start-stop button, playing, default state */ 61 | .anythingSlider-minimalist-round .anythingControls a.start-stop.playing { 62 | background-color: #800; 63 | } 64 | 65 | /* start-stop button, default hovered text color (when visible) */ 66 | /* hide nav/start-stop background image shadow on hover - makes the button appear to come forward */ 67 | .anythingSlider-minimalist-round .anythingControls a.start-stop:hover, 68 | .anythingSlider-minimalist-round .anythingControls a.start-stop.hover, 69 | .anythingSlider-minimalist-round .anythingControls a.start-stop .anythingControls ul a:hover { 70 | color: #fff; 71 | /* clear top shadow */ 72 | -moz-box-shadow: inset 0 0 0 #000000; 73 | -webkit-box-shadow: inset 0 0 0 #000000; 74 | box-shadow: inset 0 0 0 #000000; 75 | } 76 | 77 | /* 78 | ================================= 79 | Active State (has keyboard focus) 80 | ================================= 81 | */ 82 | /* slider window - top & bottom borders, active state */ 83 | .anythingSlider-minimalist-round.activeSlider .anythingWindow { 84 | border-color: #164054; 85 | } 86 | 87 | /* Navigation buttons, active state */ 88 | .anythingSlider-minimalist-round.activeSlider .anythingControls a { 89 | background-color: #164054; 90 | color: #fff; 91 | } 92 | /* Navigation current button, active state */ 93 | .anythingSlider-minimalist-round.activeSlider .anythingControls a.cur, 94 | .anythingSlider-minimalist-round.activeSlider .anythingControls a:hover { 95 | background-color: #fff; 96 | color: #000; 97 | } 98 | 99 | /* start-stop button, stopped, active state */ 100 | .anythingSlider-minimalist-round.activeSlider .anythingControls a.start-stop { 101 | background: #080; 102 | color: #fff; 103 | } 104 | /* start-stop button, playing, active state */ 105 | .anythingSlider-minimalist-round.activeSlider .anythingControls a.start-stop.playing { 106 | color: #fff; 107 | background: #f00; 108 | } 109 | /* start-stop button, active slider hovered text color (when visible) */ 110 | .anythingSlider-minimalist-round.activeSlider .start-stop:hover, 111 | .anythingSlider-minimalist-round.activeSlider .start-stop.hover { 112 | color: #fff; 113 | } 114 | 115 | /************************ 116 | NAVIGATION POSITIONING 117 | ************************/ 118 | /* Navigation Arrows */ 119 | .anythingSlider-minimalist-round .arrow { 120 | top: 50%; 121 | position: absolute; 122 | display: block; 123 | } 124 | 125 | .anythingSlider-minimalist-round .arrow a { 126 | display: block; 127 | width: 30px; 128 | height: 40px; 129 | margin: -20px 0 0 0; /* half height of image */ 130 | text-align: center; 131 | outline: 0; 132 | background: url(../images/arrows-minimalist.png) no-repeat; 133 | } 134 | 135 | /* back arrow */ 136 | .anythingSlider-minimalist-round .back { left: 0; } 137 | .anythingSlider-minimalist-round .back a { background-position: left bottom; } 138 | .anythingSlider-minimalist-round .back a:hover, 139 | .anythingSlider-minimalist-round .back a.hover { background-position: left top; } 140 | /* forward arrow */ 141 | .anythingSlider-minimalist-round .forward { right: 0; } 142 | .anythingSlider-minimalist-round .forward a { background-position: right bottom; } 143 | .anythingSlider-minimalist-round .forward a:hover, 144 | .anythingSlider-minimalist-round .forward a.hover { background-position: right top; } 145 | 146 | /* Navigation Links */ 147 | .anythingSlider-minimalist-round .anythingControls { 148 | height: 15px; /* limit height, needed for IE9 of all things */ 149 | outline: 0; 150 | display: none; 151 | float: right; 152 | position: absolute; 153 | bottom: 5px; 154 | right: 20px; 155 | margin: 0 45px; 156 | z-index: 100; 157 | opacity: 0.90; 158 | filter: alpha(opacity=90); 159 | } 160 | 161 | .anythingSlider-minimalist-round .anythingControls ul { 162 | margin: 0; 163 | padding: 0; 164 | float: left; 165 | } 166 | .anythingSlider-minimalist-round .anythingControls ul li { 167 | list-style: none; 168 | float: left; 169 | margin: 0; 170 | padding: 0; 171 | } 172 | .anythingSlider-minimalist-round .anythingControls ul a { 173 | display: inline-block; 174 | width: 10px; 175 | height: 10px; 176 | margin: 3px; 177 | padding: 0; 178 | text-decoration: none; 179 | text-align: center; 180 | outline: 0; 181 | } 182 | 183 | .anythingSlider-minimalist-round .anythingControls span { 184 | display: block; 185 | visibility: hidden; 186 | } 187 | 188 | /* navigationSize window */ 189 | .anythingSlider-minimalist-round .anythingControls .anythingNavWindow { 190 | overflow: hidden; 191 | float: left; 192 | } 193 | /* navigationSize nav arrow positioning */ 194 | .anythingSlider-minimalist-round .anythingControls li.prev span, 195 | .anythingSlider-minimalist-round .anythingControls li.next span { 196 | visibility: visible; 197 | position: relative; 198 | top: -6px; /* bring navigationSize text arrows into view */ 199 | } 200 | 201 | /* Autoplay Start/Stop button */ 202 | .anythingSlider-minimalist-round .anythingControls .start-stop { 203 | display: inline-block; 204 | width: 10px; 205 | height: 10px; 206 | margin: 3px; 207 | padding: 0; 208 | text-align: center; 209 | text-decoration: none; 210 | z-index: 100; 211 | outline: 0; 212 | } 213 | 214 | /*********************** 215 | IE8 AND OLDER STYLING 216 | ***********************/ 217 | /* Navigation Arrows */ 218 | .as-oldie .anythingSlider-minimalist-round .arrow { 219 | top: 45%; 220 | } 221 | .as-oldie .anythingSlider-minimalist-round .arrow a { 222 | margin: 0; 223 | } 224 | 225 | /*********************** 226 | COMMON SLIDER STYLING 227 | ***********************/ 228 | /* Overall Wrapper */ 229 | .anythingSlider { 230 | display: block; 231 | overflow: visible !important; 232 | position: relative; 233 | } 234 | /* anythingSlider viewport window */ 235 | .anythingSlider .anythingWindow { 236 | overflow: hidden; 237 | position: relative; 238 | width: 100%; 239 | height: 100%; 240 | } 241 | /* anythingSlider base (original element) */ 242 | .anythingSlider .anythingBase { 243 | background: transparent; 244 | list-style: none; 245 | position: absolute; 246 | overflow: visible !important; 247 | top: 0; 248 | left: 0; 249 | margin: 0; 250 | padding: 0; 251 | } 252 | 253 | /* Navigation arrow text; indent moved to span inside "a", for IE7; 254 | apparently, a negative text-indent on an "a" link moves the link as well as the text */ 255 | .anythingSlider .arrow span { 256 | display: block; 257 | visibility: hidden; 258 | } 259 | /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ 260 | .anythingSlider .arrow.disabled { 261 | display: none; 262 | } 263 | /* all panels inside the slider; horizontal mode */ 264 | .anythingSlider .panel { 265 | background: transparent; 266 | display: block; 267 | overflow: hidden; 268 | float: left; 269 | padding: 0; 270 | margin: 0; 271 | } 272 | /* vertical mode */ 273 | .anythingSlider .vertical .panel { 274 | float: none; 275 | } 276 | 277 | /* fade mode */ 278 | .anythingSlider .fade .panel { 279 | float: none; 280 | position: absolute; 281 | top: 0; 282 | left: 0; 283 | z-index: 0; 284 | } 285 | /* fade mode active page - visible & on top */ 286 | .anythingSlider .fade .activePage { 287 | z-index: 1; 288 | } 289 | 290 | /*********************** 291 | RTL STYLING 292 | ***********************/ 293 | /* slider autoplay right-to-left, reverse order of nav links to look better */ 294 | .anythingSlider.rtl .anythingWindow { 295 | direction: ltr; 296 | unicode-bidi: bidi-override; 297 | } 298 | .anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */ 299 | .anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */ 300 | .anythingSlider.rtl .start-stop { /* float: right; */ } /* move start/stop button - in case you want to switch sides */ 301 | 302 | /* probably not necessary, but added just in case */ 303 | .anythingSlider .anythingWindow, 304 | .anythingSlider .anythingControls ul a, 305 | .anythingSlider .arrow a, 306 | .anythingSlider .start-stop { 307 | transition-duration: 0s; 308 | -o-transition-duration: 0s; 309 | -moz-transition-duration: 0s; 310 | -webkit-transition-duration: 0s; 311 | } 312 | -------------------------------------------------------------------------------- /css/theme-minimalist-square.css: -------------------------------------------------------------------------------- 1 | /* 2 | AnythingSlider v1.8+ Minimalist Square theme 3 | By Rob Garrison 4 | */ 5 | /***************************** 6 | SET DEFAULT DIMENSIONS HERE 7 | *****************************/ 8 | /* change the ID & dimensions to match your slider */ 9 | #slider { 10 | width: 700px; 11 | height: 390px; 12 | list-style: none; 13 | /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */ 14 | overflow-y: auto; 15 | overflow-x: hidden; 16 | } 17 | 18 | /****************** 19 | SET STYLING HERE 20 | ****************** 21 | ================================= 22 | Default state (no keyboard focus) 23 | ==================================*/ 24 | /* Overall Wrapper */ 25 | .anythingSlider-minimalist-square { 26 | margin: 0 auto; 27 | /* 30px right & left padding for the navigation arrows */ 28 | padding: 0 30px; 29 | } 30 | /* slider window - top & bottom borders, default state */ 31 | .anythingSlider-minimalist-square .anythingWindow { 32 | border-top: 3px solid #333; 33 | border-bottom: 3px solid #333; 34 | } 35 | /* Navigation buttons + start/stop button, default state */ 36 | .anythingSlider-minimalist-square .anythingControls a { 37 | background-color: #333; 38 | color: #fff; 39 | border: #000 1px solid; 40 | } 41 | /* Navigation current button, default state */ 42 | .anythingSlider-minimalist-square .anythingControls a.cur, 43 | .anythingSlider-minimalist-square .anythingControls a:hover { 44 | background-color: #777; 45 | color: #000; 46 | } 47 | 48 | /* start-stop button, stopped, default state */ 49 | .anythingSlider-minimalist-square .anythingControls a.start-stop { 50 | background: #040; 51 | color: #ddd; 52 | /* top shadow */ 53 | -moz-box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5); 54 | -webkit-box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5); 55 | box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5); 56 | } 57 | /* start-stop button, playing, default state */ 58 | .anythingSlider-minimalist-square .anythingControls a.start-stop.playing { 59 | background-color: #800; 60 | } 61 | 62 | /* start-stop button, default hovered text color (when visible) */ 63 | /* hide nav/start-stop background image shadow on hover - makes the button appear to come forward */ 64 | .anythingSlider-minimalist-square .anythingControls a.start-stop:hover, 65 | .anythingSlider-minimalist-square .anythingControls a.start-stop.hover, 66 | .anythingSlider-minimalist-square .anythingControls a.start-stop .anythingControls ul a:hover { 67 | color: #fff; 68 | /* clear top shadow */ 69 | -moz-box-shadow: inset 0 0 0 #000000; 70 | -webkit-box-shadow: inset 0 0 0 #000000; 71 | box-shadow: inset 0 0 0 #000000; 72 | } 73 | 74 | /* 75 | ================================= 76 | Active State (has keyboard focus) 77 | ================================= 78 | */ 79 | /* slider window - top & bottom borders, active state */ 80 | .anythingSlider-minimalist-square.activeSlider .anythingWindow { 81 | border-color: #164054; 82 | } 83 | 84 | /* Navigation buttons, active state */ 85 | .anythingSlider-minimalist-square.activeSlider .anythingControls a { 86 | background-color: #164054; 87 | color: #fff; 88 | } 89 | /* Navigation current button, active state */ 90 | .anythingSlider-minimalist-square.activeSlider .anythingControls a.cur, 91 | .anythingSlider-minimalist-square.activeSlider .anythingControls a:hover { 92 | background-color: #fff; 93 | color: #000; 94 | } 95 | 96 | /* start-stop button, stopped, active state */ 97 | .anythingSlider-minimalist-square.activeSlider .anythingControls a.start-stop { 98 | background: #080; 99 | color: #fff; 100 | } 101 | /* start-stop button, playing, active state */ 102 | .anythingSlider-minimalist-square.activeSlider .anythingControls a.start-stop.playing { 103 | color: #fff; 104 | background: #f00; 105 | } 106 | /* start-stop button, active slider hovered text color (when visible) */ 107 | .anythingSlider-minimalist-square.activeSlider .start-stop:hover, 108 | .anythingSlider-minimalist-square.activeSlider .start-stop.hover { 109 | color: #fff; 110 | } 111 | 112 | /************************ 113 | NAVIGATION POSITIONING 114 | ************************/ 115 | /* Navigation Arrows */ 116 | .anythingSlider-minimalist-square .arrow { 117 | top: 50%; 118 | position: absolute; 119 | display: block; 120 | } 121 | 122 | .anythingSlider-minimalist-square .arrow a { 123 | display: block; 124 | width: 30px; 125 | height: 40px; 126 | margin: -20px 0 0 0; /* half height of image */ 127 | text-align: center; 128 | outline: 0; 129 | background: url(../images/arrows-minimalist.png) no-repeat; 130 | } 131 | 132 | /* back arrow */ 133 | .anythingSlider-minimalist-square .back { left: 0; } 134 | .anythingSlider-minimalist-square .back a { background-position: left bottom; } 135 | .anythingSlider-minimalist-square .back a:hover, 136 | .anythingSlider-minimalist-square .back a.hover { background-position: left top; } 137 | /* forward arrow */ 138 | .anythingSlider-minimalist-square .forward { right: 0; } 139 | .anythingSlider-minimalist-square .forward a { background-position: right bottom; } 140 | .anythingSlider-minimalist-square .forward a:hover, 141 | .anythingSlider-minimalist-square .forward a.hover { background-position: right top; } 142 | 143 | /* Navigation Links */ 144 | .anythingSlider-minimalist-square .anythingControls { 145 | height: 15px; /* limit height, needed for IE9 of all things */ 146 | outline: 0; 147 | display: none; 148 | float: right; 149 | position: absolute; 150 | bottom: 5px; 151 | right: 20px; 152 | margin: 0 45px; 153 | z-index: 100; 154 | opacity: 0.90; 155 | filter: alpha(opacity=90); 156 | } 157 | 158 | .anythingSlider-minimalist-square .anythingControls ul { 159 | margin: 0; 160 | padding: 0; 161 | float: left; 162 | } 163 | .anythingSlider-minimalist-square .anythingControls ul li { 164 | list-style: none; 165 | float: left; 166 | margin: 0; 167 | padding: 0; 168 | } 169 | .anythingSlider-minimalist-square .anythingControls ul a { 170 | display: inline-block; 171 | width: 10px; 172 | height: 10px; 173 | margin: 3px; 174 | padding: 0; 175 | text-decoration: none; 176 | text-align: center; 177 | outline: 0; 178 | } 179 | 180 | .anythingSlider-minimalist-square .anythingControls span { 181 | display: block; 182 | visibility: hidden; 183 | } 184 | 185 | /* navigationSize window */ 186 | .anythingSlider-minimalist-square .anythingControls .anythingNavWindow { 187 | 188 | overflow: hidden; 189 | float: left; 190 | } 191 | /* navigationSize nav arrow positioning */ 192 | .anythingSlider-minimalist-square .anythingControls li.prev span, 193 | .anythingSlider-minimalist-square .anythingControls li.next span { 194 | visibility: visible; 195 | position: relative; 196 | top: -6px; /* bring navigationSize text arrows into view */ 197 | } 198 | 199 | /* Autoplay Start/Stop button */ 200 | .anythingSlider-minimalist-square .anythingControls .start-stop { 201 | margin: 3px; 202 | padding: 0; 203 | display: inline-block; 204 | width: 10px; 205 | height: 10px; 206 | text-align: center; 207 | text-decoration: none; 208 | z-index: 100; 209 | outline: 0; 210 | } 211 | 212 | /*********************** 213 | IE8 AND OLDER STYLING 214 | ***********************/ 215 | /* Navigation Arrows */ 216 | .as-oldie .anythingSlider-minimalist-square .arrow { 217 | top: 45%; 218 | } 219 | .as-oldie .anythingSlider-minimalist-square .arrow a { 220 | margin: 0; 221 | } 222 | 223 | /*********************** 224 | COMMON SLIDER STYLING 225 | ***********************/ 226 | /* Overall Wrapper */ 227 | .anythingSlider { 228 | display: block; 229 | overflow: visible !important; 230 | position: relative; 231 | } 232 | /* anythingSlider viewport window */ 233 | .anythingSlider .anythingWindow { 234 | overflow: hidden; 235 | position: relative; 236 | width: 100%; 237 | height: 100%; 238 | } 239 | /* anythingSlider base (original element) */ 240 | .anythingSlider .anythingBase { 241 | background: transparent; 242 | list-style: none; 243 | position: absolute; 244 | overflow: visible !important; 245 | top: 0; 246 | left: 0; 247 | margin: 0; 248 | padding: 0; 249 | } 250 | 251 | /* Navigation arrow text; indent moved to span inside "a", for IE7; 252 | apparently, a negative text-indent on an "a" link moves the link as well as the text */ 253 | .anythingSlider .arrow span { 254 | display: block; 255 | visibility: hidden; 256 | } 257 | /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ 258 | .anythingSlider .arrow.disabled { 259 | display: none; 260 | } 261 | /* all panels inside the slider; horizontal mode */ 262 | .anythingSlider .panel { 263 | background: transparent; 264 | display: block; 265 | overflow: hidden; 266 | float: left; 267 | padding: 0; 268 | margin: 0; 269 | } 270 | /* vertical mode */ 271 | .anythingSlider .vertical .panel { 272 | float: none; 273 | } 274 | 275 | /* fade mode */ 276 | .anythingSlider .fade .panel { 277 | float: none; 278 | position: absolute; 279 | top: 0; 280 | left: 0; 281 | z-index: 0; 282 | } 283 | /* fade mode active page - visible & on top */ 284 | .anythingSlider .fade .activePage { 285 | z-index: 1; 286 | } 287 | 288 | /*********************** 289 | RTL STYLING 290 | ***********************/ 291 | /* slider autoplay right-to-left, reverse order of nav links to look better */ 292 | .anythingSlider.rtl .anythingWindow { 293 | direction: ltr; 294 | unicode-bidi: bidi-override; 295 | } 296 | .anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */ 297 | .anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */ 298 | .anythingSlider.rtl .start-stop { /* float: right; */ } /* move start/stop button - in case you want to switch sides */ 299 | 300 | /* probably not necessary, but added just in case */ 301 | .anythingSlider .anythingWindow, 302 | .anythingSlider .anythingControls ul a, 303 | .anythingSlider .arrow a, 304 | .anythingSlider .start-stop { 305 | transition-duration: 0s; 306 | -o-transition-duration: 0s; 307 | -moz-transition-duration: 0s; 308 | -webkit-transition-duration: 0s; 309 | } 310 | -------------------------------------------------------------------------------- /css3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | AnythingSlider CSS3 Demo 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 60 | 61 | 62 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 99 | 100 | 101 |

AnythingSlider CSS3 Demo

102 | 103 |

FX extension using animate.css library

104 | 105 |

Change first slide animations:

106 |

107 | In Animation: 108 | Out Animation: 109 | 110 |

111 | 112 | 113 | 114 | 121 | 122 | 123 | 124 |

125 | * Note: The third slide is using "flipInX" and "flipOutX" which as of 12/2011 is only supported by Webkit, Firefox nightlies and IE10. 126 |

127 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /demos/colorbox/border.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/colorbox/border.png -------------------------------------------------------------------------------- /demos/colorbox/colorbox.css: -------------------------------------------------------------------------------- 1 | /* 2 | ColorBox Core Style: 3 | The following CSS is consistent between example themes and should not be altered. 4 | */ 5 | #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} 6 | #cboxOverlay{position:fixed; width:100%; height:100%;} 7 | #cboxMiddleLeft, #cboxBottomLeft{clear:left;} 8 | #cboxContent{position:relative;} 9 | #cboxLoadedContent{overflow:auto;} 10 | #cboxTitle{margin:0;} 11 | #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} 12 | #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} 13 | .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;} 14 | .cboxIframe{width:100%; height:100%; display:block; border:0;} 15 | #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;} 16 | 17 | /* 18 | User Style: 19 | Change the following styles to modify the appearance of ColorBox. They are 20 | ordered & tabbed in a way that represents the nesting of the generated HTML. 21 | */ 22 | #cboxOverlay{background:url(overlay.png) repeat 0 0;} 23 | #colorbox{} 24 | #cboxTopLeft{width:21px; height:21px; background:url(controls.png) no-repeat -101px 0;} 25 | #cboxTopRight{width:21px; height:21px; background:url(controls.png) no-repeat -130px 0;} 26 | #cboxBottomLeft{width:21px; height:21px; background:url(controls.png) no-repeat -101px -29px;} 27 | #cboxBottomRight{width:21px; height:21px; background:url(controls.png) no-repeat -130px -29px;} 28 | #cboxMiddleLeft{width:21px; background:url(controls.png) left top repeat-y;} 29 | #cboxMiddleRight{width:21px; background:url(controls.png) right top repeat-y;} 30 | #cboxTopCenter{height:21px; background:url(border.png) 0 0 repeat-x;} 31 | #cboxBottomCenter{height:21px; background:url(border.png) 0 -29px repeat-x;} 32 | #cboxContent{background:#fff; overflow:hidden;} 33 | .cboxIframe{background:#fff;} 34 | #cboxError{padding:50px; border:1px solid #ccc;} 35 | #cboxLoadedContent{margin-bottom:28px;} 36 | #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;} 37 | #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;} 38 | #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;} 39 | #cboxPrevious{position:absolute; bottom:0; left:0; background:url(controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;} 40 | #cboxPrevious:hover{background-position:-75px -25px;} 41 | #cboxNext{position:absolute; bottom:0; left:27px; background:url(controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;} 42 | #cboxNext:hover{background-position:-50px -25px;} 43 | #cboxLoadingOverlay{background:url(loading_background.png) no-repeat center center;} 44 | #cboxLoadingGraphic{background:url(loading.gif) no-repeat center center;} 45 | #cboxClose{position:absolute; bottom:0; right:0; background:url(controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;} 46 | #cboxClose:hover{background-position:-25px -25px;} 47 | 48 | /* 49 | The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill 50 | when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9. 51 | See: http://jacklmoore.com/notes/ie-transparency-problems/ 52 | */ 53 | .cboxIE #cboxTopLeft, 54 | .cboxIE #cboxTopCenter, 55 | .cboxIE #cboxTopRight, 56 | .cboxIE #cboxBottomLeft, 57 | .cboxIE #cboxBottomCenter, 58 | .cboxIE #cboxBottomRight, 59 | .cboxIE #cboxMiddleLeft, 60 | .cboxIE #cboxMiddleRight { 61 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); 62 | } 63 | 64 | /* 65 | The following provides PNG transparency support for IE6 66 | Feel free to remove this and the /ie6/ directory if you have dropped IE6 support. 67 | */ 68 | .cboxIE6 #cboxTopLeft{background:url(ie6/borderTopLeft.png);} 69 | .cboxIE6 #cboxTopCenter{background:url(ie6/borderTopCenter.png);} 70 | .cboxIE6 #cboxTopRight{background:url(ie6/borderTopRight.png);} 71 | .cboxIE6 #cboxBottomLeft{background:url(ie6/borderBottomLeft.png);} 72 | .cboxIE6 #cboxBottomCenter{background:url(ie6/borderBottomCenter.png);} 73 | .cboxIE6 #cboxBottomRight{background:url(ie6/borderBottomRight.png);} 74 | .cboxIE6 #cboxMiddleLeft{background:url(ie6/borderMiddleLeft.png);} 75 | .cboxIE6 #cboxMiddleRight{background:url(ie6/borderMiddleRight.png);} 76 | 77 | .cboxIE6 #cboxTopLeft, 78 | .cboxIE6 #cboxTopCenter, 79 | .cboxIE6 #cboxTopRight, 80 | .cboxIE6 #cboxBottomLeft, 81 | .cboxIE6 #cboxBottomCenter, 82 | .cboxIE6 #cboxBottomRight, 83 | .cboxIE6 #cboxMiddleLeft, 84 | .cboxIE6 #cboxMiddleRight { 85 | _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')"); 86 | } 87 | -------------------------------------------------------------------------------- /demos/colorbox/controls.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/colorbox/controls.png -------------------------------------------------------------------------------- /demos/colorbox/ie6/borderBottomCenter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/colorbox/ie6/borderBottomCenter.png -------------------------------------------------------------------------------- /demos/colorbox/ie6/borderBottomLeft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/colorbox/ie6/borderBottomLeft.png -------------------------------------------------------------------------------- /demos/colorbox/ie6/borderBottomRight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/colorbox/ie6/borderBottomRight.png -------------------------------------------------------------------------------- /demos/colorbox/ie6/borderMiddleLeft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/colorbox/ie6/borderMiddleLeft.png -------------------------------------------------------------------------------- /demos/colorbox/ie6/borderMiddleRight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/colorbox/ie6/borderMiddleRight.png -------------------------------------------------------------------------------- /demos/colorbox/ie6/borderTopCenter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/colorbox/ie6/borderTopCenter.png -------------------------------------------------------------------------------- /demos/colorbox/ie6/borderTopLeft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/colorbox/ie6/borderTopLeft.png -------------------------------------------------------------------------------- /demos/colorbox/ie6/borderTopRight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/colorbox/ie6/borderTopRight.png -------------------------------------------------------------------------------- /demos/colorbox/jquery.colorbox-min.js: -------------------------------------------------------------------------------- 1 | // ColorBox v1.3.23 - A lightweight customizable lightbox plugin 2 | // Copyright (c) 2013 Jack Moore - jack@colorpowered.com 3 | // Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php 4 | (function(b,r,ea){function c(a,f,c){a=r.createElement(a);f&&(a.id=q+f);c&&(a.style.cssText=c);return b(a)}function M(a){var b=j.length;a=(p+a)%b;return 0>a?b+a:a}function n(a,b){return Math.round((/%/.test(a)?("x"===b?m.width():m.height())/100:1)*parseInt(a,10))}function fa(b){return a.photo||/\.(gif|png|jp(e|g|eg)|bmp|ico)((#|\?).*)?$/i.test(b)}function ga(){var B,f=b.data(k,v);null==f?(a=b.extend({},R),console&&console.log&&console.log("Error: cboxElement missing settings object")):a=b.extend({}, f);for(B in a)b.isFunction(a[B])&&"on"!==B.slice(0,2)&&(a[B]=a[B].call(k));a.rel=a.rel||k.rel||b(k).data("rel")||"nofollow";a.href=a.href||b(k).attr("href");a.title=a.title||k.title;"string"===typeof a.href&&(a.href=b.trim(a.href))}function D(a,f){b(r).trigger(a);b("*",h).trigger(a);f&&f.call(k)}function ma(){var b,f=q+"Slideshow_",c="click."+q,e,t;a.slideshow&&j[1]?(e=function(){G.html(a.slideshowStop).unbind(c).bind(S,function(){if(a.loop||j[p+1])b=setTimeout(g.next,a.slideshowSpeed)}).bind(T,function(){clearTimeout(b)}).one(c+ " "+U,t);h.removeClass(f+"off").addClass(f+"on");b=setTimeout(g.next,a.slideshowSpeed)},t=function(){clearTimeout(b);G.html(a.slideshowStart).unbind([S,T,U,c].join(" ")).one(c,function(){g.next();e()});h.removeClass(f+"on").addClass(f+"off")},a.slideshowAuto?e():t()):h.removeClass(f+"off "+f+"on")}function ha(c){N||(k=c,ga(),j=b(k),p=0,"nofollow"!==a.rel&&(j=b("."+F).filter(function(){var c=b.data(this,v),B;c&&(B=b(this).data("rel")||c.rel||this.rel);return B===a.rel}),p=j.index(k),-1===p&&(j=j.add(k), p=j.length-1)),w||(w=H=!0,h.show(),a.returnFocus&&(b(k).blur(),b(r).one(ia,function(){b(k).focus()})),C.css({opacity:+a.opacity,cursor:a.overlayClose?"pointer":"auto"}).show(),a.w=n(a.initialWidth,"x"),a.h=n(a.initialHeight,"y"),g.position(),O&&m.bind("resize."+P+" scroll."+P,function(){C.css({width:m.width(),height:m.height(),top:m.scrollTop(),left:m.scrollLeft()})}).trigger("resize."+P),D(ja,a.onOpen),V.add(W).hide(),X.html(a.close).show()),g.load(!0))}function ka(){!h&&r.body&&(Y=!1,m=b(ea),h= c(e).attr({id:v,"class":I?q+(O?"IE6":"IE"):""}).hide(),C=c(e,"Overlay",O?"position:absolute":"").hide(),Z=c(e,"LoadingOverlay").add(c(e,"LoadingGraphic")),E=c(e,"Wrapper"),u=c(e,"Content").append(l=c(e,"LoadedContent","width:0; height:0; overflow:hidden"),W=c(e,"Title"),$=c(e,"Current"),J=c(e,"Next"),K=c(e,"Previous"),G=c(e,"Slideshow").bind(ja,ma),X=c(e,"Close")),E.append(c(e).append(c(e,"TopLeft"),aa=c(e,"TopCenter"),c(e,"TopRight")),c(e,!1,"clear:left").append(ba=c(e,"MiddleLeft"),u,ca=c(e,"MiddleRight")), c(e,!1,"clear:left").append(c(e,"BottomLeft"),da=c(e,"BottomCenter"),c(e,"BottomRight"))).find("div div").css({"float":"left"}),L=c(e,!1,"position:absolute; width:9999px; visibility:hidden; display:none"),V=J.add(K).add($).add(G),b(r.body).append(C,h.append(E,L)))}var R={transition:"elastic",speed:300,width:!1,initialWidth:"600",innerWidth:!1,maxWidth:!1,height:!1,initialHeight:"450",innerHeight:!1,maxHeight:!1,scalePhotos:!0,scrolling:!0,inline:!1,html:!1,iframe:!1,fastIframe:!0,photo:!1,href:!1, title:!1,rel:!1,opacity:0.9,preloading:!0,current:"image {current} of {total}",previous:"previous",next:"next",close:"close",xhrError:"This content failed to load.",imgError:"This image failed to load.",open:!1,returnFocus:!0,reposition:!0,loop:!0,slideshow:!1,slideshowAuto:!0,slideshowSpeed:2500,slideshowStart:"start slideshow",slideshowStop:"stop slideshow",onOpen:!1,onLoad:!1,onComplete:!1,onCleanup:!1,onClosed:!1,overlayClose:!0,escKey:!0,arrowKey:!0,top:!1,bottom:!1,left:!1,right:!1,fixed:!1, data:void 0},v="colorbox",q="cbox",F=q+"Element",ja=q+"_open",T=q+"_load",S=q+"_complete",U=q+"_cleanup",ia=q+"_closed",Q=q+"_purge",I=!b.support.leadingWhitespace,O=I&&!ea.XMLHttpRequest,P=q+"_IE6",C,h,E,u,aa,ba,ca,da,j,m,l,L,Z,W,$,G,J,K,X,V,a,x,y,z,A,k,p,d,w,H,N,la,g,e="div",Y;b.colorbox||(b(ka),g=b.fn[v]=b[v]=function(c,e){var d=this;c=c||{};ka();var s;h?(Y||(Y=!0,x=aa.height()+da.height()+u.outerHeight(!0)-u.height(),y=ba.width()+ca.width()+u.outerWidth(!0)-u.width(),z=l.outerHeight(!0),A=l.outerWidth(!0), J.click(function(){g.next()}),K.click(function(){g.prev()}),X.click(function(){g.close()}),C.click(function(){a.overlayClose&&g.close()}),b(r).bind("keydown."+q,function(b){var c=b.keyCode;w&&(a.escKey&&27===c)&&(b.preventDefault(),g.close());w&&(a.arrowKey&&j[1])&&(37===c?(b.preventDefault(),K.click()):39===c&&(b.preventDefault(),J.click()))}),b(r).delegate("."+F,"click",function(a){1"),c.open=!0;else if(!d[0])return d;e&&(c.onComplete=e);d.each(function(){b.data(this,v,b.extend({},b.data(this,v)||R,c))}).addClass(F);(b.isFunction(c.open)&&c.open.call(d)||c.open)&&ha(d[0])}return d},g.position=function(b,c){function e(a){aa[0].style.width=da[0].style.width=u[0].style.width=parseInt(a.style.width,10)-y+"px";u[0].style.height=ba[0].style.height=ca[0].style.height=parseInt(a.style.height,10)-x+"px"}var d,j=d=0,l=h.offset(),p,k;m.unbind("resize."+q);h.css({top:-9E4,left:-9E4}); p=m.scrollTop();k=m.scrollLeft();a.fixed&&!O?(l.top-=p,l.left-=k,h.css({position:"fixed"})):(d=p,j=k,h.css({position:"absolute"}));j=!1!==a.right?j+Math.max(m.width()-a.w-A-y-n(a.right,"x"),0):!1!==a.left?j+n(a.left,"x"):j+Math.round(Math.max(m.width()-a.w-A-y,0)/2);d=!1!==a.bottom?d+Math.max(m.height()-a.h-z-x-n(a.bottom,"y"),0):!1!==a.top?d+n(a.top,"y"):d+Math.round(Math.max(m.height()-a.h-z-x,0)/2);h.css({top:l.top,left:l.left});b=h.width()===a.w+A&&h.height()===a.h+z?0:b||0;E[0].style.width=E[0].style.height= "9999px";d={width:a.w+A+y,height:a.h+z+x,top:d,left:j};0===b&&h.css(d);h.dequeue().animate(d,{duration:b,complete:function(){e(this);H=!1;E[0].style.width=a.w+A+y+"px";E[0].style.height=a.h+z+x+"px";a.reposition&&setTimeout(function(){m.bind("resize."+q,g.position)},1);c&&c()},step:function(){e(this)}})},g.resize=function(b){w&&(b=b||{},b.width&&(a.w=n(b.width,"x")-A-y),b.innerWidth&&(a.w=n(b.innerWidth,"x")),l.css({width:a.w}),b.height&&(a.h=n(b.height,"y")-z-x),b.innerHeight&&(a.h=n(b.innerHeight, "y")),!b.innerHeight&&!b.height&&(l.css({height:"auto"}),a.h=l.height()),l.css({height:a.h}),g.position("none"===a.transition?0:a.speed))},g.prep=function(k){function f(){a.w=a.w||l.width();a.w=a.mw&&a.mwa.mw&&(b=(d.width-a.mw)/d.width,m()),a.mh&&d.height>a.mh&&(b=(d.height- a.mh)/d.height,m()));a.h&&(d.style.marginTop=Math.max(a.h-d.height,0)/2+"px");if(j[1]&&(a.loop||j[p+1]))d.style.cursor="pointer",d.onclick=function(){g.next()};I&&(d.style.msInterpolationMode="bicubic");setTimeout(function(){s(d)},1)}),setTimeout(function(){d.src=f},1)):f&&L.load(f,a.data,function(d,f){s("error"===f?c(e,"Error").html(a.xhrError):b(this).contents())})},g.next=function(){if(!H&&j[1]&&(a.loop||j[p+1]))p=M(1),g.load()},g.prev=function(){if(!H&&j[1]&&(a.loop||p))p=M(-1),g.load()},g.close= function(){w&&!N&&(N=!0,w=!1,D(U,a.onCleanup),m.unbind("."+q+" ."+P),C.fadeTo(200,0),h.stop().fadeTo(300,0,function(){h.add(C).css({opacity:1,cursor:"auto"}).hide();D(Q);l.remove();setTimeout(function(){N=!1;D(ia,a.onClosed)},1)}))},g.remove=function(){b([]).add(h).add(C).remove();h=null;b("."+F).removeData(v).removeClass(F);b(r).undelegate("."+F)},g.element=function(){return b(k)},g.settings=R)})(jQuery,document,window); 5 | -------------------------------------------------------------------------------- /demos/colorbox/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/colorbox/loading.gif -------------------------------------------------------------------------------- /demos/colorbox/loading_background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/colorbox/loading_background.png -------------------------------------------------------------------------------- /demos/colorbox/overlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/colorbox/overlay.png -------------------------------------------------------------------------------- /demos/css/page.css: -------------------------------------------------------------------------------- 1 | /******************** 2 | Overall Demo pages 3 | ********************/ 4 | body, p { font: 14px Georgia, Serif; background: #fff; color: #000; } 5 | a, a img { border: 0; text-decoration: none; } 6 | 7 | #page-wrap, #demo2 { width: 90%; padding: 0 15px; margin: 0 auto 50px; position: relative; } 8 | 9 | h1 { font: bold 60px Helvetica, Sans-Serif; letter-spacing: -2px; margin: 20px 0; text-align: center; } 10 | h2 { font: bold 30px Helvetica, Sans-Serif; letter-spacing: -1px; margin: 0 0 10px 0; color: #002266; } 11 | h2.title { text-align: center; } 12 | h3 { font: bold 20px Georgia, Serif; margin: 0 0 10px 0; color: #003388; } 13 | h5, .header { font: bold 15px Georgia, Serif; text-align: center; } 14 | pre, code { font: 13px/1.8 Monaco, MonoSpace; margin: 0 0 15px 0; padding: 5px; background: #f5f5f5; block: inline; width: 100%; overflow-x: auto; } 15 | blockquote { margin-left: 30px; } 16 | 17 | ul { margin: 0; padding-left: 35px; } 18 | ul li { font: 15px Georgia, Serif; margin: 0 0 8px 0; } 19 | 20 | #nav { display: block; width: 90%; margin: 10px auto; text-align: center; line-height: 3em; } 21 | #nav a { text-align: center; background: black; color: white; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 10px; white-space: nowrap; } 22 | #nav a.git { background: #006; } 23 | #nav a.play { background: #060; } 24 | #nav a.issue { background: #600; } 25 | #nav a:hover, #nav a.current { background: #666; } 26 | 27 | .themeselector, .ani { margin: 0 auto; text-align: center; } 28 | 29 | #status { color: #00a; font-weight: bold; } 30 | .alert { color: #f00; font-weight: bold; } 31 | .alert a, .attention { color: #a00; } 32 | .data { width: 100%; border: #555 1px solid; border-collapse: collapse; } 33 | .data td, .data th { border: #555 1px solid; padding: 0 5px; } 34 | .data th { background: #eee; } 35 | .data .col { width: 200px; } 36 | .spacer { height: 50px; } 37 | 38 | /***************** 39 | Main demo page 40 | *****************/ 41 | #main #slider1 { width: 800px; height: 390px; list-style: none; } 42 | #main #slider2 { width: 800px; height: 390px; list-style: none; } 43 | 44 | /* Set slider1 panel 5 stuff - adding padding directly to the panel will 45 | shift panels after it, so we need a wrapper */ 46 | #main #slider1 .panel5 ul { width: 200px; margin: 0 5px; } 47 | 48 | /* Set slider2 panel sizes, Main & FX demo pages */ 49 | #slider2 .panel1 { width: 500px; height: 350px; } 50 | #slider2 .panel2 { width: 450px; height: 420px; } 51 | #slider2 .panel3 { width: 680px; height: 317px; } 52 | #slider2 .panel4 { width: 100%; } /* With no specific size, it defaults to wrapper size; except in IE7, it needs a width defined, so set to 100% */ 53 | #slider2 .panel5 { width: 680px; height: 317px; } 54 | #slider2 .panel6 { width: 450px; height: 300px; } 55 | 56 | /* For Specific Slides, these also apply to FX demo pages */ 57 | .textSlide { padding: 10px 30px; } 58 | .textSlide h3 { font: 20px Georgia, Serif; } 59 | .textSlide h4 { text-transform: uppercase; font: 15px Georgia, Serif; margin: 10px 0; } 60 | .textSlide ul { list-style: disc; margin: 0; padding-left: 20px; } 61 | .textSlide ul li { display: list-item; } 62 | .rightside { float: right; margin: 0 0 2px 10px; } 63 | 64 | .quoteSlide { padding: 20px; } 65 | .quoteSlide blockquote { font: italic 24px/1.5 Georgia, Serif; text-align: center; color: #444; margin: 0 0 10px 0; } 66 | .quoteSlide p { text-align: center; } 67 | 68 | /*************************** 69 | FX Demo Page 70 | ***************************/ 71 | /* Demo page accordions */ 72 | .accordion { width: 70%; margin: 0 auto; } 73 | .accordion .ui-widget-content a { color: #004499; } 74 | 75 | /** Demo 1 **/ 76 | /* colorbox images to full size */ 77 | #demo2 #slider1 { width: 400px; height: 300px; list-style: none; } 78 | .cboxPhoto { width: 100%; height: 100%; margin: 0 !important; } 79 | #cboxTitle { color: #000 !important; } 80 | 81 | /* Change metallic slider defaults to show thumbnails - 82 | using #demo2 (page wrapper) to increase this CSS priority */ 83 | #demo2 div.anythingControls { bottom: 25px; } 84 | #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; } 85 | #demo2 div.anythingSlider-metallic .thumbNav a span { visibility: visible; } 86 | 87 | /* border around image to show current page */ 88 | #demo2 div.anythingSlider-metallic .thumbNav a:hover, 89 | #demo2 div.anythingSlider-metallic .thumbNav a.cur { border-color: #fff; } 90 | /* reposition the start/stop button */ 91 | #demo2 div.anythingSlider-metallic .start-stop { margin-top: 15px; } 92 | 93 | /** Demo 2 **/ 94 | #demo2 #slider2 { width: 600px; height: 350px; list-style: none; } 95 | 96 | /** Demo 3 **/ 97 | #demo2 #slider3 { width: 500px; height: 400px; list-style: none; } 98 | 99 | /* expand image */ 100 | #slider3 img { width: 100%; height: 100%; position: relative; } 101 | #slider3 .panel { position: relative; } 102 | 103 | /* position caption close button */ 104 | .caption-top .close, 105 | .caption-right .close, 106 | .caption-bottom .close, 107 | .caption-left .close { font-size: 80%; cursor: pointer; float: right; display: inline-block; } 108 | 109 | /* captions */ 110 | /* set to position: relative here in case javascript is disabled, script sets captions to position: absolute */ 111 | #slider3 .caption-top, 112 | #slider3 .caption-right, 113 | #slider3 .caption-bottom, 114 | #slider3 .caption-left { background: #000; color: #fff; padding: 10px; margin: 0; position: absolute; z-index: 10; opacity: .8; filter: alpha(opacity=80); } 115 | 116 | /* Top caption - padding is included in the width (480px here, 500px in the script), same for height */ 117 | #slider3 .caption-top { left: 0; top: 0; width: 480px; height: 30px; } 118 | 119 | /* Right caption - padding is included in the width (130px here, 150px in the script), same for height */ 120 | #slider3 .caption-right { right: 0; bottom: 0; width: 130px; height: 180px; } 121 | 122 | /* Bottom caption - padding is included in the width (480px here, 500px in the script), same for height */ 123 | #slider3 .caption-bottom { left: 0; bottom: 0; width: 480px; height: 30px; } 124 | 125 | /* Left caption - padding is included in the width (130px here, 150px in the script), same for height */ 126 | #slider3 .caption-left { left: 0; bottom: 0; width: 130px; height: 180px; } 127 | 128 | /****************** 129 | Expand demo page 130 | ******************/ 131 | #wrapper1 { width: 100%; height: 300px; margin: 0 auto; } 132 | #wrapper2 { width: 50%; height: 300px; margin: 0 auto; } 133 | 134 | /* div-wrappers for aspect ratio demos: */ 135 | #wrapper3 { width: 75%; height: 500px; margin: 0 auto; border: solid red; } 136 | #wrapper4 { width: 75%; height: 500px; margin: 0 auto; border: solid green; } 137 | #wrapper5 { width: 75%; height: 500px; margin: 0 auto; border: solid green; } 138 | #wrapper6 { width: 75%; height: 500px; margin: 0 auto; border: solid green; } 139 | #wrapper7 { width: 75%; height: 200px; margin: 0 auto; border: solid green; } 140 | #wrapper8 { width: 75%; height: 200px; margin: 0 auto; border: solid green; } 141 | 142 | 143 | #expand #slider1, 144 | #expand #slider2 { width: 100%; height: 300px; list-style: none; } 145 | #expand p { width: 75%; margin: 0 auto; } 146 | 147 | /* The next one is really vital since it is used to calculate the aspect ratio from. */ 148 | #expand #slider4 { width: 680px; height: 317px; } 149 | 150 | body#expand h2, 151 | body#expand h3 { text-align: center; } 152 | 153 | /*************************** 154 | Video Compatibility table 155 | ***************************/ 156 | .video-info { width: 700px; margin: 0 auto; margin-top: 50px; font-size: 18px; } 157 | .video-info h2 { text-align: center; } 158 | .video-info ul, 159 | .video-info li { margin: 0; } 160 | .video-info sup { font-size: 12px; } 161 | .video-info th.header { width: 25px; } 162 | .good, .bad, .prob { color: #ddd; text-align: center; } 163 | .good { background: #080; } 164 | .bad { background: #800; } 165 | .prob { background: #880; } 166 | .group { border: #000 1px solid; } 167 | 168 | /************************** 169 | Updating Video 170 | **************************/ 171 | #updatingVideoDemo div#slider1, ul#slider1 div { 172 | width: 300px; 173 | height: 200px; 174 | list-style: none; 175 | } 176 | 177 | #updatingVideoDemo div#slider2, div#slider2 div { 178 | width: 300px; 179 | height: 200px; 180 | list-style: none; 181 | } 182 | 183 | #updatingVideoDemo .updatingVideoDemoInputs { 184 | clear: both; 185 | left: 50%; 186 | margin-left: -200px; 187 | position: relative; 188 | width: 400px; 189 | } 190 | 191 | /****************** 192 | css3 demo page 193 | ******************/ 194 | .animations { margin: 20px 20px 20px 5px; } 195 | .ani { margin-top: 10px; } 196 | 197 | /****************** 198 | tooltips (Jatt) 199 | ******************/ 200 | .tooltip { cursor: pointer; } 201 | #tooltip { 202 | min-width: 100px; 203 | color: #dddddd; 204 | background: #444; 205 | border: 1px solid #777; 206 | padding: 8px; 207 | display: none; 208 | opacity: 0.9; 209 | filter: alpha(opacity=90); 210 | text-align: left; 211 | border-radius: .5em; 212 | -moz-border-radius: .5em; 213 | -webkit-border-radius: .5em; 214 | z-index: 1000; 215 | } 216 | #tooltip .body { 217 | display: block; 218 | text-align: center; 219 | } 220 | -------------------------------------------------------------------------------- /demos/images/251356.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/images/251356.jpg -------------------------------------------------------------------------------- /demos/images/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/images/apple-touch-icon.png -------------------------------------------------------------------------------- /demos/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/images/favicon.ico -------------------------------------------------------------------------------- /demos/images/slide-civil-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/images/slide-civil-1.jpg -------------------------------------------------------------------------------- /demos/images/slide-civil-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/images/slide-civil-2.jpg -------------------------------------------------------------------------------- /demos/images/slide-env-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/images/slide-env-1.jpg -------------------------------------------------------------------------------- /demos/images/slide-env-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/images/slide-env-2.jpg -------------------------------------------------------------------------------- /demos/images/slide-tele-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/images/slide-tele-1.jpg -------------------------------------------------------------------------------- /demos/images/slide-tele-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/images/slide-tele-2.jpg -------------------------------------------------------------------------------- /demos/images/th-slide-civil-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/images/th-slide-civil-1.jpg -------------------------------------------------------------------------------- /demos/images/th-slide-civil-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/images/th-slide-civil-2.jpg -------------------------------------------------------------------------------- /demos/images/th-slide-env-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/images/th-slide-env-1.jpg -------------------------------------------------------------------------------- /demos/images/th-slide-env-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/images/th-slide-env-2.jpg -------------------------------------------------------------------------------- /demos/js/css3demo.js: -------------------------------------------------------------------------------- 1 | $(function(){ 2 | /* css3 demo page */ 3 | // animate.css list as of 12/2011 4 | var animationList = [ 5 | // Attention seekers 6 | 'flash', 'bounce', 'shake', 'tada', 'swing', 'wobble', 'pulse', 7 | // Flippers (currently Webkit, Firefox Nightlies, & IE10 only) 8 | 'flip', 'flipInX', 'flipOutX', 'flipInY', 'flipOutY', 9 | // Fading entrances 10 | 'fadeIn', 'fadeInUp', 'fadeInDown', 'fadeInLeft', 'fadeInRight', 'fadeInUpBig', 'fadeInDownBig', 'fadeInLeftBig', 'fadeInRightBig', 11 | // Fading exits 12 | 'fadeOut', 'fadeOutUp', 'fadeOutDown', 'fadeOutLeft', 'fadeOutRight', 'fadeOutUpBig', 'fadeOutDownBig', 'fadeOutLeftBig', 'fadeOutRightBig', 13 | // Bouncing entrances 14 | 'bounceIn', 'bounceInDown', 'bounceInUp', 'bounceInLeft', 'bounceInRight', 15 | // Bouncing exits 16 | 'bounceOut', 'bounceOutDown', 'bounceOutUp', 'bounceOutLeft', 'bounceOutRight', 17 | // Rotating entrances 18 | 'rotateIn', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft', 'rotateInUpRight', 19 | // Rotating exits 20 | 'rotateOut', 'rotateOutDownLeft', 'rotateOutDownRight', 'rotateOutUpLeft', 'rotateOutUpRight', 21 | // Specials 22 | 'hinge', 'rollIn', 'rollOut' 23 | ], s = '', i, sel; 24 | for (i=0; i'; 26 | } 27 | sel = $('.animations') 28 | .append(s) 29 | .change(function(){ 30 | s = sel.eq(0).val() + ', ' + sel.eq(1).val(); 31 | $('#slider li:not(.cloned):first').removeClass(animationList.join(' ')).attr('data-animate', s); 32 | }); 33 | sel 34 | .eq(0).val('rotateInDownLeft').end() 35 | .eq(1).val('rotateOutDownRight'); 36 | 37 | $('button').click(function(){ 38 | $('#slider').anythingSlider(1); 39 | }); 40 | 41 | 42 | }); -------------------------------------------------------------------------------- /demos/js/demo.js: -------------------------------------------------------------------------------- 1 | $(function(){ 2 | 3 | prettyPrint(); 4 | 5 | $('.accordion').accordion({ 6 | heightStyle : "content", 7 | collapsible : true, 8 | active : false // start compressed 9 | }); 10 | 11 | $('#slider1') 12 | .anythingSlider({ 13 | toggleControls : true, 14 | theme : 'metallic', 15 | navigationFormatter : function(i, panel){ 16 | return ''; 17 | } 18 | }) 19 | .find('.panel:not(.cloned) img') // ignore the cloned panels 20 | .attr('rel','group') // add all slider images to a colorbox group 21 | .colorbox({ 22 | scalePhotos: true, 23 | width : '90%', 24 | height : '90%', 25 | href : function(){ return $(this).attr('src'); }, 26 | title : function(){ return $(this).attr('title') }, 27 | rel : 'group' 28 | }); 29 | 30 | $('#slider2') 31 | .anythingSlider({ 32 | resizeContents : false, 33 | navigationFormatter : function(i, panel){ 34 | return ['Recipe', 'Quote', 'Image', 'Quote #2', 'Image #2', 'Test'][i - 1]; 35 | } 36 | }) 37 | .anythingSliderFx({ 38 | // base FX definitions 39 | // '.selector' : [ 'effect(s)', 'distance/size', 'time', 'easing' ] - 'time' and 'easing' are optional parameters 40 | '.quoteSlide:first > *' : [ 'grow', '24px', '400', 'easeInOutCirc' ], 41 | '.quoteSlide:last' : [ 'top', '500px', '400', 'easeOutElastic' ], 42 | '.expand' : [ 'expand', '10%', '400', 'easeOutBounce' ], 43 | '.textSlide h3' : [ 'top left', '200px', '500', 'easeOutCirc' ], 44 | '.textSlide img,.fade' : [ 'fade' ], 45 | '.textSlide li' : [ 'listLR' ] 46 | /* 47 | // for more precise control, use the "in" and "out" definitions 48 | // in = the animation that occurs when you slide "in" to a panel 49 | ,inFx : { 50 | '.textSlide h3' : { opacity: 1, top : 0, duration: 400, easing : 'easeOutBounce' }, 51 | '.textSlide li' : { opacity: 1, left : 0, duration: 400 }, 52 | '.textSlide img' : { opacity: 1, duration: 400 }, 53 | '.quoteSlide' : { top : 0, duration: 400, easing : 'easeOutElastic' }, 54 | '.expand' : { width: '100%', top: '0%', left: '0%', duration: 400, easing : 'easeOutBounce' } 55 | }, 56 | // out = the animation that occurs when you slide "out" of a panel 57 | // (it also occurs before the "in" animation) - outFx animation time is 1/2 of inFx time 58 | outFx : { 59 | '.textSlide h3' : { opacity: 0, top : '-100px', duration: 200 }, 60 | '.textSlide li:odd' : { opacity: 0, left : '-200px', duration: 200 }, 61 | '.textSlide li:even' : { opacity: 0, left : '200px', duration: 200 }, 62 | '.textSlide img' : { opacity: 0, duration: 200 }, 63 | '.quoteSlide:first' : { top : '-500px', duration: 200 }, 64 | '.quoteSlide:last' : { top : '500px', duration: 200 }, 65 | '.expand' : { width: '10%', top: '50%', left: '50%', duration: 200 }, 66 | } 67 | */ 68 | }); 69 | 70 | $('#slider3') 71 | .anythingSlider({ 72 | navigationFormatter : function(i, panel){ 73 | return ['Top', 'Right', 'Bottom', 'Left'][i - 1]; 74 | } 75 | }) 76 | .anythingSliderFx({ 77 | '.caption-top' : [ 'caption-Top', '50px' ], 78 | '.caption-right' : [ 'caption-Right', '130px', '1000', 'easeOutBounce' ], 79 | '.caption-bottom' : [ 'caption-Bottom', '50px' ], 80 | '.caption-left' : [ 'caption-Left', '130px', '1000', 'easeOutBounce' ] 81 | }) 82 | /* use this code to have the caption slide in and out from the bottom with each panel 83 | .anythingSliderFx({ 84 | inFx: { 85 | '.caption-top' : { top: 0, opacity: 0.8, duration: 400 }, 86 | '.caption-right' : { right: 0, opacity: 0.8, duration: 1000, easing: 'easeOutBounce' }, 87 | '.caption-bottom' : { bottom: 0, opacity: 0.8, duration: 400 }, 88 | '.caption-left' : { left: 0, opacity: 0.8, duration: 1000, easing: 'easeOutBounce' } 89 | }, 90 | outFx: { 91 | '.caption-top' : { top: -50, opacity: 0, duration: 200 }, 92 | '.caption-right' : { right: -150, opacity: 0, duration: 500, easing: 'easeOutBounce' }, 93 | '.caption-bottom' : { bottom: -50, opacity: 0, duration: 200 }, 94 | '.caption-left' : { left: -150, opacity: 0, duration: 500, easing: 'easeOutBounce' } 95 | } 96 | }) 97 | */ 98 | // add a close button (x) to the caption 99 | .find('div[class*=caption]') 100 | .prepend('x') 101 | .find('.close').click(function(){ 102 | var cap = $(this).parent(), 103 | ani = { bottom : -50 }; // bottom 104 | if (cap.is('.caption-top')) { ani = { top: -50 }; } 105 | if (cap.is('.caption-left')) { ani = { left: -150 }; } 106 | if (cap.is('.caption-right')) { ani = { right: -150 }; } 107 | cap.animate(ani, 400); 108 | }); 109 | 110 | /* use this code if you only want the caption to appear when you hover over the panel 111 | .find('.panel') 112 | .find('div[class*=caption]').css({ position: 'absolute' }).end() 113 | .hover(function(){ showCaptions( $(this) ) }, function(){ hideCaptions( $(this) ); }); 114 | 115 | showCaptions = function(el){ 116 | var $this = el; 117 | if ($this.find('.caption-top').length) { $this.find('.caption-top').show().animate({ top: 0, opacity: 1 }, 400); } 118 | if ($this.find('.caption-right').length) { $this.find('.caption-right').show().animate({ right: 0, opacity: 1 }, 400); } 119 | if ($this.find('.caption-bottom').length) { $this.find('.caption-bottom').show().animate({ bottom: 0, opacity: 1 }, 400); } 120 | if ($this.find('.caption-left').length) { $this.find('.caption-left').show().animate({ left: 0, opacity: 1 }, 400); } 121 | }; 122 | hideCaptions = function(el){ 123 | var $this = el; 124 | if ($this.find('.caption-top').length) { $this.find('.caption-top').stop().animate({ top: -50, opacity: 0 }, 400); } 125 | if ($this.find('.caption-right').length) { $this.find('.caption-right').stop().animate({ right: -150, opacity: 0 }, 400); } 126 | if ($this.find('.caption-bottom').length) { $this.find('.caption-bottom').stop().animate({ bottom: -50, opacity: 0 }, 400); } 127 | if ($this.find('.caption-left').length) { $this.find('.caption-left').stop().animate({ left: -150, opacity: 0 }, 400); } 128 | }; 129 | 130 | // hide all captions initially 131 | hideCaptions( $('#slider3 .panel') ); 132 | */ 133 | 134 | }); 135 | -------------------------------------------------------------------------------- /demos/js/jquery.jatt.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Jatt - just another tooltip v2.8.4 min 3 | * http://github.com/Mottie/Jatt 4 | * by Rob Garrison (aka Mottie) 5 | * 6 | * based on tooltip by Alen Grakalic (http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery) 7 | * tooltip modification by Rob G, aka Mottie (http://wowmotty.blogspot.com/) 8 | * 9 | */ 10 | 11 | (function(b,v,t){b.jatt=function(w){var g,r,s=[],u=b("body"),e=b(t),q=b(v),d=b.extend({},b.jatt.defaultOptions,w);b.jatt.ttrelocate=function(g,j){var l=b("#"+j),a=l.outerWidth(),f=l.outerHeight(),c=l.data("options")||d,n={e:[c.xOffset,-f/2,a+c.xOffset,f/2],se:[c.xOffset,c.yOffset,a+c.xOffset,f+c.yOffset],s:[-a/2,c.yOffset,a/2,f+c.yOffset],sw:[-a-c.xOffset,c.yOffset,-c.xOffset,f+c.yOffset],w:[-a-c.xOffset,-f/2,-c.xOffset,f/2],nw:[-a-c.xOffset,-f-c.yOffset,-c.xOffset,-c.yOffset],n:[-a/2,-f-c.yOffset, a/2,-c.yOffset],ne:[c.xOffset,-f-c.yOffset,a+c.xOffset,-c.yOffset]}[c.direction],m=q.scrollTop(),e=q.scrollLeft(),i=b(g.target),h=g.pageX||i.position().left+i.width()/2,k=g.pageY||i.position().top+i.height()/2;c.followMouse||(h=i.outerWidth(),k=i.outerHeight(),k={e:[h,k/2],se:[h,k],s:[h/2,k],sw:[0,k],w:[0,k/2],nw:[0,0],n:[h/2,0],ne:[h,0]},h=i.offset().left+k[c.direction][0],k=i.offset().top+k[c.direction][1]);var i=h+n[0],o=k+n[1];h+n[2]>e+q.width()-c.xOffset&&(i=q.width()-a-c.xOffset);k+n[3]>m+q.height()- c.yOffset&&(o=k-f-c.yOffset);ii&&ho&&k'),n.push(a),a.load(f,function(){m.eq(a.attr("rel")).data("tooltip",a.html())})))})};(function(){var p= d.live?"live":"bind",j=[];b.each("initialized.jatt beforeReveal.jatt revealed.jatt hidden.jatt".split(" "),function(g,a){var f=a.split(".")[0];b.isFunction(d[f])&&e.bind(a,d[f])});b.data(e,"jatt","");b(d.tooltip)[p](d.activate,function(l){var a,f,c,n,m,j,i,h=b(this);a="false"===d.metadata.toString()?[d,""]:b.jatt.getMeta(h);this!==b.data(e,"jatt")[0]&&b.jatt.removeTooltips();e.trigger("initialized.jatt",h);g=a[0];f=""===h.attr(g.content)?h.data("tooltip")||"":h.attr(g.content)||"";n=h.attr("rel")|| "";m=h.attr("href")||"";h.data("tooltip",f);h.attr("title","");a='
x
';g.local?h.before(a):u.append(a);c=b("#"+d.tooltipId);if(""===f)if(""!==n)f=b(n).html()||d.notFound;else if(""!==m&&"#"!==m)f=d.loading,j=b("
"),j.load(m,function(){i=j.html();s=d.cacheData?i:"";c.hide().find(".body").html(i);h.data("tooltip",s);b.jatt.ttrelocate(l,d.tooltipId);c.fadeIn(g.speed)}); c.data("options",g).find(".body").html(f);b.jatt.ttrelocate(l,d.tooltipId);c.find(".close")[h.is(d.sticky)?"show":"hide"]().click(function(){b.jatt.removeTooltips()});b.data(e,"jatt",h);e.trigger("beforeReveal.jatt",h);c.fadeIn(g.speed);e.trigger("revealed.jatt",h)})[p](d.deactivate,function(){b(this).is(d.sticky)||b.jatt.removeTooltips()})[p]("mousemove",function(e){b("#"+d.tooltipId).length&&g.followMouse&&b.jatt.ttrelocate(e,d.tooltipId)});r=function(l,a,f){e.trigger("initialized.jatt",a);var c, j="false"==d.metadata.toString()?[d,""]:b.jatt.getMeta(a);g=j[0];c=""===a.attr(g.content)?a.data("tooltip")||"":a.attr(g.content)||"";a.data("tooltip",c);"title"===g.content&&a.attr(g.content,"");f='
"+c:"")+'x
';g.local?a.before(f):u.append(f);f=b("#"+d.previewId);b.data(e,"jatt",a);e.trigger("beforeReveal.jatt",a);f.hide().data("options", g).fadeIn(g.speed);f.find(".close")[a.is(d.sticky)?"show":"hide"]().click(function(){b.jatt.removeTooltips()});b.jatt.ttrelocate(l,d.previewId);e.trigger("revealed.jatt",a)};b(d.preview)[p](d.activate,function(e){var a=b(this);b.jatt.removeTooltips();r(e,a,a.attr("href")+'" alt="'+d.imagePreview+'" />')}).each(function(){j.push(b(this).attr("href"))});b(d.screenshot)[p](d.activate,function(e){var a=b(this),f=("#"===a.attr("rel")?d.websitePreview+a.attr("href"):a.attr("rel"))+'" alt="'+d.siteScreenshot+ a.attr("href")+'" />';b.jatt.removeTooltips();r(e,a,f)}).each(function(){var e=b(this);j.push("#"===e.attr("rel")?d.websitePreview+e.attr("href"):e.attr("rel"))});b(d.preview+","+d.screenshot)[p](d.deactivate,function(){b(this).is(d.sticky)||b.jatt.removeTooltips()})[p]("mousemove",function(e){b("#"+d.previewId).length&&g.followMouse&&b.jatt.ttrelocate(e,d.previewId)});b.jatt.preloadContent(j)})()};b.jatt.defaultOptions={direction:"n",followMouse:!0,content:"title",speed:300,local:!1,xOffset:20,yOffset:20, zIndex:1E3,live:!1,metadata:"class",activate:"mouseenter focusin",deactivate:"mouseleave focusout",cacheData:!0,websitePreview:"http://api1.thumbalizr.com/?width=250&url=",loading:"Loading...",notFound:"No tooltip found",imagePreview:"Image preview",siteScreenshot:"URL preview: ",tooltip:".tooltip",screenshot:"a.screenshot",preview:"a.preview",preloadContent:".preload",sticky:".sticky",tooltipId:"tooltip",previewId:"preview"}})(jQuery,this,document); 12 | -------------------------------------------------------------------------------- /demos/prettify/prettify.css: -------------------------------------------------------------------------------- 1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} -------------------------------------------------------------------------------- /demos/video/movie.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/video/movie.mp4 -------------------------------------------------------------------------------- /demos/video/movie.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/video/movie.ogg -------------------------------------------------------------------------------- /demos/video/movie.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/demos/video/movie.webm -------------------------------------------------------------------------------- /images/arrows-metallic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/images/arrows-metallic.png -------------------------------------------------------------------------------- /images/arrows-minimalist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/images/arrows-minimalist.png -------------------------------------------------------------------------------- /images/construction.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/images/construction.gif -------------------------------------------------------------------------------- /images/cs-portfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/images/cs-portfolio.png -------------------------------------------------------------------------------- /images/default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/AnythingSlider/d0e89155321f7815673530735b622c04042e1a73/images/default.png -------------------------------------------------------------------------------- /js/jquery.anythingslider.fx.js: -------------------------------------------------------------------------------- 1 | /* 2 | * AnythingSlider Slide FX 1.6 for AnythingSlider v1.7.11+ 3 | * By Rob Garrison (aka Mottie & Fudgey) 4 | * Dual licensed under the MIT and GPL licenses. 5 | */ 6 | (function($) { 7 | $.fn.anythingSliderFx = function(effects, options){ 8 | 9 | // variable sizes shouldn't matter - it's just to get an idea to get the elements out of view 10 | var wrap = $(this).closest('.anythingSlider'), 11 | sliderWidth = wrap.width(), 12 | sliderHeight = wrap.height(), 13 | getBaseFx = function(s){ 14 | var size = s, size2; 15 | // allow for start and end sizes/dimensions 16 | if (s && typeof s === 'string' && s.indexOf(',') > 0) { 17 | s = s.split(','); 18 | size = $.trim(s[0]); size2 = $.trim(s[1]); 19 | } 20 | return { 21 | // 'name' : [{ inFx: {effects}, { outFx: {effects} }, selector: []] 22 | 'top' : [{ inFx: { top: 0 }, outFx: { top: '-' + (size || sliderHeight) } }], 23 | 'bottom' : [{ inFx: { top: 0 }, outFx: { top: (size || sliderHeight) } }], 24 | 'left' : [{ inFx: { left: 0 }, outFx: { left: '-' + (size || sliderWidth) } }], 25 | 'right' : [{ inFx: { left: 0 }, outFx: { left: (size || sliderWidth) } }], 26 | 'fade' : [{ inFx: { opacity: size || 1 }, outFx: { opacity: 0 } }], 27 | 'expand' : [{ inFx: { width: size2 || '100%', height: size2 || '100%', top: '0%', left: '0%' } , outFx: { width: (size || '10%'), height: (size || '10%'), top: '50%', left: '50%' } }], 28 | 'grow' : [{ inFx: { top: 0, fontSize: size || '16px', opacity : 1 }, outFx: { top: '-200px', fontSize: size2 || '80px', opacity: 0 } }], 29 | 'listLR' : [{ inFx: { left: 0, opacity: 1 }, outFx: [{ left: (size || sliderWidth), opacity: 0 }, { left: '-' + (size || sliderWidth), opacity: 0 }], selector: [':odd', ':even'] }], 30 | 'listRL' : [{ inFx: { left: 0, opacity: 1 }, outFx: [{ left: (size || sliderWidth), opacity: 0 }, { left: '-' + (size || sliderWidth), opacity: 0 }], selector: [':even', ':odd'] }], 31 | 32 | 'caption-Top' : [{ inFx: { top: 0, opacity: 0.8 }, outFx: { top: ( '-' + size || -50 ), opacity: 0 } }], 33 | 'caption-Right' : [{ inFx: { right: 0, opacity: 0.8 }, outFx: { right: ( '-' + size || -150 ), opacity: 0 } }], 34 | 'caption-Bottom' : [{ inFx: { bottom: 0, opacity: 0.8 }, outFx: { bottom: ( '-' + size || -50 ), opacity: 0 } }], 35 | 'caption-Left' : [{ inFx: { left: 0, opacity: 0.8 }, outFx: { left: ( '-' + size || -150 ), opacity: 0 } }] 36 | }; 37 | }; 38 | 39 | return this.each(function(){ 40 | 41 | $(this).data('AnythingSlider').fx = effects; // store fx list to allow dynamic modification 42 | 43 | var defaults = $.extend({ 44 | easing : 'swing', // Default FX easing 45 | timeIn : 400, // Default time for in FX animation 46 | timeOut : 350, // Default time for out FX animation - when using predefined FX, this number gets divided by 2 47 | stopRepeat : false, // stops repeating FX animation when clicking on the same navigation tab 48 | outFxBind : 'slide_init', // When outFx animations are called 49 | inFxBind : 'slide_complete', // When inFx animations are called 50 | dataAnimate: 'data-animate' // data attribute containing the animate.css class names to add for in and out fx 51 | }, options), 52 | 53 | baseFx = getBaseFx(), // get base FX with standard sizes 54 | 55 | // Animate FX 56 | animateFx = function(el, opt, isOut, time){ 57 | if (el.length === 0 || typeof opt === 'undefined') { return; } // no fx 58 | var o = opt[0] || opt, 59 | s = o[1] || '', 60 | // time needs to be a number, not a string 61 | t = time || parseInt( ((s === '') ? o.duration : o[0].duration), 10); 62 | if (isOut) { 63 | // don't change caption position from absolute 64 | if (el.css('position') !== 'absolute') { el.css({ position : 'relative' }); } 65 | el.stop(); 66 | // multiple selectors for out animation 67 | if (s !== ''){ 68 | el.filter(opt[1][0]).animate(o[0], { queue : false, duration : t, easing : o[0].easing }); 69 | el.filter(opt[1][1]).animate(s, { queue : true, duration : t, easing : o[0].easing }); 70 | return; 71 | } 72 | } 73 | // animation for no extra selectors 74 | el.animate(o, { queue : true, duration : t, easing : o.easing }); 75 | }, 76 | 77 | // Extract FX 78 | getFx = function(opts, isOut){ 79 | // example: '.textSlide h3' : [ 'top fade', '200px' '500', 'easeOutBounce' ], 80 | var tmp, bfx2, 81 | ex = (isOut) ? 'outFx' : 'inFx', // object key 82 | bfx = {}, // base effects 83 | time = (isOut) ? defaults.timeOut : defaults.timeIn, // default duration settings 84 | // split & process multiple built-in effects (e.g. 'top fade') 85 | fx = $.trim(opts[0].replace(/\s+/g,' ')).split(' '); 86 | 87 | // look for multiple selectors in the Out effects 88 | if (isOut && fx.length === 1 && baseFx.hasOwnProperty(fx) && typeof (baseFx[fx][0].selector) !== 'undefined') { 89 | bfx2 = baseFx[fx][0].outFx; 90 | // add time and easing to first set, the animation will use it for both 91 | bfx2[0].duration = opts[2] || defaults.timeOut; 92 | bfx2[0].easing = opts[3] || defaults.easing; 93 | return [bfx2, baseFx[fx][0].selector || [] ]; 94 | } 95 | 96 | // combine base effects 97 | $.each(fx, function(i,f){ 98 | // check if built-in effect exists 99 | if (baseFx.hasOwnProperty(f)) { 100 | var t = typeof opts[1] === 'undefined' || opts[1] === '', 101 | // if size option is defined, get new base fx 102 | tmp = (t) ? baseFx : getBaseFx(opts[1]); 103 | $.extend(true, bfx, tmp[f][0][ex]); 104 | t = opts[2] || bfx.duration || time; // user set time || built-in time || default time set above 105 | bfx.duration = (isOut) ? t/2 : t; // out animation time is 1/2 of in time for predefined fx only 106 | bfx.easing = isNaN(opts[3]) ? opts[3] || defaults.easing : opts[4] || defaults.easing; 107 | } 108 | }); 109 | return [bfx]; 110 | }, 111 | 112 | base = $(this) 113 | 114 | // bind events for "OUT" effects - occur when leaving a page 115 | .bind(defaults.outFxBind, function(e, slider){ 116 | if (defaults.stopRepeat && slider.$lastPage[0] === slider.$targetPage[0]) { return; } 117 | var el, elOut, time, page = slider.$lastPage.add( slider.$items.eq(slider.exactPage) ).add( slider.$targetPage ), 118 | FX = slider.fx; // allow dynamically added FX 119 | if (slider.exactPage === 0) { page = page.add( slider.$items.eq( slider.pages ) ); } // add last (non-cloned) page if on first 120 | if (slider.options.animationTime < defaults.timeOut) { 121 | time = slider.options.animationTime || defaults.timeOut; 122 | } 123 | page = page.find('*').andSelf(); // include the panel in the selectors 124 | for (el in FX) { 125 | if (el === 'outFx') { 126 | // process "out" custom effects 127 | for (elOut in FX.outFx) { 128 | // animate current/last slide, unless it's a clone, then effect the original 129 | if (page.filter(elOut).length) { animateFx( page.filter(elOut), FX.outFx[elOut], true); } 130 | } 131 | } else if (el !== 'inFx') { 132 | // Use built-in effects 133 | if ($.isArray(FX[el]) && page.filter(el).length) { 134 | animateFx( page.filter(el), getFx(FX[el],true), true, time); 135 | } 136 | } 137 | } 138 | el = page.filter('[' + defaults.dataAnimate + ']'); 139 | if (el.length) { 140 | el.each(function(){ 141 | FX = $(this).attr(defaults.dataAnimate).split(','); 142 | if (FX[0] !== '') { 143 | $(this) 144 | .removeClass(FX[0]) 145 | .addClass(FX[1] || FX[0]); 146 | } 147 | }); 148 | } 149 | }) 150 | 151 | // bind events for "IN" effects - occurs on target page 152 | .bind(defaults.inFxBind, function(e, slider){ 153 | if (defaults.stopRepeat && slider.$lastPage[0] === slider.$targetPage[0]) { return; } 154 | var el, elIn, page = slider.$currentPage.add( slider.$items.eq(slider.exactPage) ), 155 | FX = slider.fx; // allow dynamically added FX 156 | page = page.find('*').andSelf(); // include the panel in the selectors 157 | for (el in FX) { 158 | if (el === 'inFx') { 159 | // process "in" custom effects 160 | for (elIn in FX.inFx) { 161 | // animate current page 162 | if (page.filter(elIn).length) { animateFx( page.filter(elIn), FX.inFx[elIn], false); } 163 | } 164 | // Use built-in effects 165 | } else if (el !== 'outFx' && $.isArray(FX[el]) && page.filter(el).length) { 166 | animateFx( page.filter(el), getFx(FX[el],false), false); 167 | } 168 | } 169 | el = page.filter('[' + defaults.dataAnimate + ']'); 170 | if (el.length) { 171 | el.each(function(){ 172 | FX = $(this).attr(defaults.dataAnimate).split(','); 173 | if (FX[0] !== '') { 174 | $(this) 175 | .removeClass(FX[1] || FX[0]) 176 | .addClass(FX[0]); 177 | } 178 | }); 179 | } 180 | }) 181 | .data('AnythingSlider'); 182 | 183 | // call gotoPage to trigger intro animation 184 | $(window).load(function(){ base.gotoPage(base.currentPage, base.playing); }); 185 | 186 | }); 187 | }; 188 | })(jQuery); 189 | -------------------------------------------------------------------------------- /js/jquery.anythingslider.fx.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * AnythingSlider Slide FX 1.6 minified for AnythingSlider v1.7.11+ 3 | * By Rob Garrison (aka Mottie & Fudgey) 4 | * Dual licensed under the MIT and GPL licenses. 5 | */ 6 | (function(h){h.fn.anythingSliderFx=function(q,r){var n=h(this).closest(".anythingSlider"),i=n.width(),o=n.height(),p=function(a){var b=a,l;a&&"string"===typeof a&&0
');swfobject.embedSWF(g+p+(n?n+b.id:""),b.id,e.attr("width"),e.attr("height"),"10",null,h.flashvars,h.params,h.attr,function(){l.hasOwnProperty("init")&& 11 | l.init(f,m,c);c>=a.hasEmbedCount&&f.$el.trigger("swf_completed",f)})}):b.selector.match("iframe")&&!b.isInitialized&&k.each(function(){var a=d(this);l.hasOwnProperty("init")&&l.init(f,a,c)});b.isInitialized=!0});a.gup=function(a,b){a=a.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");var c=(new RegExp("[\\?&]"+a+"=([^&#]*)")).exec(b||window.location.href);return null===c?"":c[1]};a.postMsg=function(a,b){var c=d("#"+b);c.length&&c[0].contentWindow.postMessage(a,c.attr("src").split("?")[0])};a.message=function(b){if(b.data&& 12 | !/infoDelivery/g.test(b.data)){var c=d.parseJSON(b.data);d.each(a.list,function(b,d){a.services[a.list[b].service].hasOwnProperty("message")&&a.services[a.list[b].service].message(f,c)})}};a.control=function(b){var c,e=a.list,g="pause"===b?f.$lastPage[0]:f.$currentPage[0],h=!1;for(c=0;c').attr("id","");b.video.list[a].player=new YT.Player(g,{height:"100%",width:"100%",videoId:k,playerVars:f,events:{onReady:function(c){b.video.list[a].status=c.data},onStateChange:function(c){b.video.list[a].status= 19 | c.data}}});clearInterval(h)}60<++e&&clearInterval(h)},1E3)},cont:function(b,c,a){b.options.resumeOnVisible&&2===b.video.list[a].status&&b.video.list[a].player&&b.video.list[a].player.playVideo()},pause:function(b,c,a){b.video.list[a].player&&b.video.list[a].player.pauseVideo()},isPlaying:function(b,c,a){b=b.video.list[a].status;return 1===b||2 2 | is released under the MIT License 3 | */ 4 | var swfobject=function(){var D="undefined",r="object",S="Shockwave Flash",W="ShockwaveFlash.ShockwaveFlash",q="application/x-shockwave-flash",R="SWFObjectExprInst",x="onreadystatechange",O=window,j=document,t=navigator,T=false,U=[h],o=[],N=[],I=[],l,Q,E,B,J=false,a=false,n,G,m=true,M=function(){var aa=typeof j.getElementById!=D&&typeof j.getElementsByTagName!=D&&typeof j.createElement!=D,ah=t.userAgent.toLowerCase(),Y=t.platform.toLowerCase(),ae=Y?/win/.test(Y):/win/.test(ah),ac=Y?/mac/.test(Y):/mac/.test(ah),af=/webkit/.test(ah)?parseFloat(ah.replace(/^.*webkit\/(\d+(\.\d+)?).*$/,"$1")):false,X=!+"\v1",ag=[0,0,0],ab=null;if(typeof t.plugins!=D&&typeof t.plugins[S]==r){ab=t.plugins[S].description;if(ab&&!(typeof t.mimeTypes!=D&&t.mimeTypes[q]&&!t.mimeTypes[q].enabledPlugin)){T=true;X=false;ab=ab.replace(/^.*\s+(\S+\s+\S+$)/,"$1");ag[0]=parseInt(ab.replace(/^(.*)\..*$/,"$1"),10);ag[1]=parseInt(ab.replace(/^.*\.(.*)\s.*$/,"$1"),10);ag[2]=/[a-zA-Z]/.test(ab)?parseInt(ab.replace(/^.*[a-zA-Z]+(.*)$/,"$1"),10):0}}else{if(typeof O.ActiveXObject!=D){try{var ad=new ActiveXObject(W);if(ad){ab=ad.GetVariable("$version");if(ab){X=true;ab=ab.split(" ")[1].split(",");ag=[parseInt(ab[0],10),parseInt(ab[1],10),parseInt(ab[2],10)]}}}catch(Z){}}}return{w3:aa,pv:ag,wk:af,ie:X,win:ae,mac:ac}}(),k=function(){if(!M.w3){return}if((typeof j.readyState!=D&&j.readyState=="complete")||(typeof j.readyState==D&&(j.getElementsByTagName("body")[0]||j.body))){f()}if(!J){if(typeof j.addEventListener!=D){j.addEventListener("DOMContentLoaded",f,false)}if(M.ie&&M.win){j.attachEvent(x,function(){if(j.readyState=="complete"){j.detachEvent(x,arguments.callee);f()}});if(O==top){(function(){if(J){return}try{j.documentElement.doScroll("left")}catch(X){setTimeout(arguments.callee,0);return}f()})()}}if(M.wk){(function(){if(J){return}if(!/loaded|complete/.test(j.readyState)){setTimeout(arguments.callee,0);return}f()})()}s(f)}}();function f(){if(J){return}try{var Z=j.getElementsByTagName("body")[0].appendChild(C("span"));Z.parentNode.removeChild(Z)}catch(aa){return}J=true;var X=U.length;for(var Y=0;Y0){for(var af=0;af0){var ae=c(Y);if(ae){if(F(o[af].swfVersion)&&!(M.wk&&M.wk<312)){w(Y,true);if(ab){aa.success=true;aa.ref=z(Y);ab(aa)}}else{if(o[af].expressInstall&&A()){var ai={};ai.data=o[af].expressInstall;ai.width=ae.getAttribute("width")||"0";ai.height=ae.getAttribute("height")||"0";if(ae.getAttribute("class")){ai.styleclass=ae.getAttribute("class")}if(ae.getAttribute("align")){ai.align=ae.getAttribute("align")}var ah={};var X=ae.getElementsByTagName("param");var ac=X.length;for(var ad=0;ad'}}aa.outerHTML='"+af+"";N[N.length]=ai.id;X=c(ai.id)}else{var Z=C(r);Z.setAttribute("type",q);for(var ac in ai){if(ai[ac]!=Object.prototype[ac]){if(ac.toLowerCase()=="styleclass"){Z.setAttribute("class",ai[ac])}else{if(ac.toLowerCase()!="classid"){Z.setAttribute(ac,ai[ac])}}}}for(var ab in ag){if(ag[ab]!=Object.prototype[ab]&&ab.toLowerCase()!="movie"){e(Z,ab,ag[ab])}}aa.parentNode.replaceChild(Z,aa);X=Z}}return X}function e(Z,X,Y){var aa=C("param");aa.setAttribute("name",X);aa.setAttribute("value",Y);Z.appendChild(aa)}function y(Y){var X=c(Y);if(X&&X.nodeName=="OBJECT"){if(M.ie&&M.win){X.style.display="none";(function(){if(X.readyState==4){b(Y)}else{setTimeout(arguments.callee,10)}})()}else{X.parentNode.removeChild(X)}}}function b(Z){var Y=c(Z);if(Y){for(var X in Y){if(typeof Y[X]=="function"){Y[X]=null}}Y.parentNode.removeChild(Y)}}function c(Z){var X=null;try{X=j.getElementById(Z)}catch(Y){}return X}function C(X){return j.createElement(X)}function i(Z,X,Y){Z.attachEvent(X,Y);I[I.length]=[Z,X,Y]}function F(Z){var Y=M.pv,X=Z.split(".");X[0]=parseInt(X[0],10);X[1]=parseInt(X[1],10)||0;X[2]=parseInt(X[2],10)||0;return(Y[0]>X[0]||(Y[0]==X[0]&&Y[1]>X[1])||(Y[0]==X[0]&&Y[1]==X[1]&&Y[2]>=X[2]))?true:false}function v(ac,Y,ad,ab){if(M.ie&&M.mac){return}var aa=j.getElementsByTagName("head")[0];if(!aa){return}var X=(ad&&typeof ad=="string")?ad:"screen";if(ab){n=null;G=null}if(!n||G!=X){var Z=C("style");Z.setAttribute("type","text/css");Z.setAttribute("media",X);n=aa.appendChild(Z);if(M.ie&&M.win&&typeof j.styleSheets!=D&&j.styleSheets.length>0){n=j.styleSheets[j.styleSheets.length-1]}G=X}if(M.ie&&M.win){if(n&&typeof n.addRule==r){n.addRule(ac,Y)}}else{if(n&&typeof j.createTextNode!=D){n.appendChild(j.createTextNode(ac+" {"+Y+"}"))}}}function w(Z,X){if(!m){return}var Y=X?"visible":"hidden";if(J&&c(Z)){c(Z).style.visibility=Y}else{v("#"+Z,"visibility:"+Y)}}function L(Y){var Z=/[\\\"<>\.;]/;var X=Z.exec(Y)!=null;return X&&typeof encodeURIComponent!=D?encodeURIComponent(Y):Y}var d=function(){if(M.ie&&M.win){window.attachEvent("onunload",function(){var ac=I.length;for(var ab=0;ab 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | 9 | This version of the GNU Lesser General Public License incorporates 10 | the terms and conditions of version 3 of the GNU General Public 11 | License, supplemented by the additional permissions listed below. 12 | 13 | 0. Additional Definitions. 14 | 15 | As used herein, "this License" refers to version 3 of the GNU Lesser 16 | General Public License, and the "GNU GPL" refers to version 3 of the GNU 17 | General Public License. 18 | 19 | "The Library" refers to a covered work governed by this License, 20 | other than an Application or a Combined Work as defined below. 21 | 22 | An "Application" is any work that makes use of an interface provided 23 | by the Library, but which is not otherwise based on the Library. 24 | Defining a subclass of a class defined by the Library is deemed a mode 25 | of using an interface provided by the Library. 26 | 27 | A "Combined Work" is a work produced by combining or linking an 28 | Application with the Library. The particular version of the Library 29 | with which the Combined Work was made is also called the "Linked 30 | Version". 31 | 32 | The "Minimal Corresponding Source" for a Combined Work means the 33 | Corresponding Source for the Combined Work, excluding any source code 34 | for portions of the Combined Work that, considered in isolation, are 35 | based on the Application, and not on the Linked Version. 36 | 37 | The "Corresponding Application Code" for a Combined Work means the 38 | object code and/or source code for the Application, including any data 39 | and utility programs needed for reproducing the Combined Work from the 40 | Application, but excluding the System Libraries of the Combined Work. 41 | 42 | 1. Exception to Section 3 of the GNU GPL. 43 | 44 | You may convey a covered work under sections 3 and 4 of this License 45 | without being bound by section 3 of the GNU GPL. 46 | 47 | 2. Conveying Modified Versions. 48 | 49 | If you modify a copy of the Library, and, in your modifications, a 50 | facility refers to a function or data to be supplied by an Application 51 | that uses the facility (other than as an argument passed when the 52 | facility is invoked), then you may convey a copy of the modified 53 | version: 54 | 55 | a) under this License, provided that you make a good faith effort to 56 | ensure that, in the event an Application does not supply the 57 | function or data, the facility still operates, and performs 58 | whatever part of its purpose remains meaningful, or 59 | 60 | b) under the GNU GPL, with none of the additional permissions of 61 | this License applicable to that copy. 62 | 63 | 3. Object Code Incorporating Material from Library Header Files. 64 | 65 | The object code form of an Application may incorporate material from 66 | a header file that is part of the Library. You may convey such object 67 | code under terms of your choice, provided that, if the incorporated 68 | material is not limited to numerical parameters, data structure 69 | layouts and accessors, or small macros, inline functions and templates 70 | (ten or fewer lines in length), you do both of the following: 71 | 72 | a) Give prominent notice with each copy of the object code that the 73 | Library is used in it and that the Library and its use are 74 | covered by this License. 75 | 76 | b) Accompany the object code with a copy of the GNU GPL and this license 77 | document. 78 | 79 | 4. Combined Works. 80 | 81 | You may convey a Combined Work under terms of your choice that, 82 | taken together, effectively do not restrict modification of the 83 | portions of the Library contained in the Combined Work and reverse 84 | engineering for debugging such modifications, if you also do each of 85 | the following: 86 | 87 | a) Give prominent notice with each copy of the Combined Work that 88 | the Library is used in it and that the Library and its use are 89 | covered by this License. 90 | 91 | b) Accompany the Combined Work with a copy of the GNU GPL and this license 92 | document. 93 | 94 | c) For a Combined Work that displays copyright notices during 95 | execution, include the copyright notice for the Library among 96 | these notices, as well as a reference directing the user to the 97 | copies of the GNU GPL and this license document. 98 | 99 | d) Do one of the following: 100 | 101 | 0) Convey the Minimal Corresponding Source under the terms of this 102 | License, and the Corresponding Application Code in a form 103 | suitable for, and under terms that permit, the user to 104 | recombine or relink the Application with a modified version of 105 | the Linked Version to produce a modified Combined Work, in the 106 | manner specified by section 6 of the GNU GPL for conveying 107 | Corresponding Source. 108 | 109 | 1) Use a suitable shared library mechanism for linking with the 110 | Library. A suitable mechanism is one that (a) uses at run time 111 | a copy of the Library already present on the user's computer 112 | system, and (b) will operate properly with a modified version 113 | of the Library that is interface-compatible with the Linked 114 | Version. 115 | 116 | e) Provide Installation Information, but only if you would otherwise 117 | be required to provide such information under section 6 of the 118 | GNU GPL, and only to the extent that such information is 119 | necessary to install and execute a modified version of the 120 | Combined Work produced by recombining or relinking the 121 | Application with a modified version of the Linked Version. (If 122 | you use option 4d0, the Installation Information must accompany 123 | the Minimal Corresponding Source and Corresponding Application 124 | Code. If you use option 4d1, you must provide the Installation 125 | Information in the manner specified by section 6 of the GNU GPL 126 | for conveying Corresponding Source.) 127 | 128 | 5. Combined Libraries. 129 | 130 | You may place library facilities that are a work based on the 131 | Library side by side in a single library together with other library 132 | facilities that are not Applications and are not covered by this 133 | License, and convey such a combined library under terms of your 134 | choice, if you do both of the following: 135 | 136 | a) Accompany the combined library with a copy of the same work based 137 | on the Library, uncombined with any other library facilities, 138 | conveyed under the terms of this License. 139 | 140 | b) Give prominent notice with the combined library that part of it 141 | is a work based on the Library, and explaining where to find the 142 | accompanying uncombined form of the same work. 143 | 144 | 6. Revised Versions of the GNU Lesser General Public License. 145 | 146 | The Free Software Foundation may publish revised and/or new versions 147 | of the GNU Lesser General Public License from time to time. Such new 148 | versions will be similar in spirit to the present version, but may 149 | differ in detail to address new problems or concerns. 150 | 151 | Each version is given a distinguishing version number. If the 152 | Library as you received it specifies that a certain numbered version 153 | of the GNU Lesser General Public License "or any later version" 154 | applies to it, you have the option of following the terms and 155 | conditions either of that published version or of any later version 156 | published by the Free Software Foundation. If the Library as you 157 | received it does not specify a version number of the GNU Lesser 158 | General Public License, you may choose any version of the GNU Lesser 159 | General Public License ever published by the Free Software Foundation. 160 | 161 | If the Library as you received it specifies that a proxy can decide 162 | whether future versions of the GNU Lesser General Public License shall 163 | apply, that proxy's public statement of acceptance of any version is 164 | permanent authorization for you to choose that version for the 165 | Library. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "anythingslider", 3 | "title": "AnythingSlider", 4 | "version": "1.9.7", 5 | "description": "Just what the world needs, another jQuery slider. YAWN. I know, check this one out though, it's got lots of cool features.\n\nHere on CSS-Tricks, I've created a number of different sliders. Three, in fact. A \"featured content\" slider, a \"start/stop slider\", and \"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.\n\nThis 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.", 6 | "author": { 7 | "name": "Chris Coyier", 8 | "url": "https://github.com/chriscoyier" 9 | }, 10 | "maintainers": [{ 11 | "name": "Rob Garrison", 12 | "url": "https://github.com/Mottie", 13 | "email": "wowmotty@gmail.com" 14 | },{ 15 | "name": "Dean Sofer", 16 | "url": "https://github.com/ProLoser" 17 | }], 18 | "licenses": [{ 19 | "type": "GPL3", 20 | "url": "https://github.com/CSS-Tricks/AnythingSlider/blob/master/license.txt" 21 | }], 22 | "bugs": "https://github.com/CSS-Tricks/AnythingSlider/issues", 23 | "homepage": "http://css-tricks.com/3412-anythingslider-jquery-plugin/", 24 | "docs": "https://github.com/CSS-Tricks/AnythingSlider/wiki", 25 | "demo": "http://css-tricks.github.io/AnythingSlider/", 26 | "dependencies": { 27 | "jquery": ">=1.4.2" 28 | }, 29 | "keywords": [ 30 | "customizable", 31 | "effects", 32 | "slider", 33 | "video" 34 | ], 35 | "files": [ 36 | "css/anythingslider.css", 37 | "js/jquery.anythingslider.js", 38 | "js/jquery.anythingslider.min.js", 39 | "js/jquery.anythingslider.fx.js", 40 | "js/jquery.anythingslider.video.js" 41 | ], 42 | "jam": { 43 | "main": "js/jquery.anythingslider.js", 44 | "dependencies": { 45 | "jquery": ">=1.4.2" 46 | }, 47 | "shim": { 48 | "deps": ["jquery"] 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /simple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | AnythingSlider Simple Demo 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 30 | 31 | 32 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 56 | 57 | 58 | 59 | 60 |
    61 | 62 |
    • 63 | 64 |
    • 65 | 66 |
    • 67 | 68 |
    • 69 | 70 |
71 | 72 | 73 | 74 | 75 | 76 | --------------------------------------------------------------------------------