├── test
    └── empty
├── src
    ├── outro.js
    ├── intro.js
    ├── omnislide.transitions.js
    ├── omnislide.transitionapi.js
    └── jquery.omnislide.js
├── .gitignore
├── demo
    ├── img
    │   ├── HTML5_Logo.png
    │   ├── css-valid.png
    │   ├── jquery_logo.png
    │   └── slides
    │   │   ├── slide_1.jpg
    │   │   ├── slide_2.jpg
    │   │   ├── slide_3.jpg
    │   │   └── slide_4.jpg
    ├── slides.xml
    └── index.html
├── themes
    ├── oxygen
    │   ├── sprite.png
    │   └── omnislide.theme.oxygen.css
    ├── simple
    │   ├── sprite.png
    │   └── omnislide.theme.simple.css
    └── omnislide.base.css
├── Makefile
└── README.md


/test/empty:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/outro.js:
--------------------------------------------------------------------------------
1 | 
2 | })(jQuery, window);


--------------------------------------------------------------------------------
/src/intro.js:
--------------------------------------------------------------------------------
1 | (function($, win, undefined) {
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dist/
2 | build/
3 | !build/jshint-rhino.js
4 | /nbproject/


--------------------------------------------------------------------------------
/demo/img/HTML5_Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/englercj/omnislide/master/demo/img/HTML5_Logo.png


--------------------------------------------------------------------------------
/demo/img/css-valid.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/englercj/omnislide/master/demo/img/css-valid.png


--------------------------------------------------------------------------------
/demo/img/jquery_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/englercj/omnislide/master/demo/img/jquery_logo.png


--------------------------------------------------------------------------------
/themes/oxygen/sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/englercj/omnislide/master/themes/oxygen/sprite.png


--------------------------------------------------------------------------------
/themes/simple/sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/englercj/omnislide/master/themes/simple/sprite.png


--------------------------------------------------------------------------------
/demo/img/slides/slide_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/englercj/omnislide/master/demo/img/slides/slide_1.jpg


--------------------------------------------------------------------------------
/demo/img/slides/slide_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/englercj/omnislide/master/demo/img/slides/slide_2.jpg


--------------------------------------------------------------------------------
/demo/img/slides/slide_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/englercj/omnislide/master/demo/img/slides/slide_3.jpg


--------------------------------------------------------------------------------
/demo/img/slides/slide_4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/englercj/omnislide/master/demo/img/slides/slide_4.jpg


--------------------------------------------------------------------------------
/demo/slides.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" ?>
 2 | <slides>
 3 |   <slide title="Slide #0" image="img/slides/slide_1.jpg" thumb="img/slides/slide_1.jpg">
 4 |     <content></content>
 5 |     <overlay></overlay>
 6 |   </slide>
 7 |   <slide title="Slide #1" image="img/slides/slide_2.jpg" thumb="img/slides/slide_2.jpg">
 8 |     <content></content>
 9 |     <overlay></overlay>
10 |   </slide>
11 |   <slide title="Slide #2" image="img/slides/slide_3.jpg" thumb="img/slides/slide_3.jpg">
12 |     <content></content>
13 |     <overlay></overlay>
14 |   </slide>
15 |   <slide title="Slide #3" image="img/slides/slide_4.jpg" thumb="img/slides/slide_4.jpg">
16 |     <content></content>
17 |     <overlay></overlay>
18 |   </slide>
19 | </slides>


--------------------------------------------------------------------------------
/themes/omnislide.base.css:
--------------------------------------------------------------------------------
 1 | /* 
 2 |  * WARNING: 
 3 |  * Changing these options is not recommmended!
 4 |  *
 5 |  * These styles enhance the functionality of the slider
 6 |  * and changing them may break the slider's operation. 
 7 |  * 
 8 |  * If you wish tochange the look and feel of the slider
 9 |  * please refer to the theme api at:
10 |  * http://dev.pantherdev.com/products/omnislide/docs/themeAPI
11 |  */
12 | div.slide-wrapper { overflow:visible; position:relative; }
13 | div.slide-box { overflow:visible;  position:absolute; z-index:2; }
14 | 
15 | div.slide {  width:100%; height:100%; position:absolute; z-index:3; background:0 0 no-repeat; }
16 | div.slide.active { z-index:4; }
17 | 
18 | div.slide-content {}
19 | 
20 | div.slide-nav { position:absolute; z-index:10; }
21 | canvas.slide-timer { position:absolute; z-index:10; }
22 | div.slide-overlay { position:absolute; z-index: 10; }
23 | h1.slide-title { position:absolute; z-index: 10; }
24 | 
25 | div.slider-transition-box { overflow:hidden; position:absolute; }
26 | div.slide-transition-box-wrapper { overflow:hidden; position:relative; top:0; display:block; z-index:7; }


--------------------------------------------------------------------------------
/themes/oxygen/omnislide.theme.oxygen.css:
--------------------------------------------------------------------------------
 1 | /* THEMING CLASSES
 2 |  * ---
 3 |  * Please Modify these to change the theme of the slider
 4 |  */
 5 | .oxygen.slide-wrapper {
 6 |     width:960px; 
 7 |     height:512px;
 8 |     
 9 |     margin:0 auto;
10 | }
11 | .oxygen.slide-box { width:960px; height:512px; }
12 | 
13 | .oxygen.slide { background:rgb(25,25,25); }
14 | .oxygen.slide.active {}
15 | 
16 | .oxygen.slide-nav { top:0; left:0; height:1px; width:1px; }
17 | .oxygen.slide-nav-control {
18 |     background:left top url('sprite.png') no-repeat;
19 |     
20 |     width:64px; 
21 |     height:64px;
22 |     
23 |     cursor:pointer;
24 |     position:absolute;
25 |     top:224px;
26 | }
27 | .oxygen.slide-nav-back      { left:0; background-position:0 -194px; }
28 | .oxygen.slide-nav-forward   { left:897px; background-position:0 -130px; }
29 | .oxygen.slide-nav-pause     { left:448px; background-position:0 -64px; }
30 | .oxygen.slide-nav-play      { left:448px; background-position:0 0; }
31 | .oxygen.slide-nav-back:hover   { background-position:-64px -194px; }
32 | .oxygen.slide-nav-forward:hover{ background-position:-64px -130px; }
33 | .oxygen.slide-nav-pause:hover  { background-position:-64px -64px; }
34 | .oxygen.slide-nav-play:hover   { background-position:-64px 0; }
35 | 
36 | /* Thumbnails are disabled in this theme */
37 | .oxygen.slide-thumbs-wrapper { display:none; }
38 | .oxygen.slide-thumb {}
39 | .oxygen.slide-thumb.oxygen:hover {}
40 | .oxygen.slide-thumb.active {}
41 | .oxygen.slide-thumb-image {}
42 | .oxygen.slide-thumb-title {}
43 | 
44 | .oxygen.slide-content { height:100%; width:100%; }
45 | .oxygen.slide-overlay {
46 |     color:#FFF;
47 |     left:0; 
48 |     top:70px;
49 |     height:100px; 
50 |     width:310px;
51 |     padding:5px;
52 |     
53 |     border:solid 2px #000;
54 |     background:rgba(10, 10, 10, 0.7);
55 |  }
56 | 
57 | .oxygen.slide-title {
58 |     color:#FFF;
59 |     left:0; 
60 |     top:0;
61 |     height:50px; 
62 |     width:300px;
63 |     padding:10px;
64 |     
65 |     border:solid 2px #000;
66 |     background:rgba(10, 10, 10, 0.7);
67 | }
68 | 
69 | .oxygen.slide-timer { top:10px; right:10px; }
70 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |     <head>
 4 |         <title>Slide Demo</title>
 5 |         
 6 |         <link rel="stylesheet" type="text/css" href="../themes/omnislide.base.css" />
 7 |         <link rel="stylesheet" type="text/css" href="../themes/oxygen/omnislide.theme.oxygen.css" />
 8 |         <link rel="stylesheet" type="text/css" href="../themes/simple/omnislide.theme.simple.css" />
 9 |         
10 |         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
11 |         <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
12 |         <script src="../src/jquery.omnislide.js"></script>
13 |         <script src="../src/omnislide.transitionapi.js"></script>
14 |         <script src="../src/omnislide.transitions.js"></script>
15 |         <script>
16 |             $(function () {
17 |                 $('#sliderUl').OmniSlide({
18 |                     slides: '#slideInfo',
19 |                     theme: 'oxygen',
20 |                     transition: { wait: 9000 },
21 |                     timer: { height: 48, width: 48 }
22 |                     //title: { visible: false },
23 |                     //overlay: { visible: false },
24 |                     //thumbs: { visible: false }
25 |                 });
26 |             });
27 | 
28 |             function createXmlSlider() {
29 |                 $.get('slides.xml', function (data) {
30 |                     $('#sliderXml').OmniSlide({ slides: data, theme: 'simple' });
31 |                 });
32 |             }
33 | 
34 |             function destroyXmlSlider() {
35 |                 $('#sliderXml').OmniSlide('destroy');
36 |             }
37 |         </script>
38 |         
39 |         <style>
40 |             body { background:#FFF; margin:0; padding:0; }
41 |             
42 |             #sliderUl { margin:25px 0; }
43 |         </style>
44 |     </head>
45 |     <body>
46 |         <div id="sliderUl"></div>
47 |         
48 |         <ul id="slideInfo">
49 |             <li title="Slide #0">
50 |                 <img class="slide-thumb" src="img/slides/slide_1.jpg" alt="" />
51 |                 <img class="slide-image" src="img/slides/slide_1.jpg" alt="" />
52 |                 <div class="slide-content"></div>
53 |                 <div class="slide-overlay"></div>
54 |             </li>
55 |             <li title="Slide #1">
56 |                 <img class="slide-thumb" src="img/slides/slide_2.jpg" alt="" />
57 |                 <img class="slide-image" src="img/slides/slide_2.jpg" alt="" />
58 |                 <div class="slide-content"></div>
59 |                 <div class="slide-overlay"></div>
60 |             </li>
61 |             <li title="Slide #2">
62 |                 <img class="slide-thumb" src="img/slides/slide_3.jpg" alt="" />
63 |                 <img class="slide-image" src="img/slides/slide_3.jpg" alt="" />
64 |                 <div class="slide-content"></div>
65 |                 <div class="slide-overlay"></div>
66 |             </li>
67 |             <li title="Slide #3">
68 |                 <img class="slide-thumb" src="img/slides/slide_4.jpg" alt="" />
69 |                 <img class="slide-image" src="img/slides/slide_4.jpg" alt="" />
70 |                 <div class="slide-content"></div>
71 |                 <div class="slide-overlay">
72 |                     Wondering where the timer and navigation is? I disabled it for this page. Another great feature of OmniSlide
73 |                     is the ability to set options specific to a single slide!
74 |                 </div>
75 |             </li>
76 |         </ul>
77 | 
78 |         <div id="sliderXml"></div>
79 |         <button onclick="createXmlSlider();">Create new slider from XML</button>
80 |         <button onclick="destroyXmlSlider();">Destroy XML Slider</button>
81 |     </body>
82 | </html>
83 | 


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
  1 | SRC_DIR = src
  2 | TEST_DIR = test
  3 | BUILD_DIR = build
  4 | 
  5 | PREFIX = .
  6 | DIST_DIR = ${PREFIX}/dist
  7 | 
  8 | BASE_FILES = ${SRC_DIR}/jquery.omnislide.js\
  9 | 	${SRC_DIR}/omnislide.transitionapi.js\
 10 | 
 11 | MODULES = ${SRC_DIR}/intro.js\
 12 | 	${BASE_FILES}\
 13 | 	${SRC_DIR}/outro.js
 14 | 
 15 | COMBINED = ${DIST_DIR}/jquery.omnislide.js
 16 | MINIFILE = jquery.omnislide.min.js
 17 | MINIFIED = ${DIST_DIR}/${MINIFILE}
 18 | TRANSITIONS = ${SRC_DIR}/omnislide.transitions.js
 19 | 
 20 | COMPILER_FILE = ${BUILD_DIR}/compiler.zip
 21 | COMPILER_GET = wget -q http://closure-compiler.googlecode.com/files/compiler-latest.zip -O ${COMPILER_FILE} && unzip ${COMPILER_FILE} compiler.jar -d ${BUILD_DIR}
 22 | COMPILER = ${BUILD_DIR}/compiler.jar
 23 | COMPILE = java -jar ${COMPILER} --js ${COMBINED} --js_output_file ${MINIFIED}
 24 | 
 25 | RHINO_FILE = ${BUILD_DIR}/rhino.zip
 26 | RHINO_GET = wget -q ftp://ftp.mozilla.org/pub/mozilla.org/js/rhino1_7R3.zip -O ${RHINO_FILE} && unzip ${RHINO_FILE} rhino1_7R3/js.jar -d ${BUILD_DIR} && mv ${BUILD_DIR}/rhino1_7R3/js.jar ${BUILD_DIR}/rhino.jar && rm -rf ${BUILD_DIR}/rhino1_7R3/
 27 | RHINO = ${BUILD_DIR}/rhino.jar
 28 | HINT = java -jar ${RHINO} ${BUILD_DIR}/jshint-rhino.js
 29 | 
 30 | DEMO_DIR = demo/
 31 | THEME_DIR = themes/
 32 | PACK_DIR = omnislide
 33 | PACK_FILE = omnislide.zip
 34 | PACKAGE = rm -f ${DIST_DIR}/${PACK_FILE} && zip -rqb ${BUILD_DIR} ${DIST_DIR}/${PACK_FILE} ${PACK_DIR}
 35 | 
 36 | REPLACE = src\/jquery.omnislide.js"><\/script>.+<script src="..\/src\/omnislide.transitionapi.js
 37 | 
 38 | #JQ_VER = $(shell cat version.txt)
 39 | #VER = sed "s/@VERSION/${JQ_VER}/"
 40 | 
 41 | #DATE=$(shell git log -1 --pretty=format:%ad)
 42 | 
 43 | all: setup combine minify hint package size
 44 | 	@@echo "OmniSlide build complete."
 45 | 
 46 | setup: ${DIST_DIR} ${COMPILER} ${RHINO}
 47 | 
 48 | combine: setup ${COMBINED}
 49 | 
 50 | minify: setup combine ${MINIFIED}
 51 | 
 52 | hint: setup combine
 53 | 	@@if test -e ${RHINO}; then \
 54 | 		echo "Checking OmniSlide against JSHint..."; \
 55 | 		${HINT} ${COMBINED}; \
 56 | 	else \
 57 | 		echo "Rhino has not been downloaded, please run 'make setup'"; \
 58 | 	fi
 59 | 
 60 | package: minify
 61 | 	@@echo "Packaging omnislide..."
 62 | 	@@if test ! -e ${PACK_DIR}; then \
 63 | 		mkdir ${PACK_DIR}; \
 64 | 	else \
 65 | 		rm -rf ${PACK_DIR}; \
 66 | 		mkdir ${PACK_DIR}; \
 67 | 	fi
 68 | 	@@mkdir ${PACK_DIR}/js
 69 | 	@@cp -r ${MINIFIED} ${PACK_DIR}/js
 70 | 	@@cp -r ${TRANSITIONS} ${PACK_DIR}/js
 71 | 	@@cp -r ${DEMO_DIR} ${PACK_DIR}
 72 | 	@@cp -r ${THEME_DIR} ${PACK_DIR}
 73 | 	@@cat ${PACK_DIR}/demo/index.html | sed 's/src\/jquery.omnislide.js/js\/jquery.omnislide.min.js/' | sed 's/<script src="..\/src\/omnislide.transitionapi.js"><\/script>//' | sed 's/..\/src\//..\/js\//' > ${PACK_DIR}/demo/index2.html
 74 | 	@@mv ${PACK_DIR}/demo/index2.html ${PACK_DIR}/demo/index.html
 75 | 	@@${PACKAGE}
 76 | 	@@rm -rf ${PACK_DIR}
 77 | 
 78 | ${DIST_DIR}:
 79 | 	@@mkdir -p ${DIST_DIR}
 80 | 
 81 | ${RHINO}:
 82 | 	@@if test ! -e ${RHINO}; then \
 83 | 		echo "Setting up Rhino..."; \
 84 | 		${RHINO_GET}; \
 85 | 	fi
 86 | 
 87 | ${COMPILER}:
 88 | 	@@if test ! -e ${COMPILER}; then \
 89 | 		echo "Setting up Google Closure Compiler..."; \
 90 | 		${COMPILER_GET}; \
 91 | 	fi
 92 | 
 93 | ${COMBINED}: ${MODULES} | ${DIST_DIR}
 94 | 	@@echo "Building to: " ${COMBINED}
 95 | 
 96 | 	@@cat ${MODULES} > ${COMBINED} #| \
 97 | #sed 's/.function..jQuery...{//' | \
 98 | #sed 's/}...jQuery..;//' | \
 99 | #sed 's/@DATE/'"${DATE}"'/' | \
100 | #${VER} > ${JQ};
101 | 
102 | ${MINIFIED}: combine
103 | 	@@if test -e ${COMPILER}; then \
104 | 		echo "Minifying to: " ${MINIFIED}; \
105 | 		${COMPILE}; \
106 | 	else \
107 | 		echo "Compiler not downloaded, please run 'make setup'"; \
108 | 	fi
109 | 
110 | size: setup combine minify
111 | 	@@echo "File Sizes:";
112 | 	@@gzip -c ${MINIFIED} > ${MINIFIED}.gz;
113 | 	@@du -h ${DIST_DIR}/*
114 | 	@@rm ${MINIFIED}.gz;
115 | 
116 | clean:
117 | 	@@echo "Removing Distribution directory:" ${DIST_DIR}
118 | 	@@rm -rf ${DIST_DIR}
119 | 
120 | clean-tools:
121 | 	@@echo "Removing downloaded tools"
122 | 	@@rm -rf ${BUILD_DIR}/compiler.* ${BUILD_DIR}/rhino.*


--------------------------------------------------------------------------------
/themes/simple/omnislide.theme.simple.css:
--------------------------------------------------------------------------------
 1 | /* THEMING CLASSES
 2 |  * ---
 3 |  * Please Modify these to change the theme of the slider
 4 |  */
 5 | .simple.slide-wrapper { 
 6 |     font-family: Arial,Helvetica,sans-serif;
 7 |     
 8 |     width:825px; 
 9 |     height:480px;
10 |     
11 |     padding:5px;
12 |     background:#FFF;
13 |     
14 |     margin:0 auto;
15 |     box-shadow:0 0 20px #BBB;
16 | }
17 | .simple.slide-box { width:825px; height:425px; }
18 | 
19 | .simple.slide { }
20 | .simple.slide.active { }
21 | 
22 | .simple.slide-nav {
23 |     bottom:20px;
24 |     left: 288px;
25 |     height:65px;
26 |     
27 |     padding:0 35px;
28 | }
29 | .simple.slide-nav-control {
30 |     background:left top url('sprite.png') no-repeat;
31 |     
32 |     width:48px; 
33 |     height:48px; 
34 |     float:left;
35 |     
36 |     cursor:pointer;
37 |     margin:5px;
38 | }
39 | .simple.slide-nav-back      { background-position:0 -144px; }
40 | .simple.slide-nav-forward   { background-position:0 -96px; }
41 | .simple.slide-nav-pause     { background-position:0 -48px; }
42 | .simple.slide-nav-playe      { background-position:0 0; }
43 | .simple.slide-nav-back:hover   { background-position:-48px -144px; }
44 | .simple.slide-nav-forward:hover{ background-position:-48px -96px; }
45 | .simple.slide-nav-pause:hover  { background-position:-48px -48px; }
46 | .simple.slide-nav-play:hover   { background-position:-48px 0; }
47 | 
48 | .simple.slide-thumbs-wrapper { height:50px; width:100%; position:absolute; top:435px; margin:0; padding:0; }
49 | .simple.slide-thumb { float:left; height:50px; width:165px; cursor:pointer; }
50 | .simple.slide-thumb:hover > span.slide-thumb-title { text-decoration:underline; }
51 | .simple.slide-thumb.active > span.slide-thumb-title { text-decoration:underline; }
52 | .simple.slide-thumb-image { float:left; height:50px; width:65px; border-radius:5px; }
53 | .simple.slide-thumb-title { float:left; font-size:0.8em; display:block; padding:20px 0 20px 3px; }
54 | 
55 | .simple.slide-content { height:100%; width:100%; }
56 | .simple.slide-overlay {
57 |     color:#FFF;
58 |     left:0; 
59 |     top:70px;
60 |     height:100px; 
61 |     width:310px;
62 |     padding:5px;
63 |     
64 |     background: rgb(81,81,81);
65 |     background: -moz-linear-gradient(top,  rgba(81,81,81,0.5) 0%, rgba(13,13,13,0.5) 45%, rgba(1,1,1,0.5) 50%, rgba(10,10,10,0.5) 55%, rgba(27,27,27,0.5) 100%); /* FF3.6+ */
66 |     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(81,81,81,0.5)), color-stop(45%,rgba(13,13,13,0.5)), color-stop(50%,rgba(1,1,1,0.5)), color-stop(55%,rgba(10,10,10,0.5)), color-stop(100%,rgba(27,27,27,0.5))); /* Chrome,Safari4+ */
67 |     background: -webkit-linear-gradient(top,  rgba(81,81,81,0.5) 0%,rgba(13,13,13,0.5) 45%,rgba(1,1,1,0.5) 50%,rgba(10,10,10,0.5) 55%,rgba(27,27,27,0.5) 100%); /* Chrome10+,Safari5.1+ */
68 |     background: -o-linear-gradient(top,  rgba(81,81,81,0.5) 0%,rgba(13,13,13,0.5) 45%,rgba(1,1,1,0.5) 50%,rgba(10,10,10,0.5) 55%,rgba(27,27,27,0.5) 100%); /* Opera 11.10+ */
69 |     background: -ms-linear-gradient(top,  rgba(81,81,81,0.5) 0%,rgba(13,13,13,0.5) 45%,rgba(1,1,1,0.5) 50%,rgba(10,10,10,0.5) 55%,rgba(27,27,27,0.5) 100%); /* IE10+ */
70 |     background: linear-gradient(top,  rgba(81,81,81,0.5) 0%,rgba(13,13,13,0.5) 45%,rgba(1,1,1,0.5) 50%,rgba(10,10,10,0.5) 55%,rgba(27,27,27,0.5) 100%); /* W3C */
71 |     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf515151', endColorstr='#bf1b1b1b',GradientType=0 ); /* IE6-9 */
72 | }
73 | 
74 | .simple.slide-title {
75 |     color:#FFF;
76 |     left:0; 
77 |     top:0;
78 |     height:50px; 
79 |     width:300px;
80 |     padding:10px;
81 |     
82 |     background: rgb(81,81,81);
83 |     background: -moz-linear-gradient(top,  rgba(81,81,81,0.5) 0%, rgba(13,13,13,0.5) 45%, rgba(1,1,1,0.5) 50%, rgba(10,10,10,0.5) 55%, rgba(27,27,27,0.5) 100%); /* FF3.6+ */
84 |     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(81,81,81,0.5)), color-stop(45%,rgba(13,13,13,0.5)), color-stop(50%,rgba(1,1,1,0.5)), color-stop(55%,rgba(10,10,10,0.5)), color-stop(100%,rgba(27,27,27,0.5))); /* Chrome,Safari4+ */
85 |     background: -webkit-linear-gradient(top,  rgba(81,81,81,0.5) 0%,rgba(13,13,13,0.5) 45%,rgba(1,1,1,0.5) 50%,rgba(10,10,10,0.5) 55%,rgba(27,27,27,0.5) 100%); /* Chrome10+,Safari5.1+ */
86 |     background: -o-linear-gradient(top,  rgba(81,81,81,0.5) 0%,rgba(13,13,13,0.5) 45%,rgba(1,1,1,0.5) 50%,rgba(10,10,10,0.5) 55%,rgba(27,27,27,0.5) 100%); /* Opera 11.10+ */
87 |     background: -ms-linear-gradient(top,  rgba(81,81,81,0.5) 0%,rgba(13,13,13,0.5) 45%,rgba(1,1,1,0.5) 50%,rgba(10,10,10,0.5) 55%,rgba(27,27,27,0.5) 100%); /* IE10+ */
88 |     background: linear-gradient(top,  rgba(81,81,81,0.5) 0%,rgba(13,13,13,0.5) 45%,rgba(1,1,1,0.5) 50%,rgba(10,10,10,0.5) 55%,rgba(27,27,27,0.5) 100%); /* W3C */
89 |     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf515151', endColorstr='#bf1b1b1b',GradientType=0 ); /* IE6-9 */
90 | }
91 | 
92 | .simple.slide-timer { top:10px; right:10px; }
93 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ## Note: This README is out of date and needs to be updated.
  2 | 
  3 | # OmniSlide (v0.7 BETA)
  4 | 
  5 | OmniSlide is an amazing new slider being built to be a one-stop-shop for your slider needs. This slider is meant to replace your need for any other slider by combining all the best features found in all sliders out there. It also adds some new features like theming and custom transitions to the mix as well.
  6 | 
  7 | ## Features
  8 | 
  9 | Here are some of the features that OmniSlide supports:
 10 | 
 11 | * Image slideshows
 12 | * HTML Content
 13 | * HTML Titles and Overlays
 14 | * Canvas timer (bar, circle, or ring styles)
 15 | * Slide Navigation Controls
 16 | * Slide Thumbnails
 17 | * XML input support
 18 | * Extensible Advanced Transitions
 19 | * Flexible Theming Classes
 20 | * And More!
 21 | 
 22 | ## Installation
 23 | 
 24 | The slider requires [`jQuery 1.4.3+`](http://jquery.com/). For a minimal install, the only *required* files are `js/jquery.omnislide.js` and `css/omnislide.base.css`. However, there are many features left out with only that implementation. Most notably the slider will look like crap. In order to bring some style to the slide include a theme found in `themes/THEME_NAME/omnislide.theme.THEME_NAME.css`. 
 25 | 
 26 | Advanced transitions require the file `js/omnislide.transitionapi.js`.
 27 | 
 28 | For a minimal install, include the following in your HTML:
 29 | 
 30 | 	<!-- OmniSlide Base & Theme CSS -->
 31 | 	<link type="text/css" rel="stylesheet" href="css/omnislide.base.css" />
 32 | 	<link type="text/css" rel="stylesheet" href="themes/simple/omnislide.theme.simple.css" />
 33 | 	<!-- However you include jQuery -->
 34 |     <script src="js/libs/jquery/1/jquery.min.js"></script>
 35 | 	<!-- OmniSlide -->
 36 | 	<script src="js/jquery.omnislide.js"></script>
 37 | 
 38 | To use the advanced themes you will need to include the API as well:
 39 | 
 40 | 	<!-- Enables advanced transition support -->
 41 | 	<script src="js/omnislide.transitionapi.js"></script>
 42 | 
 43 | ## Usage
 44 | 
 45 | The slider uses the format of:
 46 | 
 47 | 	$(output_Element).OmniSlide({ slides: slide_Content_Input });
 48 | 
 49 | Using the slider can be as simple or as complex as you wish. It has the ability to intelligently determine the type of input you give it. Meaning, you can pass in XML string data, an XML document, a DOM element, jQuery object, or jQuery selector (__Note:__ if you pass a DOM or jQuery Object, it must be a `<ul/>` element in the proper format). 
 50 | 
 51 | Here is an example of the basic usage using defaults:
 52 | 
 53 | #### HTML
 54 | 
 55 | 	<div id="sliderUl"></div>
 56 |     <ul id="slides">
 57 |         <li title="The First Slide Title">
 58 |             <img class="slide-thumb" src="" alt="" /> <!-- Image to be used as slide thumbnail -->
 59 |             <img class="slide-image" src="img/slides/1.jpg" alt="" /> <!-- Image to be used as the slide background image -->
 60 |             <div class="slide-content">HTML Content of the slide if any</div>
 61 |             <div class="slide-overlay">Some overlay content to go on the first slide</div>
 62 |         </li>
 63 |         <li>
 64 | 			<!-- You only have to use the elements you want -->
 65 |             <img class="slide-image" src="img/slides/2.jpg" alt="" />
 66 |         </li>
 67 | 	</ul>
 68 | 
 69 | #### Javascript
 70 | 
 71 | 	$(function () {
 72 | 		$('#sliderUl').OmniSlide({ slides: '#slides', theme: 'simple' });
 73 | 	});
 74 | 
 75 | The plugin will use the `<ul/>` passed in to create the slider. It does __NOT__ use the `<ul/>` markup as the actual slider. It will hide that element, and create its own HTML. This method was chosen so that the API for passing the plugin data, and the actual implementation of the slider are decoupled. So the theming API can change without changing the input format and visa versa.
 76 | 
 77 | Here is another example using some XML that is pulled in using AJAX:
 78 | 
 79 | #### HTML
 80 | 
 81 | 	<div id="sliderXml"></div>
 82 | 
 83 | #### Javascript
 84 | 
 85 | 	$(function () {
 86 | 		$.get('slides.xml', function (data) {
 87 | 			//passes in xml as an XML Document
 88 | 			//string XML data will work as well
 89 |             $('#sliderXml').OmniSlide({ slides: data, theme: 'simple' });
 90 |         });
 91 | 	});
 92 | 
 93 | Finally, if you decide to remove the slider from the page simply call a destroy on the `output_Element` that you initialized earlier. So for the `<ul/>` example I would make the following call to return my page to the state it was in before I initialized the slider:
 94 | 
 95 | 	$('#sliderUl').omnislide('destroy');
 96 | 
 97 | More advanced usage examples can be found in the [Advanced Usage](#) Documentation
 98 | 
 99 | ## Transitions
100 | 
101 | Transitions are specified using the `transition` option when instantiating the plugin, or by modifying the `transition` option on-the-fly using the `'option'` method:
102 | 
103 | 	$('#slider').OmniSlide({ slides: data, theme: 'simple', transition: { effect: 'fadeOut' } });
104 | 	$('#slider').OmniSlide('option', 'transition', { effect: 'growIn' });
105 | 	//OR
106 | 	$('#slider').OmniSlide('option', 'transition.effect', 'colShrinkOut');
107 | 
108 | You can create custom transition effects using the transition API. You can even package your custom transitions into a definition file for use with OmniSlide. To learn more please visit the [Transition API Documentation](#).
109 | 
110 | ## Theming
111 | 
112 | Something unique to OmniSlide is the theming classes. All controls and components are assigned classes that allow you to theme the slider to your preference. This slider was designed to provide functionality, without forcing you into a style. That way you can take the slider and brand it to your website, quickly and easily. You can even have multiple themes on different sliders **on the same page**!
113 | 
114 | If you open `themes/simple/omnislide.theme.simple.css` you will find a simple starting theme.
115 | 
116 | More information can be found in the [Theme API Documentation](#).
117 | 
118 | ## Notes
119 | 
120 | * To use custom transitions, or to extend the built-in transitions you must include `js/omnislide.transitionapi.js`
121 | * For the theme API note the z-index levels:
122 |     * The slide-box is at z-index 2
123 | 	* A slide is at z-index 3
124 | 	* The active slide is at z-index 4
125 | 	* If you are using the transitionapi, transition boxes are at z-index 7
126 | 	* Overlays (navigation, title, overlay, timer, etc) are at z-index 10
127 | * Changing options on the timer (using 'option' method) will take effect next slide
128 | * Compatible with jQuery 1.4.3+
129 | * Works well in: FF 8, IE 9, Chrome 15/16
130 | 
131 | ## TODO
132 | 
133 | * [Before Release] Themes
134 | * [Before Release] More browser testing. FF 8, IE 9, and Chrome 15/16 are good.
135 | * [Future Release] Video Support
136 | * [Future Release] More slide orders (spiral, checker, alternate) [alternate can combine with all others]
137 | * [Future Release] Better option change handling, timer/theme is refreshed, others are not
138 | * [Future Release] Parallax Support
139 | * [Future Release] Carousel mode
140 | * [Future Release] Lightbox support
141 | * [Future Release] Ken Burns effect
142 | 
143 | ## Known Bugs
144 | * If you hover in while transitioning, the nav shows. Need to lock it while transitioning
145 | * iFrames, and flash as content are wonky
146 | * Setting slide overrides via the `$().OmniSlide('option')` interface doesn't work
147 | * I'm sure some combo of `animAsOverlay` and `visible` will break my overlay animation logic


--------------------------------------------------------------------------------
/src/omnislide.transitions.js:
--------------------------------------------------------------------------------
  1 | (function ($, window, undefined) {
  2 |     var trans = $.OmniSlide.transitionAPI.transitions;
  3 | 
  4 |     $.extend(trans, {
  5 |         flyLeft: {
  6 |             duration: 1100,
  7 |             delay: 80,
  8 |             css: {
  9 |                 opacity: 0,
 10 |                 left: '-=200'
 11 |             },
 12 |             cols: 8,
 13 |             rows: 3,
 14 |             order: 'normal',
 15 |             easing: 'easeInOutBack',
 16 |             slide: 'this'
 17 |         },
 18 |         flyTop: {
 19 |             duration: 1100,
 20 |             delay: 80,
 21 |             css: {
 22 |                 top: '-=200',
 23 |                 opacity: 0
 24 |             },
 25 |             cols: 8,
 26 |             rows: 3,
 27 |             order: 'normal',
 28 |             easing: 'easeInOutBack',
 29 |             slide: 'this'
 30 |         },
 31 |         flyLeftGrowIn: {
 32 |             duration: 1000,
 33 |             delay: 80,
 34 |             css: {
 35 |                 width: 0,
 36 |                 opacity: 0,
 37 |                 left: '-=200'
 38 |             },
 39 |             cols: 8,
 40 |             rows: 3,
 41 |             order: 'normal',
 42 |             easing: 'swing',
 43 |             slide: 'next'
 44 |         },
 45 |         growIn: {
 46 |             duration: 1000,
 47 |             delay: 80,
 48 |             css: {
 49 |                 top: '-=50',
 50 |                 left: '-=50',
 51 |                 width: 0,
 52 |                 height: 0,
 53 |                 opacity: 0
 54 |             },
 55 |             cols: 8,
 56 |             rows: 3,
 57 |             order: 'normal',
 58 |             easing: 'swing',
 59 |             slide: 'next'
 60 |         },
 61 |         growRandomIn: {
 62 |             duration: 1000,
 63 |             delay: 80,
 64 |             css: {
 65 |                 top: '-=50',
 66 |                 left: '-=50',
 67 |                 width: 0,
 68 |                 height: 0,
 69 |                 opacity: 0
 70 |             },
 71 |             cols: 8,
 72 |             rows: 3,
 73 |             order: 'randomize',
 74 |             easing: 'easeInSine',
 75 |             slide: 'next'
 76 |         },
 77 |         shrinkRaiseIn: {
 78 |             duration: 1000,
 79 |             delay: 80,
 80 |             css: {
 81 |                 height: 0,
 82 |                 top: '+=100',
 83 |                 opacity: 0
 84 |             },
 85 |             cols: 8,
 86 |             rows: 3,
 87 |             order: 'normal',
 88 |             easing: 'easeInOutBack',
 89 |             slide: 'next'
 90 |         },
 91 |         fallIn: {
 92 |             duration: 1200,
 93 |             delay: 100,
 94 |             css: {
 95 |                 height: 0,
 96 |                 opacity: 0
 97 |             },
 98 |             cols: 8,
 99 |             rows: 3,
100 |             order: 'normal',
101 |             easing: 'easeInOutBack',
102 |             slide: 'next'
103 |         },
104 |         rowFade: {
105 |             duration: 800,
106 |             delay: 100,
107 |             css: {
108 |                 opacity: 0
109 |             },
110 |             cols: 1,
111 |             rows: 8,
112 |             order: 'normal',
113 |             easing: 'easeInSine',
114 |             slide: 'this'
115 |         },
116 |         rowGrowIn: {
117 |             duration: 1600,
118 |             delay: 120,
119 |             css: {
120 |                 opacity: 0,
121 |                 width: 0,
122 |                 height: 0
123 |             },
124 |             cols: 1,
125 |             rows: 6,
126 |             order: 'normal',
127 |             easing: 'easeInSine',
128 |             slide: 'next'
129 |         },
130 |         rowFlyLeft: {
131 |             duration: 800,
132 |             delay: 100,
133 |             css: {
134 |                 left: '-=500',
135 |                 opacity: 0
136 |             },
137 |             cols: 1,
138 |             rows: 6,
139 |             order: 'normal',
140 |             easing: 'easeInOutBack',
141 |             slide: 'this'
142 |         },
143 |         rowRandomGrowIn: {
144 |             duration: 1600,
145 |             delay: 120,
146 |             css: {
147 |                 height: 0,
148 |                 opacity: 0,
149 |                 width: 0
150 |             },
151 |             cols: 1,
152 |             rows: 6,
153 |             order: 'randomize',
154 |             easing: 'easeInSine',
155 |             slide: 'next'
156 |         },
157 |         colFade: {
158 |             duration: 800,
159 |             delay: 80,
160 |             css: {
161 |                 opacity: 0
162 |             },
163 |             cols: 12,
164 |             rows: 1,
165 |             order: 'normal',
166 |             easing: 'easeInSine',
167 |             slide: 'this'
168 |         },
169 |         colDrop: {
170 |             duration: 800,
171 |             delay: 100,
172 |             css: {
173 |                 top: '+=300',
174 |                 opacity: 0
175 |             },
176 |             cols: 12,
177 |             rows: 1,
178 |             order: 'normal',
179 |             easing: 'easeInSine',
180 |             slide: 'this'
181 |         },
182 |         colFlyTop: {
183 |             duration: 800,
184 |             delay: 100,
185 |             css: {
186 |                 top: '-=300',
187 |                 opacity: 0
188 |             },
189 |             cols: 12,
190 |             rows: 1,
191 |             order: 'normal',
192 |             easing: 'easeInOutBack',
193 |             slide: 'this'
194 |         },
195 |         colRandomGrowIn: {
196 |             duration: 800,
197 |             delay: 100,
198 |             css: {
199 |                 opacity: 0,
200 |                 width: 0,
201 |                 height: 0
202 |             },
203 |             cols: 12,
204 |             rows: 1,
205 |             order: 'randomize',
206 |             easing: 'easeInSine',
207 |             slide: 'next'
208 |         },
209 |         slideTop: {
210 |             duration: 1200,
211 |             delay: 0,
212 |             css: {
213 |                 top: '-=500',
214 |                 opacity: 0
215 |             },
216 |             cols: 1,
217 |             rows: 1,
218 |             order: 'normal',
219 |             easing: 'easeInOutBack',
220 |             slide: 'this'
221 |         },
222 |         slideLeft: {
223 |             duration: 1200,
224 |             delay: 0,
225 |             css: {
226 |                 left: '-=800',
227 |                 opacity: 0
228 |             },
229 |             cols: 1,
230 |             rows: 1,
231 |             order: 'normal',
232 |             easing: 'easeInOutBack',
233 |             slide: 'this'
234 |         },
235 |         evaporate: {
236 |             duration: 1700,
237 |             delay: 30,
238 |             css: {
239 |                 top: '-=100',
240 |                 opacity: 0
241 |             },
242 |             cols: 12,
243 |             rows: 5,
244 |             order: 'randomize',
245 |             easing: 'linear',
246 |             slide: 'this'
247 |         }
248 |     });
249 | 
250 |     //define some opposites
251 |     trans['shrinkOut'] = $.extend(true, {}, trans.growIn);
252 |     trans['shrinkOut'].slide = 'this';
253 | 
254 |     trans['rowShrinkOut'] = $.extend(true, {}, trans.rowGrowIn);
255 |     trans['rowShrinkOut'].slide = 'this';
256 | 
257 |     trans['shrinkRandomOut'] = $.extend(true, {}, trans.growRandomIn);
258 |     trans['shrinkRandomOut'].slide = 'this';
259 | 
260 |     trans['rowRandomShrinkOut'] = $.extend(true, {}, trans.rowRandomGrowIn);
261 |     trans['rowRandomShrinkOut'].slide = 'this';
262 | 
263 |     trans['colRandomShrinkOut'] = $.extend(true, {}, trans.colRandomGrowIn);
264 |     trans['colRandomShrinkOut'].slide = 'this';
265 | 
266 |     trans['shrinkDropOut'] = $.extend(true, {}, trans.shrinkRaiseIn);
267 |     trans['shrinkDropOut'].slide = 'this';
268 | 
269 |     trans['flyRight'] = $.extend(true, {}, trans.flyLeft);
270 |     trans['flyRight'].css.left = '+=200';
271 | 
272 |     trans['flyBottom'] = $.extend(true, {}, trans.flyTop);
273 |     trans['flyBottom'].css.top = '+=200';
274 | 
275 |     trans['rowFlyRight'] = $.extend(true, {}, trans.rowFlyLeft);
276 |     trans['rowFlyRight'].css.left = '+=500';
277 | 
278 |     trans['colFlyBottom'] = $.extend(true, {}, trans.colFlyTop);
279 |     trans['colFlyBottom'].css.top = '+=300';
280 | 
281 |     trans['slideRight'] = $.extend(true, {}, trans.slideLeft);
282 |     trans['slideRight'].css.left = '+=800';
283 | 
284 |     trans['slideBottom'] = $.extend(true, {}, trans.slideTop);
285 |     trans['slideBottom'].css.top = '+=500';
286 | })(jQuery, window);


--------------------------------------------------------------------------------
/src/omnislide.transitionapi.js:
--------------------------------------------------------------------------------
  1 | $.OmniSlide.transitionAPI = {
  2 |     transition: function (opts, $slides, index, next, callback) {
  3 |         //store vars locally for easier access and to lose references
  4 |         var api = $.OmniSlide.transitionAPI,
  5 |         options = $.extend(true, {}, opts);
  6 | 
  7 |         //effect needs to be determined BEFORE we extend
  8 |         api._setRandomIfInvalid(options, 'effect', api.transitions);
  9 | 
 10 |         //extend onto the api.transitions effect
 11 |         options = $.extend(true, {}, api.transitions[options.effect], options);
 12 | 
 13 |         //This randomizes values if its an array, its 'random', or its undefined
 14 |         for (var key in api._validKeys) api._setRandomIfInvalid(options, key);
 15 | 
 16 |         //run the transition
 17 |         return api._doTransition($slides, index, next, options, callback);
 18 |     },
 19 |     _validKeys: {
 20 |         easing: $.easing,
 21 |         direction: ['left', 'topleft', 'top', 'topright', 'right', 'bottomright', 'bottom', 'bottomleft'],
 22 |         slide: ['this', 'next'],
 23 |         order: ['normal', 'reverse', 'randomize']//TODO: Implement spiral order
 24 |     },
 25 |     _activate: function ($slide) {
 26 |         $slide.show().addClass('active');
 27 |     },
 28 |     _deactivate: function ($slide) {
 29 |         $slide.hide().removeClass('active');
 30 |     },
 31 |     _setRandomIfInvalid: function (obj, key, vals) {
 32 |         var api = $.OmniSlide.transitionAPI,
 33 |         err;
 34 | 
 35 |         vals = vals || api._validKeys[key];
 36 | 
 37 |         //if its an array, get random value of that array
 38 |         //special case
 39 |         if ($.isArray(obj[key])) {
 40 |             api._setToRandom(obj, key, obj[key]);
 41 |         }
 42 |         //if its 'random', randomize it
 43 |         else if (obj[key] == 'random' || obj[key] === undefined) {
 44 |             api._setToRandom(obj, key, vals);
 45 |         }
 46 |         //if its private, randomize it, and warn them
 47 |         else if (obj[key].charAt(0) == '_') {
 48 |             err = 'Value "' + obj[key] + '" for option "' + key + '" is private. ';
 49 |             api._setToRandom(obj, key, vals);
 50 |         }
 51 |         //if its an invalid value, randomize it, and warn them
 52 |         else if (($.isArray(vals) && $.inArray(obj[key], vals) === -1) || ($.isPlainObject(vals) && [obj[key]] === undefined)) {
 53 |             err = 'Value "' + obj[key] + '" for option "' + key + '" doesn\'t exist. ';
 54 |             api._setToRandom(obj, key, vals);
 55 |         }
 56 | 
 57 |         if (err) {
 58 |             err += 'It has been assigned a random value (' + obj[key] + ').';
 59 |             $.OmniSlide.warn(err);
 60 |         }
 61 |     },
 62 |     _setToRandom: function (obj, key, vals) {
 63 |         if ($.isArray(vals)) obj[key] = vals[$.OmniSlide.getRandKey(vals)];
 64 |         else obj[key] = $.OmniSlide.getRandKey(vals);
 65 |     },
 66 |     _doTransition: function ($slides, index, next, opt, callback) {
 67 |         var api = $.OmniSlide.transitionAPI, cssKeys = $.OmniSlide.getKeys(opt.css),
 68 |         boxes, $boxes, $wrapper, len, evalCss;
 69 | 
 70 |         if (opt.slide == 'next') {
 71 |             boxes = api._boxifySlide($slides.eq(next), opt.rows, opt.cols, opt.guid);
 72 |         } else {
 73 |             boxes = api._boxifySlide($slides.eq(index), opt.rows, opt.cols, opt.guid);
 74 | 
 75 |             api._deactivate($slides.eq(index));
 76 |             api._activate($slides.eq(next));
 77 |         }
 78 | 
 79 |         //setup variables
 80 |         $boxes = boxes[0];
 81 |         $wrapper = boxes[1];
 82 |         len = $boxes.length;
 83 |         $slides.parent().append($wrapper);
 84 | 
 85 |         //reverse array if we need too
 86 |         if (opt.order == 'reverse') { $boxes = $($boxes.get().reverse()); }
 87 | 
 88 |         //check if any css functions need to be evaluated
 89 |         $.each(opt.css, function (key, val) {
 90 |             if ($.isFunction(val)) {
 91 |                 opt.css[key] = val.call($box, opt);
 92 |             }
 93 |         });
 94 | 
 95 |         function reverseCSS(key, val) {
 96 |             if ($.type(val) == 'string') {
 97 |                 if (val.indexOf('-=') > -1)
 98 |                     toCss[key] = val.replace('-=', '+=');
 99 |                 else if (val.indexOf('+=') > -1)
100 |                     toCss[key] = val.replace('+=', '-=');
101 |             }
102 |         }
103 | 
104 |         for (var i = 0; i < len; ++i) {
105 |             var $box, toCss = opt.css, j = i;
106 |             if (opt.order == 'randomize') {
107 |                 //select a random box and remove it from the elements to choose from
108 |                 j = $.OmniSlide.rand($boxes.length);
109 |                 $box = $boxes.eq(j);
110 |                 $boxes = $boxes.not($box);
111 |             } else { $box = $boxes.eq(j); }
112 | 
113 |             if (opt.slide == 'next' && opt.css) {
114 |                 //if slide is next, then we need to reverse animation
115 |                 //so store the current values of whatever css we are changing
116 |                 //as the css to animate towards and then assign the specified
117 |                 //css to the box now
118 |                 toCss = $.OmniSlide.getCss($box, cssKeys);
119 |                 $box.css(opt.css);
120 |                 //special case where we apply a '-=' or '+=' css
121 |                 //we need to reverse that in the toCss
122 |                 $.each(opt.css, reverseCSS);
123 |             }
124 | 
125 |             //if (i == len - 1) data.cb = transitionDone;
126 |             //} else {
127 |                 //j = (opt.order == 'randomize') ? $boxes.eq(0) : $boxes.eq(i);
128 |                 //$box.data('animData', { opt: opt, toCss: toCss, cb: transitionDone });
129 |                 //.delay((opt.delay * i), 'omnislide.transition')
130 |                 //.queue('omnislide.transition', doAnim)
131 |                 //.dequeue('omnislide.transition');
132 |             //}
133 |             
134 |             $box.data('animData', { opt: opt, toCss: toCss, cb: (i == len-1) ? transitionDone : undefined })
135 |                 .delay((opt.delay * i), 'omnislide.transition')
136 |                 .queue('omnislide.transition', doAnim)
137 |                 .dequeue('omnislide.transition');
138 |         }
139 | 
140 |         function doAnim(next) {
141 |             var $this = $(this),
142 |                 data = $this.data('animData');
143 | 
144 |             if (!data) { $.OmniSlide.error('Error, animation data empty'); return; }
145 | 
146 |             if (data.opt.animation && $.isFunction(data.opt.animation)) {
147 |                 data.opt.animation.call(this, data.toCss, data.opt, data.cb);
148 |             } else {
149 |                 $(this).animate(data.toCss, data.opt.duration, data.opt.easing, data.cb);
150 |             }
151 |             next();
152 |         }
153 | 
154 |         function transitionDone() {
155 |             if (opt.slide == 'next') {
156 |                 api._deactivate($slides.eq(index));
157 |                 api._activate($slides.eq(next));
158 |             }
159 |             $wrapper.remove();
160 | 
161 |             if (callback) callback(next);
162 |         }
163 |     },
164 |     _boxifySlide: function ($slide, rows, cols, guid) {
165 |         var slideW = $slide.width(), slideH = $slide.height(),
166 |         w = slideW / cols, h = slideH / rows,
167 |         $boxes = $(), $wrapper,
168 |         api = $.OmniSlide.transitionAPI;
169 | 
170 |         //create boxes and set them up
171 |         for (var y = 0; y < rows; ++y) {
172 |             for (var x = 0; x < cols; ++x) {
173 |                 var $box, $contents;
174 | 
175 |                 $contents = $('<div class="slider-transition-box-contents"></div>')
176 |                     .css({
177 |                         width: slideW,
178 |                         height: slideH,
179 |                         marginLeft: -(w * x),
180 |                         marginTop: -(h * y)
181 |                     })
182 |                     .append(
183 |                         $slide.clone().css({
184 |                             width: slideW,
185 |                             height: slideH
186 |                         }).show()
187 |                     );
188 | 
189 |                 $box = $('<div class="slider-transition-box"></div>')
190 |                     .css({
191 |                         width: w + 1,
192 |                         height: h + 1,
193 |                         left: (w * x),
194 |                         top: (h * y)
195 |                     })
196 |                     .append($contents);
197 | 
198 |                 $boxes = $boxes.add($box);
199 |             }
200 |         }
201 |         $wrapper = $('<div class="slide-transition-box-wrapper" id="slider-transition-box-wrapper-' + guid + '"/>')
202 |             .css({
203 |                 height: slideH,
204 |                 width: slideW
205 |             })
206 |             .append($boxes);
207 | 
208 |         return [$boxes, $wrapper];
209 |     }
210 | };
211 | 
212 | $.OmniSlide.transitionAPI.transitions = {
213 |     fadeOut: {
214 |         css: { opacity: 0 },
215 |         delay: 75,
216 |         duration: 800,
217 |         rows: 3,
218 |         cols: 8,
219 |         order: 'random',
220 |         easing: 'easeInSine',
221 |         slide: 'this'
222 |     },
223 |     rowShrinkOut: {
224 |         css: { opacity: 0, width: 0, height: 0 },
225 |         duration: 1100,
226 |         delay: 85,
227 |         cols: 1,
228 |         rows: 8,
229 |         order: 'normal',
230 |         easing: 'easeInSine',
231 |         slide: 'this'
232 |     },
233 |     shrinkOut: {
234 |         css: {
235 |             top: '-=50',
236 |             left: '-=50',
237 |             width: 0,
238 |             height: 0,
239 |             opacity: 0
240 |         },
241 |         duration: 900,
242 |         delay: 75,
243 |         cols: 8,
244 |         rows: 3,
245 |         order: 'random',
246 |         easing: 'swing',
247 |         slide: 'this'
248 |     },
249 |     flyIn: {
250 |         css: {
251 |             left: function (opt) {
252 |                 var p;
253 |                 if (opt.direction.indexOf('left') > -1) p = '-=';
254 |                 else if (opt.direction.indexOf('right') > -1) p = '+=';
255 |                 else { return '-=0'; }
256 | 
257 |                 return (p + ($(this).parent().width() + $(this).width() + 1) + 'px');
258 |             },
259 |             top: function (opt) {
260 |                 var p;
261 |                 if (opt.direction.indexOf('top') > -1) p = '-=';
262 |                 else if (opt.direction.indexOf('bottom') > -1) p = '+=';
263 |                 else { return '-=0'; }
264 | 
265 |                 return (p + ($(this).parent().height() + $(this).height() + 1) + 'px');
266 |             }
267 |         },
268 |         delay: 100,
269 |         duration: 1500,
270 |         rows: 3,
271 |         cols: 8,
272 |         order: 'random',
273 |         easing: 'easeInOutBack',
274 |         slide: 'next',
275 |         direction: 'random'
276 |     }
277 | };
278 | $.OmniSlide.transitionAPI.transitions.colShrinkOut = $.extend(true, {}, $.OmniSlide.transitionAPI.transitions.rowShrinkOut);
279 | $.OmniSlide.transitionAPI.transitions.colShrinkOut.cols = 8;
280 | $.OmniSlide.transitionAPI.transitions.colShrinkOut.rows = 1;
281 | 
282 | //    //Transition extension example
283 | //    (function($, window, undefined) {
284 | //        var api = $.OmniSlide.transitionAPI;
285 | //
286 | //        $.extend(api.transitions, {
287 | //            cut: {
288 | //                //values here are overriden by values input to
289 | //                //the plugin so the values you put here are defaults
290 | //                duration: 1,         //time it takes for each box to animate (in ms)
291 | //                delay: 1,            //delay between each box's animation sequence (in ms)
292 | //                css: { opacity: 0 }, //the CSS to apply as the animation
293 | //                cols: 1,             //cols of boxes the slide is cut into
294 | //                rows: 1,             //rows of boxes the slide is cur into
295 | //                order: 'normal',     //the order to iterate through the slides when animating
296 | //                easing: 'linear',    //the easing to use for the animation
297 | //                slide: 'this'        //the slide the animation operates on if
298 | //                //NOTE: if slide is set to 'this' then the animation engine will animate using your css
299 | //                //variable as an ending point. If slide is set to 'next' then the animation engine reverses
300 | //                //that process; that is the boxes start at your specified css and work towards what
301 | //                //they were before your css is applied
302 | //            },
303 | //            advancedCss: {
304 | //                //sometimes simple values for css isn't enough, you can specify a
305 | //                //function for any CSS property and it will be evaluated for each box
306 | //                css: {
307 | //                    //here 'this' is the DOM element refering to the box, and opt is the full
308 | //                    //options variable for this transition (after user settings are applied)
309 | //                    left: function (opt) {
310 | //                        var p;
311 | //                        if (opt.direction.indexOf('left') > -1) p = '-=';
312 | //                        else if (opt.direction.indexOf('right') > -1) p = '+=';
313 | //                        else { return '-=0'; }
314 | //
315 | //                        return (p + ($(this).parent().width() + $(this).width() + 1) + 'px');
316 | //                    },
317 | //                    top: function (opt) {
318 | //                        var p;
319 | //                        if (opt.direction.indexOf('top') > -1) p = '-=';
320 | //                        else if (opt.direction.indexOf('bottom') > -1) p = '+=';
321 | //                        else { return '-=0'; }
322 | //
323 | //                        return (p + ($(this).parent().height() + $(this).height() + 1) + 'px');
324 | //                    }
325 | //                },
326 | //                delay: 100,
327 | //                duration: 1500,
328 | //                rows: 3,
329 | //                cols: 8,
330 | //                order: 'random',
331 | //                easing: 'easeInOutBack',
332 | //                slide: 'next',
333 | //                direction: 'random'      //direction is an optional variable that is not used by the animations engine
334 | //            },
335 | //            advanced: {
336 | //                //if your transition is more advanced than simple css
337 | //                //manipulation you can specify an animation function
338 | //                //to be called instead of the default $.animate(css)
339 | //                anim: function(toCss, opt, callback) {
340 | //                    //the 'this' arg is the DOM element to manipulate
341 | //                    //the 'toCss' arg is the CSS to animate towards (if css was specified)
342 | //                    //the 'opt' arg the transition options variable
343 | //                    //the 'callback' arg if passed is the callback to execute AFTER all animations complete.
344 | //                    //    If callback is passed, then this is the last box to operate on.
345 | //
346 | //                    //the opt variable passed is the transition options
347 | //                    //object, which has been extended into this object.
348 | //                    //The 'advanced' object in this case
349 | //                    $(this).animate(toCss, opt.duration, opt.easing, function() {
350 | //                        //always check if a callback was passed,
351 | //                        //and if so be sure to call it AFTER YOUR
352 | //                        //ANIMATIONS COMPLETE. Not doing so will
353 | //                        //prevent the slider from continuing after the transition
354 | //                        if(callback) callback();
355 | //                    });
356 | //                },
357 | //                delay: 100,
358 | //                duration: 1000,
359 | //                rows: 6,
360 | //                cols: 6,
361 | //                order: 'normal',
362 | //                easing: 'linear',
363 | //                slide: 'this'
364 | //            }
365 | //        });
366 | //    })(jQuery, window);


--------------------------------------------------------------------------------
/src/jquery.omnislide.js:
--------------------------------------------------------------------------------
  1 | ////
  2 | //Events:
  3 | // - transition-before  - Data Passed: { index: 'current slide index', next: 'index of next slide' }
  4 | // - transition-after   - Data Passed: { index: 'current slide index' }
  5 | // - thumb-mouseenter   - Data Passed: { originalEvent: 'original event var', target: 'DOM target' }
  6 | // - thumb-mouseleave   - Data Passed: { originalEvent: 'original event var', target: 'DOM target' }
  7 | // - thumb-click        - Data Passed: { originalEvent: 'original event var', target: 'DOM target' }
  8 | // - nav-mouseenter     - Data Passed: { originalEvent: 'original event var', target: 'DOM target' }
  9 | // - nav-mouseleave     - Data Passed: { originalEvent: 'original event var', target: 'DOM target' }
 10 | // - nav-click          - Data Passed: { originalEvent: 'original event var', target: 'DOM target' }
 11 | // - slide-mouseenter   - Data Passed: { originalEvent: 'original event var', target: 'DOM target' }
 12 | // - slide-mouseleave   - Data Passed: { originalEvent: 'original event var', target: 'DOM target' }
 13 | ////
 14 | //Animation Functions
 15 | // - animationIn/Out    - Data Passed: jQueryObj, show[true/false]
 16 | ////
 17 | 
 18 | //monkey wrench to make older versions of jQuery compatible
 19 | $.isNumeric = function (n) { return !isNaN(parseFloat(n)) && isFinite(n); };
 20 | 
 21 | //////////////////////////////////////
 22 | // Vars global to ALL slider instances
 23 | //////////////////////////////////////
 24 | /**
 25 |  * Defaults for all settings that can be
 26 |  * passed to OmniSlide
 27 |  * @type {object}
 28 |  */
 29 | var defaults = {
 30 |     slides: undefined,          //pass either xml string, xmlDocument, ul (DOM), ul (jQuery), ul (string jQuery selector)
 31 |     startSlide: 0,              //initial slide for the plugin to start displaying (0 based)
 32 |     theme: '',                  //theme for this slider
 33 |     transition: {
 34 |         duration: 800,          //the duration of the animation for each box of the transition
 35 |         wait: 2000              //the wait time to show each slide
 36 |     },
 37 |     timer: {
 38 |         visible: true,          //show canvas timer?
 39 |         height: 40,             //height of the timer
 40 |         width: 40,              //width of the timer
 41 |         border: 2,              //space between filled and empty colors on the timer
 42 |         colors: {
 43 |             empty: 'rgba(30, 30, 30, 0.8)',     //color to show on unfilled time
 44 |             filled: 'rgb(255, 255, 255)'  //color to show as ellapsed time
 45 |         },
 46 |         ringThickness: 4,       //width of the timer ring (filled, so not including border)
 47 |         type: 'ring',           //type of the timer; circle, ring, bar
 48 |         animAsOverlay: true,    //animate as overlay on slide (hide on transition, show on return)
 49 |         animationIn: false,     //custom animation to use for animating the timer into the slide
 50 |         animationOut: false     //custom animation to use for animating the timer out of the slide
 51 |     },
 52 |     navigation: {
 53 |         visible: true,          //enable navigation?
 54 |         fadeOnHover: true,      //fade out nav when hovered out
 55 |         animAsOverlay: true,    //animate as overlay on slide (hide on transition, show on return)
 56 |         animationIn: false,     //custom animation to use for animating the navigation into the slide
 57 |         animationOut: false     //custom animation to use for animating the navigation out of the slide
 58 |     },
 59 |     thumbs: {
 60 |         visible: true,          //enable thumbnails?
 61 |         slideOn: 'click',
 62 |         animAsOverlay: false,   //animate as overlay on slide (hide on transition, show on return)
 63 |         animationIn: false,     //custom animation to use for animating the navigation into the slide
 64 |         animationOut: false     //custom animation to use for animating the navigation out of the slide
 65 |     },
 66 |     title: {
 67 |         visible: true,          //enable slide titles?
 68 |         animAsOverlay: true,    //animate as overlay on slide (hide on transition, show on return)
 69 |         animationIn: false,     //custom animation to use for animating the title into the slide
 70 |         animationOut: false     //custom animation to use for animating the title out of the slide
 71 |     },
 72 |     overlay: {
 73 |         visible: true,          //enable slide overlay?
 74 |         animAsOverlay: true,    //animate as overlay on slide (hide on transition, show on return)
 75 |         animationIn: false,     //custom animation to use for animating the overlay into the slide
 76 |         animationOut: false     //custom animation to use for animating the overlay out of the slide
 77 |     },
 78 |     slideOverrides: {
 79 |         //These slide options override the given values in settings
 80 |         //you specify the index of the slide it overrides as the key
 81 |         //and the object is a full settings object just like you passed
 82 |         //above, you can override anything you want here.
 83 | 
 84 |         //Can't Override:
 85 |         // - slides
 86 |         // - startSlide
 87 |         // - theme
 88 |     },
 89 |     hoverPause: true            //pause when a user hovers into the current slide
 90 | },
 91 | /**
 92 |  * Local Storage container to hold information
 93 |  * about multiple OmniSlide instances using
 94 |  * their guid as a key
 95 |  * @type {object}
 96 |  */
 97 | storage = {
 98 |     settings: {},
 99 |     sliders: {},
100 |     slideIndexes: {}
101 | };
102 | 
103 | /**
104 |  * Main constructor method for creating new
105 |  * OmniSlide instances through the jQuery API
106 |  */
107 | function electricSlide(method) {
108 |     //////////////////////////////////////
109 |     // Variables used throughout plugin
110 |     //////////////////////////////////////
111 |     /**
112 |      * This instance's settings variable
113 |      * @type {object}
114 |      */
115 |     var settings = {},
116 |     /**
117 |      * This instance's assigned guid value
118 |      * @type {string}
119 |      */
120 |     guid = $.OmniSlide.generateGuid(),
121 |     /**
122 |      * The array of parsed slide information for creating
123 |      * the slide DOM elements
124 |      * @type {array}
125 |      */
126 |     slides = [],
127 |     /**
128 |      * The slider object contains all information about
129 |      * a slider isntance and is the main container
130 |      * that will be accessed to controll the slider
131 |      * @type {object}
132 |      */
133 |     slider = {
134 |         $container: $(),
135 |         $wrapper: $(),
136 |         $slider: $(),
137 |         $nav: $(),
138 |         $timer: $(),
139 |         $thumbs: $(),
140 |         $slides: $(),
141 |         $dataElm: $(),
142 |         dataElmVisible: false,
143 |         sliding: false,
144 |         timer: false
145 |     },
146 |     /**
147 |      * The current slide index we are viewing
148 |      * @type {number}
149 |      */
150 |     slideIndex,
151 | 
152 |     //////////////////////////////////////
153 |     // Public Plugin Methods
154 |     //////////////////////////////////////
155 |     /**
156 |      * All methods of the OmniSlide functionality
157 |      */
158 |     methods = {
159 |         /**
160 |          * Initializes the slider plugin
161 |          * @param {object} options Custom options that
162 |          *      will override default settings
163 |          */
164 |         init: function (options) {
165 |             return this.each(function () { //ensures chainability
166 |                 if (options) $.extend(true, settings, defaults, options);
167 | 
168 |                 //place guid where plugins can get at it
169 |                 settings.timer.guid = guid;
170 |                 settings.transition.guid = guid;
171 | 
172 |                 //parse out the slides into usable data
173 |                 var parse = parseSlides();
174 |                 if (parse) {
175 |                     $.OmniSlide.error('Error while parsing slides: ', parse);
176 |                     $.OmniSlide.error('settings.slides: ', settings.slides);
177 | 
178 |                     return false;
179 |                 }
180 | 
181 |                 //build out slider HTML
182 |                 buildSlider(this);
183 | 
184 |                 //setup slide Index and start transition timer
185 |                 slideIndex = -1;
186 |                 moveSlide(settings.startSlide);
187 | 
188 |                 //fade out the navigation
189 |                 if(settings.navigation.fadeOnHover) slider.$nav.hide();
190 | 
191 |                 //store for retreival by methods
192 |                 $(this).data('guid', guid);
193 |                 storage.settings[guid] = settings;
194 |                 storage.sliders[guid] = slider;
195 |                 
196 |                 return true;
197 |             });
198 |         },
199 |         /**
200 |          * changes an option to the given value and/or 
201 |          * returns value given by that option
202 |          * @param {string} option The option to update/get
203 |          * @param {*} value The value to update option to
204 |          */
205 |         option: function (option, value) {
206 |             if (loadStorage(this)) {
207 |                 if ($.type(option) == 'string') {
208 |                     var levels = option.split('.'),
209 |                     opt = settings,
210 |                     i = levels.length - 1,
211 |                     key;
212 | 
213 |                     while (i--) opt = opt[levels.shift()];
214 |                     key = levels.shift();
215 | 
216 |                     if (value === undefined) return opt[key];
217 | 
218 |                     if ($.isPlainObject(value))
219 |                         $.extend(true, opt[key], value);
220 |                     else {
221 |                         //if they update theme, we need to change classes
222 |                         if (key == 'theme') slider.$wrapper.find('*').andSelf().removeClass(settings.theme).addClass(value);
223 |                         opt[key] = value;
224 |                     }
225 |                 }
226 |             }
227 | 
228 |             return this;
229 |         },
230 |         /**
231 |          * Forces the slider to go to the slide specified (0 based)
232 |          * @param {number} slide Zero based slide index to go to
233 |          */
234 |         gotoSlide: function (slide) {
235 |             if (loadStorage(this)) { moveSlide(slide); }
236 | 
237 |             return this;
238 |         },
239 |         /**
240 |          * Forces slider to go to the next slide
241 |          */
242 |         nextSlide: function () { return methods.gotoSlide(); },
243 |         /**
244 |          * Forces slider to go to the previous slide
245 |          */
246 |         previousSlide: function () { return methods.gotoSlide(true); },
247 |         /**
248 |          * Forces slider to pause timer and wait to be played
249 |          */
250 |         pause: function () { if (loadStorage(this)) { pauseTimer(true); } return this; },
251 |         /**
252 |          * Forces slider to play timer and continue normal operation
253 |          */
254 |         play: function () { if (loadStorage(this)) { playTimer(true); } return this; },
255 |         /**
256 |          * Forces slider to animate in all the overlays associated with
257 |          * an instance
258 |          */
259 |         showOverlays: function () {
260 |             if (loadStorage(this)) { showOverlays(slideIndex); }
261 | 
262 |             return this;
263 |         },
264 |         /**
265 |          * Forces slider to animate out all the overlays associated with
266 |          * an instance
267 |          */
268 |         hideOverlays: function () {
269 |             if (loadStorage(this)) { hideOverlays(slideIndex); }
270 | 
271 |             return this;
272 |         },
273 |         /**
274 |          * Completely removes the slider instance, and restores the
275 |          * DOM to its original state
276 |          */
277 |         destroy: function () {
278 |             if (loadStorage(this)) {
279 |                 //remove slider and show the dataElment if it was visible before
280 |                 slider.$wrapper.remove();
281 |                 if (slider.dataElmVisible) slider.$dataElm.show();
282 | 
283 |                 //reset & delete timer, GC should then pick it up
284 |                 slider.timer.reset();
285 |                 delete slider.timer;
286 | 
287 |                 //reset storage variables
288 |                 storage.settings[guid] = {};
289 |                 storage.sliders[guid] = {};
290 |                 storage.slideIndexes[guid] = 0;
291 |             }
292 | 
293 |             return this;
294 |         }
295 |     };
296 | 
297 |     //////////////////////////////////////
298 |     // Transition Handler
299 |     //////////////////////////////////////
300 |     /**
301 |      * Handles slide transitioning
302 |      * @param {(number|boolean)=} slide The slide to move to, 
303 |      *      true for next, or false for previous
304 |      */
305 |     function moveSlide(slide) {
306 |         if (slider.sliding) return false;
307 | 
308 |         slider.sliding = true;
309 |         var nextSlide, sets;
310 | 
311 |         //if number go to that slide
312 |         if ($.isNumeric(slide))
313 |             nextSlide = (slide < slider.$slides.length && slide > -1) ? slide : 0;
314 |         //true means move backwards once
315 |         else if (slide === true)
316 |             nextSlide = (slideIndex - 1 < 0) ? slider.$slides.length - 1 : slideIndex - 1;
317 |         //otherwise move forward once
318 |         else
319 |             nextSlide = (slideIndex + 1) % slider.$slides.length;
320 | 
321 |         sets = checkOverrides(nextSlide);
322 | 
323 |         slider.$container.trigger('transition-before', [{ index: slideIndex, next: nextSlide}]);
324 | 
325 |         if (slideIndex === -1) {
326 |             slider.$slides.eq(nextSlide).show();
327 |             slider.$thumbs.eq(nextSlide).addClass('active');
328 | 
329 |             transitionCallback(nextSlide);
330 |             return true;
331 |         }
332 | 
333 |         //hide the overlays and do transition on callback
334 |         hideOverlays(slideIndex, function () {
335 |             slider.$thumbs.eq(slideIndex).removeClass('active');
336 |             slider.$thumbs.eq(nextSlide).addClass('active');
337 | 
338 |             //activate the transition and show overlays on callback
339 |             $.OmniSlide.transitionAPI.transition(
340 |                 sets.transition, 
341 |                 slider.$slides, 
342 |                 slideIndex, 
343 |                 nextSlide, 
344 |                 transitionCallback
345 |             );
346 |         });
347 | 
348 |         function transitionCallback(nextSlide) {
349 |             //loadStorage(guid);
350 |             slideIndex = nextSlide;
351 |             sets = checkOverrides();
352 |             storage.slideIndexes[guid] = slideIndex;
353 |             remakeTimer();
354 | 
355 |             slider.$timer.data('skip-anim', slider.timer.locked && slider.timer.stopped());
356 |             slider.$nav.data('skip-anim', sets.navigation.fadeOnHover && !slider.$slider.data('hovered'));
357 |             showOverlays(slideIndex, function () {
358 |                 slider.sliding = false;
359 |                 slider.$timer.data('skip-anim', false);
360 |                 slider.$nav.data('skip-anim', false);
361 |                 playTimer();
362 |                 slider.$container.trigger('transition-after', [{ index: slideIndex}]);
363 |             });
364 |         }
365 |         
366 |         return true;
367 |     }
368 | 
369 |     //////////////////////////////////////
370 |     // Utilities
371 |     //////////////////////////////////////
372 | 
373 |     //for checking if the current slide has setting overrides
374 |     function checkOverrides(slide) {
375 |         //if no slide passed, use slideIndex
376 |         slide = slide || slideIndex;
377 | 
378 |         //lose original setting reference
379 |         var sets = $.extend(true, {}, settings);
380 | 
381 |         //if there is an override, perform it
382 |         if (sets.slideOverrides[slide]) $.extend(true, sets, sets.slideOverrides[slide]);
383 | 
384 |         //return possibly overriden settings
385 |         return sets;
386 |     }
387 | 
388 |     //load up the stored values for the slider we are operating on
389 |     // (methods called with $().OmniSlide('...') aren't in closure scope)
390 |     function loadStorage($elm) {
391 |         if($elm.jquery) guid = $elm.data('guid');
392 |         else guid = $elm;
393 | 
394 |         if (!guid) {
395 |             $.OmniSlide.error('Unable to load from storage, element is not a slider: ', this);
396 |             return false;
397 |         }
398 | 
399 |         settings = storage.settings[guid];
400 |         slider = storage.sliders[guid];
401 |         slideIndex = storage.slideIndexes[guid];
402 | 
403 |         return true;
404 |     }
405 | 
406 |     //exec animations on slide overlays, custom or default
407 |     function animateOverlays(i, show, cb) {
408 |         var $overlay = slider.$slides.eq(i).find('div.slide-overlay'),
409 |         $title = slider.$slides.eq(i).find('h1.slide-title'),
410 |         extFunc, intFunc, opac, overlayWait, sets = checkOverrides(i);
411 | 
412 |         if (show) {
413 |             extFunc = 'animationIn';
414 |             intFunc = 'fadeTo';
415 |             opac = 1;
416 |         } else {
417 |             extFunc = 'animationOut';
418 |             intFunc = 'fadeTo';
419 |             opac = 0;
420 |         }
421 | 
422 |         slider.timer.stop();
423 | 
424 |         doAnimOverlay(sets.timer, slider.$timer);
425 |         doAnimOverlay(sets.navigation, slider.$nav);
426 |         doAnimOverlay(sets.thumbs, slider.$thumbs);
427 |         doAnimOverlay(sets.title, $title);
428 |         doAnimOverlay(sets.overlay, $overlay);
429 | 
430 |         function doAnimOverlay(obj, $obj) {
431 |             if (obj.visible && obj.animAsOverlay && $obj.length && !$obj.data('skip-anim')) {
432 |                 if (obj[extFunc] && $.isFunction(obj[extFunc])) obj[extFunc].call($obj, show);
433 |                 else $obj[intFunc]('slow', opac);
434 |             }
435 |         }
436 | 
437 |         overlayWait = setInterval(function () {
438 |             //wait until animations finish
439 |             if (slider.$timer.is(':animated') || slider.$nav.is(':animated') || slider.$thumbs.is(':animated') ||
440 |                 $overlay.is(':animated') || $title.is(':animated')) return;
441 | 
442 |             //animations done
443 |             clearInterval(overlayWait);
444 | 
445 |             if (cb) cb();
446 |         }, 50);
447 |     }
448 | 
449 |     //animateOverlays wrappers
450 |     function hideOverlays(i, cb) { return animateOverlays(i, false, cb); }
451 |     function showOverlays(i, cb) { return animateOverlays(i, true, cb); }
452 | 
453 |     //pauses the timer with optional hard lock
454 |     function pauseTimer(hard) {
455 |         if (slider.sliding) return false;
456 | 
457 |         if (slider.timer.stop() !== false && hard) {
458 |             slider.$nav.find('.slide-nav-pause').removeClass('slide-nav-pause').addClass('slide-nav-play');
459 |             slider.$timer.stop(true).fadeTo('slow', 0);
460 |             slider.timer.lock();
461 |             
462 |             return true;
463 |         }
464 |         
465 |         return false;
466 |     }
467 | 
468 |     //plays the timer optionaly a hard break of the lock
469 |     function playTimer(hard) {
470 |         if (slider.sliding) return false;
471 |         if (hard) slider.timer.unlock();
472 | 
473 |         if (slider.timer.start() !== false && hard) {
474 |             slider.$nav.find('.slide-nav-play').removeClass('slide-nav-play').addClass('slide-nav-pause');
475 |             slider.$timer.stop(true).fadeTo('slow', 1);
476 |             
477 |             return true;
478 |         }
479 |         
480 |         return false;
481 |     }
482 | 
483 |     //this will set overriden settings onto the timer
484 |     function remakeTimer() {
485 |         var sets = checkOverrides(),
486 |             state = slider.timer.state();
487 | 
488 |         slider.timer = new $.OmniSlide.timer(sets.transition.wait, sets.timer, moveSlide, slider.$timer[0]);
489 |         slider.timer.state(state);
490 |     }
491 | 
492 |     //////////////////////////////////////
493 |     // Event Handlers
494 |     //////////////////////////////////////
495 | 
496 |     //handles all events on Thumbnails
497 |     function thumbEvent(e) {
498 |         if (e.type == settings.thumbs.slideOn) {
499 |             moveSlide(slider.$thumbs.index(this));
500 |         }
501 | 
502 |         slider.$container.trigger('thumb-' + e.type, [{ originalEvent: e, target: this}]);
503 |     }
504 | 
505 |     //handles all events on Slides
506 |     function slideEvent(e) {
507 |         var sets = checkOverrides();
508 | 
509 |         switch (e.type) {
510 |             case 'mouseenter':
511 |                 slider.$slider.data('hovered', true);
512 |                 if (slider.sliding) break;
513 |                 
514 |                 if (sets.hoverPause) pauseTimer();
515 |                 slider.$nav.stop(true).fadeTo('slow', 1);
516 |                 break;
517 |             case 'mouseleave':
518 |                 slider.$slider.data('hovered', false);
519 |                 if (slider.sliding) break;
520 |                 
521 |                 playTimer();
522 |                 slider.$nav.stop(true).fadeTo('slow', 0);
523 |                 break;
524 |         }
525 |         slider.$container.trigger('slide-' + e.type, [{ originalEvent: e, target: this}]);
526 |     }
527 | 
528 |     //handles all events on Navigation
529 |     function navEvent(e) {
530 |         var sets = checkOverrides();
531 | 
532 |         if (e.type == 'click') {
533 |             //case 'click':
534 |             var ctrl = $.trim(this.className);
535 | 
536 |             if (ctrl.indexOf('slide-nav-back') > -1) {
537 |                 moveSlide(true);
538 |             } else if (ctrl.indexOf('slide-nav-forward') > -1) {
539 |                 moveSlide();
540 |             } else if (ctrl.indexOf('slide-nav-play') > -1) {
541 |                 playTimer(true);
542 |             } else if (ctrl.indexOf('slide-nav-pause') > -1) {
543 |                 pauseTimer(true);
544 |             }
545 |             //break;
546 |         }
547 |         slider.$container.trigger('nav-' + e.type, [{ originalEvent: e, target: this}]);
548 |     }
549 | 
550 |     //////////////////////////////////////
551 |     // Parsers and HTML Builders
552 |     //////////////////////////////////////
553 | 
554 |     //parses the slide input into a normalized format
555 |     function parseSlides() {
556 |         var data = settings.slides, $data;
557 | 
558 |         if (!data) return 'settings.slides is not defined!';
559 | 
560 |         if ($.type(data) == 'string') {
561 |             //if its a string it must be either a selector
562 |             //or xml data, lets try to parse the xml and if
563 |             //we fail lets assume its a selector
564 |             try {
565 |                 $data = $($.parseXML(data));
566 |             } catch (error) {
567 |                 $data = $(data);
568 |             }
569 |         } else if ($.type(data) == 'object') {
570 |             //if its an object then it is either a DOM object,
571 |             //an xmlDocument, or a jQuery object. In any of these
572 |             //cases we need to just wrap it in a jQuery object
573 |             //(Wrapping a jQuery object again just clones it)
574 |             $data = $(data);
575 |         }
576 | 
577 |         //parse as ul data
578 |         if ($data.is('ul')) {
579 |             $data.find('> li').each(function (i, slide) {
580 |                 var $slide = $(slide);
581 |                 slides.push({
582 |                     title: $slide.attr('title'),
583 |                     thumb: $slide.find('img.slide-thumb').attr('src'),
584 |                     image: $slide.find('img.slide-image').attr('src'),
585 |                     content: $slide.find('div.slide-content').html(),
586 |                     overlay: $slide.find('div.slide-overlay').html()
587 |                 });
588 |             });
589 |             slider.dataElmVisible = $data.is(':visible');
590 |             slider.$dataElm = $data.hide();
591 |         }
592 |         //parse as xml data
593 |         else if ($data.find('slides > slide').length > 0) {
594 |             $data.find('slides > slide').each(function (i, slide) {
595 |                 var $slide = $(slide);
596 |                 slides.push({
597 |                     title: $slide.attr('title'),
598 |                     thumb: $slide.attr('thumb'),
599 |                     image: $slide.attr('image'),
600 |                     content: $slide.find('content').text(),
601 |                     overlay: $slide.find('overlay').text()
602 |                 });
603 |             });
604 |         }
605 | 
606 |         if (slides.length === 0)
607 |             return 'settings.slides is either an invalid type or formatted incorrectly.';
608 | 
609 |         return false;
610 |     }
611 | 
612 |     //builds out the slider's HTML
613 |     function buildSlider(container) {
614 |         //initialize container
615 |         slider.$container = $(container);
616 | 
617 |         //create wrapper
618 |         slider.$wrapper = $('<div id="' + guid + '" class="slide-wrapper"/>')
619 |             .delegate('div.slide-box', 'hover', slideEvent)
620 |             .delegate('div.slide-nav-control', 'click', navEvent)
621 |             .appendTo(slider.$container);
622 | 
623 |         if (settings.thumbs.slideOn) slider.$wrapper.delegate('div.slide-thumb', settings.thumbs.slideOn, thumbEvent);
624 | 
625 |         //create slider box
626 |         slider.$slider = $('<div class="slide-box"/>').appendTo(slider.$wrapper);
627 | 
628 |         //create navigation
629 |         slider.$nav = $('<div class="slide-nav"/>').toggle(settings.navigation.visible).appendTo(slider.$slider);
630 | 
631 |         slider.$nav.append('<div class="slide-nav-control slide-nav-back">&nbsp;</div>');
632 |         slider.$nav.append('<div class="slide-nav-control slide-nav-pause">&nbsp;</div>');
633 |         slider.$nav.append('<div class="slide-nav-control slide-nav-forward">&nbsp;</div>');
634 | 
635 |         //create timer
636 |         slider.$timer = $('<canvas class="slide-timer"/>').toggle(settings.timer.visible).appendTo(slider.$slider);
637 |         slider.timer = new $.OmniSlide.timer(settings.transition.wait, settings.timer, moveSlide, slider.$timer[0]);
638 | 
639 |         //create thumbnail wrapper
640 |         var $tWrap = $('<div class="slide-thumbs-wrapper"/>').toggle(settings.thumbs.visible).appendTo(slider.$wrapper);
641 | 
642 |         //create slides and thumbs
643 |         $.each(slides, function (i, slide) {
644 |             //create slide
645 |             var $slide = $('<div class="slide"/>'),
646 |             $thumb = $('<div class="slide-thumb"/>');
647 | 
648 |             //add slide content
649 |             if (slide.image)
650 |                 $slide.css('background-image', 'url(' + slide.image + ')');
651 |             if (slide.content)
652 |                 $slide.append($('<div class="slide-content">' + slide.content + '</div>'));
653 |             if (slide.title)
654 |                 $slide.append($('<h1 class="slide-title" style="display:none;">' + slide.title + '</h1>'));
655 |             if (slide.overlay)
656 |                 $slide.append($('<div class="slide-overlay" style="display:none;">' + slide.overlay + '</div>'));
657 | 
658 | 
659 |             //add thumbnail
660 |             $thumb.append('<img class="slide-thumb-image" src="' + slide.thumb + '" alt=""/>');
661 |             $thumb.append('<span class="slide-thumb-title">' + slide.title + '</span>');
662 | 
663 |             slider.$thumbs = slider.$thumbs.add($thumb);
664 |             slider.$slides = slider.$slides.add($slide.hide());
665 |         });
666 |         slider.$slides.appendTo(slider.$slider);
667 |         slider.$thumbs.appendTo($tWrap);
668 | 
669 |         //add theme class
670 |         slider.$wrapper.find('*').andSelf().addClass(settings.theme);
671 |     }
672 | 
673 |     //////////////////////////////////////
674 |     // Method Calling Logic
675 |     //////////////////////////////////////
676 | 
677 |     if (methods[method]) {
678 |         return methods[method].apply(this, [].slice.call(arguments, 1));
679 |     } else if (!method || $.type(method) == 'object') {
680 |         return methods.init.apply(this, arguments);
681 |     } else {
682 |         $.error('Method "' + method + '" does not exist in jQuery.slide');
683 |         return this;
684 |     }
685 | }
686 | 
687 | //////////////////////////////////////
688 | // OmniSlide canvas timer
689 | //////////////////////////////////////
690 | function electricTimer(animLen, options, callback, canvas) {
691 |     if (!canvas) canvas = document.createElement('canvas');
692 |     
693 |     if (!canvas.getContext) {
694 |         $.OmniSlide.error('Canvas timer disabled, your browser is not supported.');
695 |         options.visible = false;
696 |     }
697 | 
698 |     //init canvas
699 |     canvas.height = options.height;
700 |     canvas.width = options.width;
701 | 
702 |     var ctx = (options.visible) ? canvas.getContext('2d') : false,
703 | 
704 |     cW = canvas.width,
705 |     cH = canvas.height,
706 | 
707 |     midX = cW / 2,
708 |     midY = cH / 2,
709 | 
710 |     timeEllapsed = 0,
711 | 
712 |     //radianStart = Math.PI - 0.5,
713 |     radianMax = Math.PI * 2,
714 |     radius = cW / 2,
715 |     lastRad = 0,
716 | 
717 |     border = options.border,
718 | 
719 |     tickLoop = null,
720 | 
721 |     FPS_RATES = [90, 45, 30],
722 |     PAINT_TIME = 3,
723 |     fps_rate = 0,
724 |     framerate = 1E3 / FPS_RATES[fps_rate],
725 | 
726 |     //paint background
727 |     bgPaint = function () {
728 |         if (!ctx) return;
729 |         clearCanvas();
730 | 
731 |         ctx.fillStyle = options.colors.empty;
732 |         ctx.strokeStyle = options.colors.empty;
733 | 
734 |         switch (options.type) {
735 |         case 'bar':
736 |             clearCanvas();
737 |             ctx.fillRect(0, 0, cW, cH);
738 |             break;
739 |         case 'circle':
740 |             ctx.beginPath();
741 |             ctx.arc(midX, midY, radius, 0, radianMax, false);
742 |             ctx.fill();
743 |             break;
744 |         default: //ring
745 |             ctx.beginPath();
746 |             ctx.arc(midX, midY, radius - options.ringThickness / 2 - border, 0, radianMax, false);
747 |             ctx.lineWidth = options.ringThickness + (border * 2);
748 |             ctx.stroke();
749 |             break;
750 |         }
751 |     },
752 | 
753 |     //paint forground based on % done
754 |     fgPaint = function () {
755 |         if (!ctx) return;
756 | 
757 |         var prct = timeEllapsed / animLen, rads;
758 |         ctx.fillStyle = options.colors.filled;
759 |         ctx.strokeStyle = options.colors.filled;
760 | 
761 |         switch (options.type) {
762 |         case 'bar':
763 |             var w = (cW * prct) - (border * 2);
764 | 
765 |             w = (w < 0) ? 0 : w;
766 |             ctx.clearRect(border, border, w, cH - (border * 2));
767 |             ctx.fillRect(border, border, w, cH - (border * 2));
768 |             break;
769 |         case 'circle':
770 |             rads = (radianMax * prct) - lastRad;
771 | 
772 |             ctx.beginPath();
773 |             ctx.moveTo(midX, midY);
774 |             ctx.arc(midX, midY, radius - border, lastRad, lastRad + rads, false);
775 |             ctx.fill();
776 | 
777 |             lastRad = lastRad + rads;
778 |             break;
779 |         default:
780 |             rads = (radianMax * prct) - lastRad;
781 | 
782 |             ctx.beginPath();
783 |             ctx.arc(midX, midY, radius - (options.ringThickness / 2) - border, lastRad, lastRad + rads, false);
784 |             ctx.lineWidth = options.ringThickness;
785 |             ctx.stroke();
786 | 
787 |             lastRad = lastRad + rads;
788 |             break;
789 |         }
790 |     },
791 | 
792 |     //clear canvas
793 |     clearCanvas = function () {
794 |         if(!ctx) return;
795 |         ctx.clearRect(0, 0, cW, cH);
796 |     },
797 | 
798 |     tick = function () {
799 |         var st, end;
800 | 
801 |         if (timeEllapsed >= animLen) {
802 |             timer.stop();
803 |             callback();
804 | 
805 |             return;
806 |         }
807 | 
808 |         timeEllapsed += framerate;
809 |         st = (new Date()).getTime();
810 |         fgPaint();
811 |         end = (new Date()).getTime();
812 | 
813 |         //if we take too long to paint, then increase framerate
814 |         if ((end - st) > PAINT_TIME && fps_rate !== FPS_RATES.length - 1) {
815 |             fps_rate++;
816 |             framerate = 1E3 / FPS_RATES[fps_rate];
817 |             clearInterval(tickLoop);
818 |             tickLoop = setInterval(tick, framerate);
819 |         }
820 |     },
821 | 
822 |     timer = {
823 |         state: function (st) {
824 |             if (st === undefined)
825 |                 return {
826 |                     locked: timer.locked,
827 |                     stopped: timer.stopped()
828 |                 };
829 | 
830 |             if (st.locked) timer.lock();
831 |             if (st.stopped) timer.stop();
832 |             
833 |             return timer;
834 |         },
835 |         timeLeft: function (time) {
836 |             if (time === undefined) return (animLen - timeEllapsed);
837 | 
838 |             if (timer.locked || time > animLen || time < 0) return false;
839 | 
840 |             timeEllapsed = (animLen - time);
841 |             return true;
842 |         },
843 |         animLen: function (len) {
844 |             if (len === undefined) return animLen;
845 | 
846 |             if (timer.locked || len < 0) return false;
847 | 
848 |             timer.stop();
849 |             animLen = len;
850 |             timer.reset();
851 |             return true;
852 |         },
853 |         start: function () {
854 |             if (timer.locked || tickLoop !== null) return false;
855 | 
856 |             tickLoop = setInterval(tick, framerate);
857 |             return true;
858 |         },
859 |         stop: function () {
860 |             if (timer.locked) return false;
861 | 
862 |             clearInterval(tickLoop);
863 |             tickLoop = null;
864 |             return true;
865 |         },
866 |         reset: function () {
867 |             var bLock = timer.locked;
868 | 
869 |             timer.unlock();
870 |             timer.stop();
871 |             bgPaint();
872 | 
873 |             lastRad = 0;
874 |             timeEllapsed = 0;
875 | 
876 |             //if it was locked before, relock it.
877 |             if (bLock) timer.lock();
878 |         },
879 |         lock: function () { timer.locked = true; },
880 |         unlock: function () { timer.locked = false; },
881 |         visible: function (v) { options.visible = v; if (v) bgPaint(); },
882 |         stopped: function () { return tickLoop === null; },
883 |         locked: false,
884 |         canvas: canvas
885 |     };
886 | 
887 |     timer.reset();
888 | 
889 |     //Public Interface
890 |     return timer;
891 | }
892 | 
893 | //////////////////////////////////////
894 | // Register jQuery Plugin
895 | //////////////////////////////////////
896 | //register plugin with jQuery
897 | $.fn.OmniSlide = electricSlide;
898 | 
899 | //////////////////////////////////////
900 | // Build the API variable
901 | //////////////////////////////////////
902 | //build global object for use by plugins as utilities
903 | $.OmniSlide = {
904 |     version: 0.7,
905 |     //general logging override to avoid errors
906 |     _log: function (type, args) {
907 |         if (console && console[type]) {
908 |             args = ([].slice.call(args, 0));
909 |             args.unshift($.OmniSlide._time());
910 |             console[type].apply(this, args);
911 |             return console;
912 |         }
913 | 
914 |         return {};
915 |     },
916 |     _time: function () {
917 |         return '[' + (new Date()).toISOString().replace(/.*T|Z/g, '') + ']';
918 |     },
919 |     getRandKey: function (obj) {
920 |         var keys = $.OmniSlide.getKeys(obj);
921 |         return keys[$.OmniSlide.rand(keys.length)];
922 |     },
923 |     //gets pertinent CSS attributes of an element
924 |     //and returns an object containing them
925 |     getCss: function ($elm, attrs) {
926 |         var css = {}, i;
927 | 
928 |         for (i = 0; i < attrs.length; ++i) {
929 |             css[attrs[i]] = $elm.css(attrs[i]);
930 |         }
931 | 
932 |         return css;
933 |     },
934 |     //iterates through an object and returns the keys
935 |     //optionally showing the private "_*" keys as well
936 |     getKeys: function (obj, showPrivate) {
937 |         var keys = [], key;
938 |         for (key in obj) {
939 |             if (showPrivate || key.charAt(0) != '_')
940 |                 keys.push(key);
941 |         }
942 |         return keys;
943 |     },
944 |     //generates a random number between 0 -> max
945 |     //also a little more "random" than built in
946 |     //Math.random() functionality
947 |     rand: function (max) {
948 |         return ((Math.random() * 0x10000) | 0) % max;
949 |     },
950 |     //logging wrappers
951 |     log: function () { $.OmniSlide._log('log', arguments); },
952 |     error: function () { $.OmniSlide._log('error', arguments); },
953 |     warn: function () { $.OmniSlide._log('warn', arguments); },
954 |     debug: function () { $.OmniSlide._log('info', arguments); },
955 |     //XOR: function (a, b) { return a ? !b : b; },
956 |     //XNOR: function (a, b) { return !($.OmniSlide.XOR(a, b)); },
957 |     //generates a Guid that will identify a slider throughout its life.
958 |     generateGuid: function () {
959 |         var S4 = function () {
960 |             return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
961 |         };
962 | 
963 |         return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
964 |     },
965 |     timer: electricTimer
966 | };
967 | //add version string to the global object
968 | $.OmniSlide.versionString = 'v' + $.OmniSlide.version + ' BETA';
969 | 


--------------------------------------------------------------------------------