|
|
| (73 intermediate revisions not shown) |
| Line 1: |
Line 1: |
| | + | {{Team:MSOE}} |
| | <HTML> | | <HTML> |
| - | <HEAD>
| + | <BODY> |
| - | <script type="text/javascript>
| + | <TABLE cellpadding = "5"> |
| - | /**
| + | <TR> |
| - | * Sliderman.js
| + | <TD width = 319 height = 50 bgcolor = #006331 valign = bottom align = left> <Font size="5" color="white">Jenna Harvestine</Font> |
| - | * Version: 1.3.7
| + | <TD width = 319 height = 50 bgcolor = #006331 valign = bottom align = left> <Font size="5" color="white">Patrick Van Handel</Font> |
| - | * Author: Taras Ozarko (tozarko@gmail.com)
| + | <TD width = 319 height = 50 bgcolor = #006331 valign = bottom align = left> <Font size="5" color="white">James Wiatr</Font> |
| - | *
| + | <TR> |
| - | * (c) 2010-2011 Devtrix. All rights reserved. http://www.devtrix.net/sliderman/
| + | <TD width = 319 height = 150 bgcolor = #009047 valign = bottom align = center><IMG src = "https://static.igem.org/mediawiki/2013/1/17/Jenna_Harvestine.png" border="5"></IMG> |
| - | **/
| + | <TD width = 319 height = 150 bgcolor = #009047 valign = bottom align = center><IMG src = "https://static.igem.org/mediawiki/2013/4/43/Patrick.PNG" border="5" width = "164" height = "282"> |
| - | | + | <TD width = 319 height = 150 bgcolor = #009047 valign = bottom align = center><IMG src = "https://static.igem.org/mediawiki/2013/6/63/JamesWiatr.png" border="5" width = "164" height = "282"> |
| - | var Sliderman = new function(){
| + | <TR> |
| - | var Sliderman = this;
| + | <TD width = 319 height = 100 bgcolor = #006331 valign = top align = left> <Font size="3" color="white"><b>Year:</b> Senior |
| - | | + | <br><b>Hometown:</b> Sussex, WI |
| - | function foreach(o, f){for(var k in o) if(o.hasOwnProperty(k) && f(k,o[k],o)) return;}
| + | <br><b>Extracurricular Activities:</b> Women’s Varsity Soccer, Women’s Varsity Basketball, Engineer’s Without Borders, Society for Biological Engineers |
| - | function is_array(a){return a && a.constructor == Array;}
| + | <br><b>Future Plans:</b> Graduate School & Working in the pharmaceutical/drug discovery industry |
| - | function is_string(a){return typeof(a) == 'string';}
| + | <br><b>Favorite Quote:</b> "Enjoy the journey because without any failures you can never truly appreciate the success." |
| - | function is_function(a){return typeof(a) == 'function';}
| + | <br><b>Favorite Movie:</b> Bridesmaids |
| - | function now(){return (new Date()).getTime();}
| + | <br><b>Favorite Microorganism:</b> Influenza virus |
| - | function this_blur(){this.blur();}
| + | </Font> |
| - |
| + | <TD width = 319 height = 100 bgcolor = #006331 valign = top align = left> <Font size="3" color="white"> |
| - | function random(l){
| + | <b>Year:</b> Senior |
| - | if(l == 0) return;
| + | <br><b>Hometown:</b> Appleton, WI |
| - | else if(l == 1) return 0;
| + | <br><b>Extracurricular Activities:</b> Society for Biological Engineers |
| - | r = Math.round(Math.random()*(l+1));
| + | <br><b>Future Plans:</b> Graduate School |
| - | if(r > 0 && r < l+1) r--;
| + | <br><b>Favorite Quote:</b> "Time you enjoy wasting is not time wasted." |
| - | else r = random(l);
| + | <br><b>Favorite Movie:</b> Law Abiding Citizen |
| - | return r;
| + | <br><b>Favorite Microorganism:</b> Toxoplasma gondii |
| - | }//random
| + | </Font> |
| - | | + | <TD width = 319 height = 100 bgcolor = #006331 valign = top align = left> <Font size="3" color="white"><b>Year:</b> Senior |
| - | function addElementEvent(o,e,f){
| + | <br><b>Hometown:</b> Chicago, IL |
| - | var of = o[e];
| + | <br><b>Extracurricular Activities:</b> Running |
| - | var f2 = function(){of();f();}
| + | <br><b>Future Plans:</b> Develop Vaccines |
| - | o[e] = !is_function(of) ? f : f2;
| + | <br><b>Favorite Quote:</b> "To give anything less than your best is to sacrifice the gift." |
| - | }//addElementEvent
| + | <br><b>Favorite Movie:</b> The Prestige |
| - | | + | <br><b>Favorite Microorganism:</b> Thermus Thermophilus |
| - | var _loadImage = [];
| + | </Font> |
| - | function loadImage(s,f,always_show_loading){
| + | <TR> |
| - | var i_onload = function(){_loadImage[s]=true;if(f)f(s);}
| + | <TD width = 319 height = 50 bgcolor = #006331 valign = bottom align = left> <Font size="5" color="white">Rebecca Majewski</Font> |
| - | var l = function(){if(_loadImage[s]){if(f)f(s);}else{var i=newElement('IMG');i.onload=i_onload;new function(){i.src=s;};}}
| + | <TD width = 319 height = 50 bgcolor = #006331 valign = bottom align = left> <Font size="5" color="white">Matthew Reichartz</Font> |
| - | if(always_show_loading) setTimeout(l, typeof(always_show_loading) == 'number' ? always_show_loading : 1000);
| + | <TD width = 319 height = 50 bgcolor = #006331 valign = bottom align = left> <Font size="5" color="white">Selena Dickinson</Font> |
| - | else l();
| + | <TR> |
| - | }//loadImage
| + | <TD width = 319 height = 150 bgcolor = #009047 valign = bottom align = center><IMG src = "https://static.igem.org/mediawiki/2013/0/09/Rebecca.jpg" border="5" width = "164" height = "282"></IMG> |
| - | | + | <TD width = 319 height = 150 bgcolor = #009047 valign = bottom align = center><IMG width = "164" height = "282" src = "https:// static. igem. org/ mediawiki/ 2013/ 1/ 17/ Mattreichartz. jpg" border= "5 "> |
| - | function array_copy(a){
| + | <TD width = 319 height = 150 bgcolor = #009047 valign = bottom align = center><IMG width = "164" height = "282" src = "https://static.igem.org/mediawiki/2013/1/1b/Selena.png" border="5"> |
| - | if(is_array(a)) var r = [];
| + | <TR> |
| - | else var r = {};
| + | <TD width = 319 height = 100 bgcolor = #006331 valign = top align = left> <Font size="3" color="white"> |
| - | foreach(a, function(i){r[i] = typeof(a[i]) != 'object' ? a[i] : array_copy(a[i]);});
| + | <b>Year:</b> Junior |
| - | return r;
| + | <br><b>Hometown:</b> Sun Prairie, WI |
| - | }//array_copy
| + | <br><b>Extracurricular Activities:</b> Rowing Team, Society of Biological Engineers |
| - | | + | <br><b>Future Plans:</b> Ph.D in Cancer Biology |
| - | function eq(a, b){
| + | <br><b>Favorite Quote:</b> "To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment." -Ralph Waldo Emerson |
| - | return String(a).replace(/^\s+/, '').replace(/\s+$/, '').toLowerCase() == String(b).replace(/^\s+/, '').replace(/\s+$/, '').toLowerCase();
| + | <br><b>Favorite Movie:</b> Thor |
| - | }//eq
| + | <br><b>Favorite Microorganism:</b> Tardigrade ("Water Bear") |
| - | | + | </Font> |
| - | function array_search(arr, a, b){
| + | <TD width = 319 height = 100 bgcolor = #006331 valign = top align = left> <Font size="3" color="white"><b>Year:</b> Junior |
| - | var result = false;
| + | <br><b>Hometown:</b> Milwaukee, WI |
| - | if(!b){
| + | <br><b>Extracurricular Activities:</b> Football, video games, Frisbee golf |
| - | foreach(arr, function(i){
| + | <br><b>Future Plans:</b> Research Assistant |
| - | if(eq(arr[i], b)){
| + | <br><b>Favorite Quote:</b> “I'm simply saying that life, uh... finds a way." -Dr. Ian Malcolm |
| - | result = i;
| + | <br><b>Favorite Movie:</b> Good Will Hunting |
| - | return true;
| + | <br><b>Favorite Microorganism:</b> Saccharomyces cerevisiae (Beer/wine making) |
| - | }
| + | </Font> |
| - | });
| + | <TD width = 319 height = 100 bgcolor = #006331 valign = top align = left> <Font size="3" color="white"><b>Year:</b> Sophomore |
| - | }
| + | <br><b>Hometown:</b> Oconto, WI |
| - | else{
| + | <br><b>Extracurricular Activities:</b> Society for Biological Engineers, Women’s Varsity Volleyball, Club Volleyball Coach, Swing Dance Club |
| - | foreach(arr, function(i){
| + | <br><b>Future Plans:</b> Attend graduate school for biochemistry |
| - | if(eq(arr[i][a], b)){
| + | <br><b>Favorite Quote:</b> “You have to make your own sunshine.” |
| - | result = i;
| + | <br><b>Favorite Movie:</b> Les Miserables |
| - | return true;
| + | <br><b>Favorite Microorganism:</b> Lactococcus cremoris—important bacteria in making cheddar cheese |
| - | }
| + | </Font> |
| - | });
| + | <TR> |
| - | }
| + | <TD width = 319 height = 50 bgcolor = #006331 valign = bottom align = left> <Font size="5" color="white">Dr. Katarina Midelfort</Font> |
| - | return result;
| + | <TD width = 319 height = 50 bgcolor = #006331 valign = bottom align = left> <Font size="5" color="white">Dr. Jung Lee</Font> |
| - | }//array_search
| + | <TD width = 319 height = 50 bgcolor = #006331 valign = bottom align = left> <Font size="5" color="white">Dr. Faisal Shaikh</Font> |
| - | | + | <TR> |
| - | function validateOption(a, b){
| + | <TD width = 319 height = 150 bgcolor = #009047 valign = bottom align = center><IMG src = "https://static.igem.org/mediawiki/2013/7/7f/Katarina.jpg" border="5" width = "200" height = "282"></IMG> |
| - | b = b.split(',');
| + | <TD width = 319 height = 150 bgcolor = #009047 valign = bottom align = center><IMG width = "200" height = "282" src = "https://static.igem.org/mediawiki/2013/0/01/Jung.jpg" border="5"> |
| - | var result;
| + | <TD width = 319 height = 150 bgcolor = #009047 valign = bottom align = center><IMG width = "200" height = "282" src = "https://static.igem.org/mediawiki/2013/8/82/Faisal.jpg" border="5"> |
| - | foreach(b, function(i){
| + | <TR> |
| - | result = b[i];
| + | <TD width = 319 height = 100 bgcolor = #006331 valign = top align = left> <Font size="3" color="white"> |
| - | if(eq(a, b[i])) return true;
| + | She completed a bachelor’s degree in Chemistry/C.S. track from Carnegie Mellon University, a master’s degree in Biophysics and Computational Biology from the University of Illinois, Urbana-Champaign, and a doctorate degree in Molecular and Systems Pharmacology and Toxicology from the Biological Engineering Department at the Massachusetts Institute of Technology. She has worked in both small and large company settings and has experience in expression, purification, characterization and engineering of proteins, biocatalysis, synthetic biology, and metabolic engineering. She has research interests in biocatalysis and metabolic engineering for the synthesis of biofuels, pharmaceutical intermediates, fine chemicals, metabolites, and other small molecules as well as a passion for practicing engineering education through applied examples and active learning and making engineering and science accessible for all. In her free time, she also loves to hike. |
| - | });
| + | </Font> |
| - | return result;
| + | <TD width = 319 height = 100 bgcolor = #006331 valign = top align = left> <Font size="3" color="white">Ph.D., Bioinformatics and Medicinal Chemistry, The University of Texas at Austin |
| - | }//validateOption
| + | M.S., Quantum and Computational Chemistry, Korea Institute of Science and Technology |
| - | | + | B.S., Chemistry, Kyung Hee University at Seoul |
| - | var setOpacity;
| + | </Font> |
| - | function setOpacityInit(){
| + | <TD width = 319 height = 100 bgcolor = #006331 valign = top align = left> <Font size="3" color="white">Dr. Shaikh is a professor at MSOE in the Physics and Chemistry department. He teaches a wide array of courses from thermodynamics to chemical engineering process design. He got his bachelor's degree in Chemical Engineering at the Mumbai Institute of Chemical Technology and his doctorate in Chemical Engineering from Texas A&M. |
| - | if(setOpacity) return;
| + | </Font> |
| - | var p, b = document.body, s = b.style;
| + | </TABLE> |
| - | if(is_string(s.opacity)) p = 'opacity';
| + | </BODY> |
| - | else if(is_string(s.MozOpacity)) p = 'MozOpacity';
| + | |
| - | else if(is_string(s.KhtmlOpacity)) p = 'KhtmlOpacity';
| + | |
| - | else if(b.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)[1]>=5.5) p = 'filter';
| + | |
| - | if(p == 'filter'){
| + | |
| - | setOpacity = function(style, v){
| + | |
| - | if(v > 1) v = 1;
| + | |
| - | else if(v < 0) v = 0;
| + | |
| - | style[p] = "alpha(opacity=" + Math.round(v*100) + ")";
| + | |
| - | }
| + | |
| - | }else if(p){
| + | |
| - | setOpacity = function(style, v){
| + | |
| - | if(v > 1) v = 1;
| + | |
| - | else if(v < 0) v = 0;
| + | |
| - | style[p] = v.toFixed(2);
| + | |
| - | }
| + | |
| - | }else setOpacity = ef
| + | |
| - | }//setOpacityInit
| + | |
| - | | + | |
| - | function setStyle(style, property, value){
| + | |
| - | if(is_string(value)) style[property] = value;
| + | |
| - | else if(property == 'clip') style[property] = 'rect('+Math.round(value[0])+'px, '+Math.round(value[1])+'px, '+Math.round(value[2])+'px, '+Math.round(value[3])+'px)';
| + | |
| - | else if(property == 'opacity') setOpacity(style, value);
| + | |
| - | else style[property] = Math.round(value)+'px';
| + | |
| - | }//setStyle
| + | |
| - | function setStyles(style, properties){
| + | |
| - | foreach(properties, function(property){
| + | |
| - | setStyle(style, property, properties[property]);
| + | |
| - | });
| + | |
| - | }
| + | |
| - | function hide(style){style.display = 'none';}
| + | |
| - | function show(style){style.display = '';}
| + | |
| - | | + | |
| - | function newElement(tagName, styles){
| + | |
| - | var e = document.createElement(tagName);
| + | |
| - | if(styles) setStyles(e.style, styles);
| + | |
| - | return e;
| + | |
| - | }//newElement
| + | |
| - |
| + | |
| - | var definedObjects = [];
| + | |
| - | function defineObject(t, o){
| + | |
| - | if(!is_array(definedObjects[t])) definedObjects[t] = [];
| + | |
| - | if(o){
| + | |
| - | var n = -1, i;
| + | |
| - | if(o.name){
| + | |
| - | if(i = array_search(definedObjects[t], 'name', o.name)) n = i;
| + | |
| - | }else o.name = 'Sliderman-nameless-object-'+definedObjects[t].length;
| + | |
| - | if(n >= 0) definedObjects[t][n] = o;
| + | |
| - | else definedObjects[t].push(o);
| + | |
| - | }
| + | |
| - | }//defineObjects
| + | |
| - | Sliderman.easing = function(e){defineObject('easing', e);}
| + | |
| - | Sliderman.order = function(e){defineObject('order', e);}
| + | |
| - | Sliderman.effect = function(e){defineObject('effect', EffectObject(e));}
| + | |
| - |
| + | |
| - | function getDefinedObjects(t){
| + | |
| - | return definedObjects[t];
| + | |
| - | }//getDefinedObjects
| + | |
| - |
| + | |
| - | function getDefinedObject(t, n){
| + | |
| - | var a = getDefinedObjects(t), i;
| + | |
| - | return is_array(a) && (i = array_search(a, 'name', n)) ? a[i] : false;
| + | |
| - | }//getDefinedObject
| + | |
| - |
| + | |
| - | var _EffectObject = 0;
| + | |
| - | function EffectObject(a){
| + | |
| - | if(typeof(a) != 'object') a = {};
| + | |
| - | if(!a.name) a.name = 'Sliderman-nameless-effect-'+_EffectObject++;
| + | |
| - | a.interval = parseInt(a.interval) || 40; a.duration = parseInt(a.duration) || 200; a.delay = parseInt(a.delay) || 0;
| + | |
| - | a.cols = parseInt(a.cols) || 1; a.rows = parseInt(a.rows) || 1; a.count = a.cols*a.rows;
| + | |
| - | a.top = a.top ? true : false; a.right = a.right ? true : false; a.bottom = a.bottom ? true : false; a.left = a.left ? true : false;
| + | |
| - | a.fade = a.fade ? true : false; a.zoom = a.zoom ? true : false; a.move = a.move ? true : false, a.chess = a.chess ? true : false;
| + | |
| - | a.easing = getDefinedObject('easing', a.easing) ? a.easing : 'swing';
| + | |
| - | a.order = getDefinedObject('order', a.order) ? a.order : 'random'; a.order_cache_id = [a.order, a.cols, a.rows, a.road, a.reverse].join(',');
| + | |
| - | a.cache_id = [a.interval, a.duration, a.delay, a.top, a.right, a.bottom, a.left, a.fade, a.zoom, a.move, a.chess, a.order_cache_id].join(',');
| + | |
| - | a.cacheId = function(){return a.cache_id + (a.order == 'random' ? now() : '');}
| + | |
| - | a.frames_count = Math.round(a.duration/a.interval); a.easingArr = getEasing(a);
| + | |
| - | a.P = []; a.pieces = function(w,h){w /= a.cols; h /= a.rows; var wh = w+'x'+h; if(!a.P[wh]){a.P[wh] = {width: w, height: h};
| + | |
| - | for(var c = 0; c < a.cols; c++) for(var r = 0; r < a.rows; r++) a.P[wh][r+','+c] = [r*h, c*w+w, r*h+h, c*w];
| + | |
| - | }return a.P[wh];}
| + | |
| - | return a;
| + | |
| - | }//EffectObject
| + | |
| - |
| + | |
| - | function slideContainer(slidesContainer, display){
| + | |
| - | var container = newElement('div', {width: display.width, height: display.height, position: 'absolute', top: 0, left: 0, overflow: 'hidden'});
| + | |
| - | slidesContainer.appendChild(container);
| + | |
| - | return container;
| + | |
| - | }//slideContainer
| + | |
| - | | + | |
| - | var EffectsArr = [];
| + | |
| - | function Effects(parameters){
| + | |
| - | var effect = parameters.effect, display = parameters.display;
| + | |
| - | if(parameters.contentmode) effect.zoom = false;
| + | |
| - | var cr, piece, r, image, startStylesArr = [], AnimateArr = [], needAnimate = [], AnimateItemsArr = [], styleStart, styleEnd, styleDif;
| + | |
| - | | + | |
| - | var container = slideContainer(parameters.container, display);
| + | |
| - | | + | |
| - | var pieces = effect.pieces(display.width, display.height);
| + | |
| - | var e_top, e_bottom, e_left, e_right;
| + | |
| - | var effectsOptStr = effect.cacheId();
| + | |
| - | var frameN;
| + | |
| - | var orderArr = getOrder(effect);
| + | |
| - | | + | |
| - | if(EffectsArr[effectsOptStr]){
| + | |
| - | startStylesArr = EffectsArr[effectsOptStr].startStylesArr;
| + | |
| - | AnimateArr = EffectsArr[effectsOptStr].AnimateArr;
| + | |
| - | needAnimate = EffectsArr[effectsOptStr].needAnimate;
| + | |
| - | }else{
| + | |
| - | for(r = 0; r < effect.rows; r++) for(c = 0; c < effect.cols; c++){cr = r+','+c;
| + | |
| - | if(effect.chess && orderArr[cr] % 2 == 1){
| + | |
| - | e_top = effect.bottom; e_bottom = effect.top;
| + | |
| - | e_left = effect.right; e_right = effect.left;
| + | |
| - | }else{
| + | |
| - | e_top = effect.top; e_bottom = effect.bottom;
| + | |
| - | e_left = effect.left; e_right = effect.right;
| + | |
| - | }
| + | |
| - | | + | |
| - | styleStart = {top: 0, left: 0, opacity: 1, width: display.width, height: display.height, overflow: 'hidden'};
| + | |
| - | styleEnd = array_copy(styleStart); piece = array_copy(pieces[cr]);
| + | |
| - | | + | |
| - | if(effect.fade) styleStart.opacity = 0;
| + | |
| - | | + | |
| - | if(e_top && e_bottom) piece[0] = piece[2] = (piece[0] + piece[2]) / 2;
| + | |
| - | else if(e_top) piece[2] -= pieces.height;
| + | |
| - | else if(e_bottom) piece[0] += pieces.height;
| + | |
| - | if(e_left && e_right) piece[1] = piece[3] = (piece[1] + piece[3]) / 2;
| + | |
| - | else if(e_left) piece[1] -= pieces.width;
| + | |
| - | else if(e_right) piece[3] += pieces.width;
| + | |
| - | | + | |
| - | if(effect.zoom){
| + | |
| - | styleStart.left = pieces[cr][3];
| + | |
| - | styleStart.top = pieces[cr][0];
| + | |
| - | if(e_left && e_right) styleStart.left += pieces.width / 2;
| + | |
| - | else if(e_right) styleStart.left += pieces.width;
| + | |
| - | else if(!e_left) styleStart.left = 0;
| + | |
| - | if(e_top && e_bottom) styleStart.top += pieces.height / 2;
| + | |
| - | else if(e_bottom) styleStart.top += pieces.height;
| + | |
| - | else if(!e_top) styleStart.top = 0;
| + | |
| - | if(e_left || e_right) piece[1] = piece[3] = 0;
| + | |
| - | if(e_top || e_bottom) piece[0] = piece[2] = 0;
| + | |
| - | styleStart.width = e_left || e_right ? 0 : display.width;
| + | |
| - | styleStart.height = e_top || e_bottom ? 0 : display.height;
| + | |
| - | }
| + | |
| - | | + | |
| - | if(effect.move){
| + | |
| - | if(e_top){
| + | |
| - | styleStart.top = parseInt(styleStart.top)-pieces.height;
| + | |
| - | piece[0] += pieces.height; piece[2] += pieces.height;
| + | |
| - | }
| + | |
| - | if(e_bottom){
| + | |
| - | styleStart.top = parseInt(styleStart.top)+pieces.height;
| + | |
| - | piece[0] -= pieces.height; piece[2] -= pieces.height;
| + | |
| - | }
| + | |
| - | if(e_left){
| + | |
| - | styleStart.left = parseInt(styleStart.left)-pieces.width;
| + | |
| - | piece[1] += pieces.width; piece[3] += pieces.width;
| + | |
| - | }
| + | |
| - | if(e_right){
| + | |
| - | styleStart.left = parseInt(styleStart.left)+pieces.width;
| + | |
| - | piece[1] -= pieces.width; piece[3] -= pieces.width;
| + | |
| - | }
| + | |
| - | }
| + | |
| - | | + | |
| - | styleStart.clip = piece;
| + | |
| - | styleEnd.clip = pieces[cr];
| + | |
| - | | + | |
| - | styleDif = [];
| + | |
| - | foreach(styleEnd, function(property){
| + | |
| - | if(styleStart[property].toString() != styleEnd[property].toString()){
| + | |
| - | styleDif[property] = [];
| + | |
| - | if(property == 'clip'){
| + | |
| - | foreach(styleStart[property], function(n){
| + | |
| - | styleDif[property][n] = styleEnd[property][n] - styleStart[property][n];
| + | |
| - | });
| + | |
| - | }else styleDif[property] = styleEnd[property] - styleStart[property];
| + | |
| - | needAnimate[cr] = true;
| + | |
| - | }
| + | |
| - | });
| + | |
| - | | + | |
| - | startStylesArr[cr] = styleStart; AnimateArr[cr] = [];
| + | |
| - | if(effect.delay) for(var n = 0; n < Math.round(orderArr[cr]*effect.delay/effect.interval); n++) AnimateArr[cr].push(null);
| + | |
| - | | + | |
| - | if(!needAnimate[cr]) AnimateArr[cr].push({display: ''});
| + | |
| - | else for(frameN = 1; frameN <= effect.frames_count; frameN++){
| + | |
| - | var style_c = [];
| + | |
| - | if(frameN == effect.frames_count) style_c = styleEnd;
| + | |
| - | else{
| + | |
| - | foreach(styleDif, function(property){
| + | |
| - | value = [];
| + | |
| - | if(property == 'clip'){
| + | |
| - | foreach(styleDif[property], function(n){
| + | |
| - | value[n] = styleStart[property][n]+styleDif[property][n]*effect.easingArr[frameN]
| + | |
| - | });
| + | |
| - | }else value = styleStart[property]+styleDif[property]*effect.easingArr[frameN]
| + | |
| - | style_c[property] = value;
| + | |
| - | });
| + | |
| - | }
| + | |
| - | AnimateArr[cr].push(style_c);
| + | |
| - | }
| + | |
| - | | + | |
| - | }//for
| + | |
| - | EffectsArr[effectsOptStr] = {startStylesArr: startStylesArr, AnimateArr: AnimateArr, needAnimate: needAnimate};
| + | |
| - | }
| + | |
| - | | + | |
| - | for(r = 0; r < effect.rows; r++) for(c = 0; c < effect.cols; c++){cr = r+','+c;
| + | |
| - | if(parameters.contentmode){
| + | |
| - | image = newElement('DIV', startStylesArr[cr]);
| + | |
| - | image.appendChild(parameters.src.cloneNode(true));
| + | |
| - | }else{
| + | |
| - | image = newElement('IMG', startStylesArr[cr]);
| + | |
| - | image.src = parameters.src;
| + | |
| - | }
| + | |
| - | var style = image.style;
| + | |
| - | style.position = 'absolute';
| + | |
| - | container.appendChild(image);
| + | |
| - | AnimateItemsArr[cr] = style;
| + | |
| - | if(!needAnimate[cr]) hide(AnimateItemsArr[cr]);
| + | |
| - | }
| + | |
| - | | + | |
| - | //ANIMATE
| + | |
| - | var time_s = now();
| + | |
| - | var framesCountAll = 1;
| + | |
| - | foreach(AnimateArr, function(index){framesCountAll = Math.max(AnimateArr[index].length, framesCountAll);});
| + | |
| - | var AnimateItem, AnimateItemsComplete = [], timerFuncStatus = true, timerFunc = function(){
| + | |
| - | if(timerFuncStatus){
| + | |
| - | var frameC = Math.ceil((now() - time_s) / effect.interval);
| + | |
| - | frameC = frameC >= framesCountAll ? framesCountAll-1 : frameC-1;
| + | |
| - | foreach(AnimateArr, function(index){
| + | |
| - | AnimateItem = frameC > AnimateArr[index].length-1 ? AnimateArr[index].length-1 : frameC;
| + | |
| - | if(AnimateArr[index][AnimateItem] && !AnimateItemsComplete[index+','+AnimateItem]){
| + | |
| - | setStyles(AnimateItemsArr[index], AnimateArr[index][AnimateItem]);
| + | |
| - | AnimateItemsComplete[index+','+AnimateItem] = true;
| + | |
| - | }
| + | |
| - | });
| + | |
| - | if(frameC == framesCountAll-1){
| + | |
| - | if(effect.count > 1){
| + | |
| - | container.innerHTML = '';
| + | |
| - | if(parameters.contentmode) container.appendChild(parameters.src);
| + | |
| - | else container.innerHTML = '<img src="'+parameters.src+'" width="'+display.width+'" height="'+display.height+'" />';
| + | |
| - | }
| + | |
| - | parameters.callback(container);
| + | |
| - | timerFuncStatus = false;
| + | |
| - | }
| + | |
| - | }
| + | |
| - | return timerFuncStatus;
| + | |
| - | };
| + | |
| - | var animateInterval = setInterval(function(){
| + | |
| - | if(!timerFunc()) clearInterval(animateInterval);
| + | |
| - | }, effect.interval);
| + | |
| - | | + | |
| - | }//Effects
| + | |
| - | function getOrder(effect){
| + | |
| - | var a = [], o, m = 0;
| + | |
| - | if(effect.count > 1){
| + | |
| - | o = getDefinedObject('order', effect.order);
| + | |
| - | if(!is_array(o.cache)) o.cache = [];
| + | |
| - | if(o.nocache || !o.cache[effect.order_cache_id]){
| + | |
| - | a = o.method(effect);
| + | |
| - | if(effect.reverse){
| + | |
| - | foreach(a, function(i, v){m = Math.max(m, v);});
| + | |
| - | foreach(a, function(i){a[i] = m - a[i];});
| + | |
| - | }
| + | |
| - | o.cache[effect.order_cache_id] = a;
| + | |
| - | }
| + | |
| - | a = o.cache[effect.order_cache_id];
| + | |
| - | }else a['0,0'] = 0;
| + | |
| - | return a;
| + | |
| - | }//getOrder
| + | |
| - |
| + | |
| - | function getEasing(effect){
| + | |
| - | var o = getDefinedObject('easing', effect.easing), i, c = effect.frames_count;
| + | |
| - | if(!is_array(o.cache)) o.cache = [];
| + | |
| - | if(!o.cache[c]){
| + | |
| - | o.cache[c] = [];
| + | |
| - | for(i = 1; i <= c; i++) o.cache[c][i] = o.method(i/c);
| + | |
| - | }
| + | |
| - | return o.cache[c];
| + | |
| - | }//getEasing
| + | |
| - |
| + | |
| - | Sliderman.slider = function(parameters){
| + | |
| - | setOpacityInit();
| + | |
| - | | + | |
| - | var Slider = {}, current = null, previous = null, EffectN = 0, nextIndex = null, prevImg, status = 'free', isHover = false, images = [], descriptions = [], links = [], ef = function(){};
| + | |
| - | | + | |
| - | //EVENTS
| + | |
| - | var events = parameters.events, eventCall = events ? function(e){if(events[e] && is_function(events[e])) events[e](Slider);} : ef;
| + | |
| - | var contentmode = parameters.contentmode;
| + | |
| - | | + | |
| - | //SLIDER EFECTS
| + | |
| - | var effects = [];
| + | |
| - | var effectsNames = [];
| + | |
| - | var addEffect = function(e){
| + | |
| - | if(is_string(e)){
| + | |
| - | e = e.split(',');
| + | |
| - | if(e.length == 1){
| + | |
| - | var globalEffect = getDefinedObject('effect', e[0]);
| + | |
| - | if(globalEffect) addEffect(globalEffect);
| + | |
| - | }else for(var i = 0; i < e.length; i++) addEffect(e[i]);
| + | |
| - | }else if(e){
| + | |
| - | e = EffectObject(e);
| + | |
| - | var effectsId = array_search(effects, 'name', e.name);
| + | |
| - | if(!effectsId) effectsId = effects.length;
| + | |
| - | effectsNames.push(e.name);
| + | |
| - | effects[effectsId] = array_copy(e);
| + | |
| - | }
| + | |
| - | }//addEffect
| + | |
| - | var getEffect = function(){
| + | |
| - | var n = 0;
| + | |
| - | if(effects.length > 1){
| + | |
| - | switch(display.effects_order){
| + | |
| - | case 'slides': n = current % effectsNames.length; break;
| + | |
| - | case 'effects': n = EffectN % effectsNames.length; break;
| + | |
| - | default:/*random*/
| + | |
| - | n = random(effectsNames.length);
| + | |
| - | }
| + | |
| - | }
| + | |
| - | EffectN++;
| + | |
| - | return effects[array_search(effects, 'name', effectsNames[n])];
| + | |
| - | }//getEffect
| + | |
| - | if(parameters.effects){
| + | |
| - | if(!is_array(parameters.effects)) parameters.effects = [parameters.effects];
| + | |
| - | for(var i = 0; i < parameters.effects.length; i++) addEffect(parameters.effects[i]);
| + | |
| - | }else parameters.effects = [];
| + | |
| - | if(!effects.length){
| + | |
| - | effects = array_copy(getDefinedObjects('effect'));
| + | |
| - | for(var i = 0; i < effects.length; i++) effectsNames.push(effects[i].name);
| + | |
| - | }
| + | |
| - | | + | |
| - | //OPTIONS
| + | |
| - | var display = parameters.display || {};
| + | |
| - | display.width = parameters.width;
| + | |
| - | display.height = parameters.height;
| + | |
| - | var loading = display.loading || {};
| + | |
| - | var description = display.description || null;
| + | |
| - | var navigation = display.navigation || null;
| + | |
| - | var buttons = display.buttons || null;
| + | |
| - |
| + | |
| - | Slider.random = function(){
| + | |
| - | var r = random(images.length);
| + | |
| - | return images.length > 1 && r == current ? Slider.random() : Slider.go(r);
| + | |
| - | }
| + | |
| - | Slider.next = function(){
| + | |
| - | var r = Slider.go(current === null ? 0 : current + 1);
| + | |
| - | if(display.loop && r){
| + | |
| - | autoplayCount++;
| + | |
| - | if(autoplayCount+1 >= images.length*display.loop) autoplay = ef;
| + | |
| - | }
| + | |
| - | return r;
| + | |
| - | }
| + | |
| - | Slider.prev = function(){
| + | |
| - | var r = Slider.go(current === null ? -1 : current - 1);
| + | |
| - | if(display.loop && r) autoplayCount--;
| + | |
| - | return r;
| + | |
| - | }
| + | |
| - | Slider.go = function(index){
| + | |
| - | index = (images.length + index) % images.length;
| + | |
| - | autoplay(false);
| + | |
| - | if(status != 'free') nextIndex = index;
| + | |
| - | if(status != 'free' || current == index) return autoplay(true) && false;
| + | |
| - | previous = current;
| + | |
| - | current = index;
| + | |
| - | eventCall('loading');
| + | |
| - | showLoading(true);
| + | |
| - | if(contentmode) doEffect(images[current]);
| + | |
| - | else loadImage(images[current], doEffect, display.always_show_loading);
| + | |
| - | return true;
| + | |
| - | }//go
| + | |
| - | Slider.get = function(a){
| + | |
| - | switch(a){
| + | |
| - | case 'length': return images.length; break;
| + | |
| - | case 'current': return current; break;
| + | |
| - | case 'previous': return previous; break;
| + | |
| - | case 'images': return images; break;
| + | |
| - | case 'links': return links; break;
| + | |
| - | case 'descriptions': return descriptions; break;
| + | |
| - | }
| + | |
| - | }//get
| + | |
| - | var autoplayStatus = 'stop';//play,pause,stop
| + | |
| - | Slider.play = function(){if(!display.autoplay) return;
| + | |
| - | if(autoplayStatus != 'play'){
| + | |
| - | var s = autoplayStatus == 'stop';
| + | |
| - | autoplayStatus = 'play';
| + | |
| - | if(s) (display.random ? Slider.random : Slider.go)(0);
| + | |
| - | else autoplay(true);
| + | |
| - | }
| + | |
| - | }//play
| + | |
| - | Slider.pause = function(){if(!display.autoplay) return;
| + | |
| - | if(autoplayStatus == 'pause') Slider.play();
| + | |
| - | else if(autoplayStatus == 'play'){
| + | |
| - | autoplayStatus = 'pause';
| + | |
| - | autoplay(false);
| + | |
| - | }
| + | |
| - | }//pause
| + | |
| - | Slider.stop = function(){if(!display.autoplay) return;
| + | |
| - | autoplayStatus = 'stop';
| + | |
| - | current = null;
| + | |
| - | previous = null;
| + | |
| - | nextIndex = null;
| + | |
| - | EffectN = 0;
| + | |
| - | autoplay(false);
| + | |
| - | removePrevImg();
| + | |
| - | if(display.first_slide) displayFirstSlide();
| + | |
| - | update();
| + | |
| - | }//stop
| + | |
| - | Slider.start = function(){if(!display.autoplay) return;
| + | |
| - | Slider.stop();
| + | |
| - | Slider.play();
| + | |
| - | }//start
| + | |
| - |
| + | |
| - | var removePrevImg = function(){
| + | |
| - | if(prevImg && status == 'free'){
| + | |
| - | prevImg.parentNode.removeChild(prevImg);
| + | |
| - | prevImg = null;
| + | |
| - | }
| + | |
| - | }//removePrevImg
| + | |
| - |
| + | |
| - | function displayFirstSlide(){
| + | |
| - | var c = slideContainer(imagesCont, display);
| + | |
| - | if(parameters.contentmode) c.appendChild(images[0]);
| + | |
| - | else c.innerHTML = '<img src="'+images[0]+'" width="'+display.width+'" height="'+display.height+'" />';
| + | |
| - | EffectN = 1;
| + | |
| - | previous = null;
| + | |
| - | current = 0;
| + | |
| - | }//displayFirstSlide
| + | |
| - |
| + | |
| - | function update(){
| + | |
| - | descriptionShow(); linkUpd(); navigationUpd();
| + | |
| - | }//update
| + | |
| - | | + | |
| - | var styleDef = {width: display.width, height: display.height, position: 'absolute', top: 0, left: 0, display: 'block'};
| + | |
| - | | + | |
| - | var mainCont = document.getElementById(parameters.container);
| + | |
| - | function addElementEventOnmouseover(){isHover = true;
| + | |
| - | if(buttons && buttons.hide) show(buttonsCont.style);
| + | |
| - | if(description && description.hide && !contentmode) show(descriptionCont.style);
| + | |
| - | if(display.pause) autoplay(false);
| + | |
| - | }
| + | |
| - | addElementEvent(mainCont, 'onmouseover', addElementEventOnmouseover);
| + | |
| - | function addElementEventOnmouseout(){isHover = false;
| + | |
| - | if(buttons && buttons.hide) hide(buttonsCont.style);
| + | |
| - | if(description && description.hide && !contentmode) hide(descriptionCont.style);
| + | |
| - | if(display.pause) autoplay(true);
| + | |
| - | }
| + | |
| - | addElementEvent(mainCont, 'onmouseout', addElementEventOnmouseout);
| + | |
| - | | + | |
| - | //GET CONTENT
| + | |
| - | var maps = document.getElementsByTagName('MAP');
| + | |
| - | for(var i = 0; i < mainCont.childNodes.length; i++) if(mainCont.childNodes[i].nodeType == 1){
| + | |
| - | if(contentmode) images.push(mainCont.childNodes[i].cloneNode(true));
| + | |
| - | else{
| + | |
| - | switch(mainCont.childNodes[i].tagName){
| + | |
| - | case 'A':
| + | |
| - | var img = mainCont.childNodes[i].getElementsByTagName('IMG');
| + | |
| - | if(img.length){
| + | |
| - | images.push(img[0].src);
| + | |
| - | links[images.length-1] = mainCont.childNodes[i];
| + | |
| - | }else descriptions[images.length-1] = mainCont.childNodes[i];
| + | |
| - | break;
| + | |
| - | case 'IMG':
| + | |
| - | images.push(mainCont.childNodes[i].src);
| + | |
| - | if(mainCont.childNodes[i].useMap && maps.length) for(var m = 0; m < maps.length; m++){
| + | |
| - | if(maps[m].name && mainCont.childNodes[i].useMap.replace(/^[^#]*#/, '') == maps[m].name) links[images.length-1] = maps[m];
| + | |
| - | }
| + | |
| - | break;
| + | |
| - | case 'MAP': continue; break;
| + | |
| - | default: descriptions[images.length-1] = mainCont.childNodes[i];
| + | |
| - | }
| + | |
| - | }
| + | |
| - | hide(mainCont.childNodes[i].style);
| + | |
| - | }
| + | |
| - | if(!contentmode) for(var i = 0; i < images.length; i++) loadImage(images[i]);
| + | |
| - | | + | |
| - | //CONTAINERS
| + | |
| - | var sliderCont = newElement('DIV', {width: display.width, height: display.height, position: 'relative'}); mainCont.appendChild(sliderCont);
| + | |
| - | var imagesCont = newElement('DIV', styleDef); sliderCont.appendChild(imagesCont);
| + | |
| - | partsCont = sliderCont;
| + | |
| - | | + | |
| - | //LINKS
| + | |
| - | if(contentmode) var linkUpd = ef;
| + | |
| - | else{
| + | |
| - | var lnk = newElement('DIV', styleDef); partsCont.appendChild(lnk);
| + | |
| - | var linkUpd = function(){
| + | |
| - | lnk.innerHTML = ''; value = links[current];
| + | |
| - | if(value){
| + | |
| - | if(value.tagName == 'MAP'){
| + | |
| - | var a = newElement('IMG', styleDef);
| + | |
| - | a.src = images[current]; a.useMap = '#'+value.name;
| + | |
| - | }else{
| + | |
| - | var a = newElement('A', styleDef);
| + | |
| - | a.href = value.href; a.target = value.target;
| + | |
| - | }
| + | |
| - | setStyles(a.style, {opacity: 0, background: '#000000'});
| + | |
| - | a.onfocus = this_blur;
| + | |
| - | lnk.appendChild(a);
| + | |
| - | }
| + | |
| - | }
| + | |
| - | }
| + | |
| - | | + | |
| - | //LOADING
| + | |
| - | if(contentmode) var showLoading = ef;
| + | |
| - | else{
| + | |
| - | var loadingCont = newElement('DIV'); partsCont.appendChild(loadingCont);
| + | |
| - | hide(loadingCont.style);
| + | |
| - | if(loading.background){
| + | |
| - | var loadingBgStyle = array_copy(styleDef);
| + | |
| - | loadingBgStyle.background = loading.background;
| + | |
| - | if(loading.opacity) loadingBgStyle.opacity = loading.opacity;
| + | |
| - | loadingCont.appendChild(newElement('DIV', loadingBgStyle));
| + | |
| - | }
| + | |
| - | if(loading.image){
| + | |
| - | var loadingImgStyle = array_copy(styleDef);
| + | |
| - | loadingImgStyle.background = 'url('+(loading.image)+') no-repeat center center';
| + | |
| - | loadingCont.appendChild(newElement('DIV', loadingImgStyle));
| + | |
| - | }
| + | |
| - | var showLoading = function(a){
| + | |
| - | if(a) show(loadingCont.style);
| + | |
| - | else hide(loadingCont.style);
| + | |
| - | status = a ? 'loading' : 'free';
| + | |
| - | }
| + | |
| - | }
| + | |
| - | | + | |
| - | //DESCRIPTION
| + | |
| - | var descriptionShow;
| + | |
| - | if(description && !contentmode){
| + | |
| - | var descriptionCont = newElement('DIV'); partsCont.appendChild(descriptionCont);
| + | |
| - | if(description.hide) hide(descriptionCont.style);
| + | |
| - | | + | |
| - | var descriptionStl = {position: 'absolute', overflow: 'hidden', textAlign: 'left'};
| + | |
| - | if(!description) description = [];
| + | |
| - | description.position = validateOption(description.position, 'top,left,right,bottom')
| + | |
| - | descriptionStl.background = description.background || 'white';
| + | |
| - | descriptionStl.opacity = description.opacity || 0.5;
| + | |
| - | descriptionStl.width = description.position == 'top' || description.position == 'bottom' ? display.width : description.width || display.width*0.2;
| + | |
| - | descriptionStl.height = description.position == 'left' || description.position == 'right' ? display.height : description.height || display.height*0.2;
| + | |
| - | descriptionStl[description.position == 'bottom'?'bottom':'top'] = 0;
| + | |
| - | descriptionStl[description.position == 'right'?'right':'left'] = 0;
| + | |
| - | | + | |
| - | var descBg = newElement('DIV', descriptionStl); descriptionCont.appendChild(descBg);
| + | |
| - | descriptionStl.opacity = 1; descriptionStl.background = '';
| + | |
| - | var desc = newElement('DIV', descriptionStl); descriptionCont.appendChild(desc);
| + | |
| - | | + | |
| - | function descriptionShow(){
| + | |
| - | desc.innerHTML = '';
| + | |
| - | setStyle(descriptionCont.style, 'visibility', 'hidden');
| + | |
| - | var value = descriptions[current];
| + | |
| - | if(value){
| + | |
| - | setStyle(descriptionCont.style, 'visibility', 'visible');
| + | |
| - | value = value.cloneNode(true);
| + | |
| - | show(value.style);
| + | |
| - | desc.appendChild(value);
| + | |
| - | if(isHover) show(descriptionCont.style);
| + | |
| - | }
| + | |
| - | }
| + | |
| - | }else descriptionShow = ef
| + | |
| - | | + | |
| - | //BUTTONS
| + | |
| - | if(buttons){
| + | |
| - | var buttonsCont = newElement('DIV'); partsCont.appendChild(buttonsCont);
| + | |
| - | if(buttons.hide) hide(buttonsCont.style);
| + | |
| - | var btnPrev = newElement('A'); buttonsCont.appendChild(btnPrev);
| + | |
| - | btnPrev.href = 'javascript:void(0);';
| + | |
| - | var btnNext = btnPrev.cloneNode(true); buttonsCont.appendChild(btnNext);
| + | |
| - | btnPrev.onfocus = this_blur;
| + | |
| - | btnNext.onfocus = this_blur;
| + | |
| - | btnPrev.onclick = Slider.prev;
| + | |
| - | btnNext.onclick = Slider.next;
| + | |
| - | if(buttons.prev.label) btnPrev.innerHTML = is_string(buttons.prev.label) ? buttons.prev.label : 'prev';
| + | |
| - | if(buttons.prev.label) btnNext.innerHTML = is_string(buttons.next.label) ? buttons.next.label : 'next';
| + | |
| - | if(buttons.prev.className) btnPrev.className = buttons.prev.className;
| + | |
| - | if(buttons.next.className) btnNext.className = buttons.next.className;
| + | |
| - | if(buttons.opacity || buttons.prev.opacity) setOpacity(btnPrev.style, buttons.opacity || buttons.prev.opacity);
| + | |
| - | if(buttons.opacity || buttons.next.opacity) setOpacity(btnNext.style, buttons.opacity || buttons.next.opacity);
| + | |
| - | }
| + | |
| - | | + | |
| - | //NAVIGATION
| + | |
| - | var navigationUpd;
| + | |
| - | if(navigation){
| + | |
| - | var navigationCont = document.getElementById(navigation.container);
| + | |
| - | var a;
| + | |
| - | | + | |
| - | if(navigation.prev){
| + | |
| - | a = newElement('A');
| + | |
| - | if(navigation.prev.label) a.innerHTML = is_string(navigation.prev.label) ? navigation.prev.label : 'Prev';
| + | |
| - | if(navigation.prev.className) a.className = navigation.prev.className;
| + | |
| - | a.href = 'javascript:void(0);';
| + | |
| - | a.onfocus = this_blur;
| + | |
| - | a.onclick = Slider.prev;
| + | |
| - | navigationCont.appendChild(a);
| + | |
| - | }
| + | |
| - | | + | |
| - | var navigationLinks = [];
| + | |
| - | function a_onclick(){Slider.go(this.id.replace(parameters.container+'_SliderNavigation', ''));};
| + | |
| - | for(var i = 0; i < images.length; i++){
| + | |
| - | a = newElement('A');
| + | |
| - | if(navigation.label) a.innerHTML = is_string(navigation.label) ? navigation.label : i+1;
| + | |
| - | if(navigation.className) a.className = navigation.className;
| + | |
| - | a.href = 'javascript:void(0);';
| + | |
| - | a.id = parameters.container+'_SliderNavigation'+i;
| + | |
| - | a.onfocus = this_blur;
| + | |
| - | a.onclick = a_onclick;
| + | |
| - | navigationLinks.push(a);
| + | |
| - | navigationCont.appendChild(a);
| + | |
| - | }
| + | |
| - | | + | |
| - | if(navigation.next){
| + | |
| - | a = newElement('A');
| + | |
| - | if(navigation.next.label) a.innerHTML = is_string(navigation.next.label) ? navigation.next.label : 'Next';
| + | |
| - | if(navigation.next.className) a.className = navigation.next.className;
| + | |
| - | a.href = 'javascript:void(0);';
| + | |
| - | a.onfocus = this_blur;
| + | |
| - | a.onclick = Slider.next;
| + | |
| - | navigationCont.appendChild(a);
| + | |
| - | }
| + | |
| - | | + | |
| - | function navigationUpd(){
| + | |
| - | for(var i = 0; i < navigationLinks.length; i++) navigationLinks[i].className = navigationLinks[i].className.replace(/\bactive\b/g, '');
| + | |
| - | if(navigationLinks[current]) navigationLinks[current].className += ' active';
| + | |
| - | }
| + | |
| - | }else navigationUpd = ef
| + | |
| - | | + | |
| - | //AUTOPLAY
| + | |
| - | var autoplayCount = 0;
| + | |
| - | if(display.autoplay){
| + | |
| - | var autoplayTimeout;
| + | |
| - | var autoplay = function(a){
| + | |
| - | if(autoplayTimeout){
| + | |
| - | clearTimeout(autoplayTimeout);
| + | |
| - | autoplayTimeout = null;
| + | |
| - | }
| + | |
| - | if(a && !(isHover && display.pause) && autoplayStatus == 'play') autoplayTimeout = setTimeout(display.random ? Slider.random : Slider.next, display.autoplay);
| + | |
| - | }//autoplay
| + | |
| - | }else var autoplay = ef
| + | |
| - | | + | |
| - | var doEffect = function(src){
| + | |
| - | if(autoplayStatus == 'stop') autoplayStatus = 'pause';
| + | |
| - | eventCall('before');
| + | |
| - | showLoading(false); status = 'busy'; update();
| + | |
| - | Effects({effect: getEffect(), display: display, container: imagesCont, src: src, callback: function(img){
| + | |
| - | status = 'free'; autoplay(true);
| + | |
| - | removePrevImg();
| + | |
| - | prevImg = img;
| + | |
| - | eventCall('after');
| + | |
| - | if(autoplayStatus == 'stop') removePrevImg();
| + | |
| - | else if(nextIndex !== null){
| + | |
| - | Slider.go(nextIndex);
| + | |
| - | nextIndex = null;
| + | |
| - | }
| + | |
| - | }, contentmode: contentmode});
| + | |
| - | };
| + | |
| - | | + | |
| - | if(display.mousewheel){
| + | |
| - | onmousewheel = function(d){
| + | |
| - | if(d > 0) Slider.prev();
| + | |
| - | else if(d < 0) Slider.next();
| + | |
| - | return true;
| + | |
| - | };
| + | |
| - | function wheel(event){
| + | |
| - | var d = 0;
| + | |
| - | if(!event) event = window.event;
| + | |
| - | if(event.wheelDelta){
| + | |
| - | d = event.wheelDelta/120;
| + | |
| - | if(window.opera) d = -d;
| + | |
| - | }else if(event.detail) d = -event.detail/3;
| + | |
| - | if(d && onmousewheel(d)){
| + | |
| - | if(event.preventDefault) event.preventDefault();
| + | |
| - | event.returnValue = false;
| + | |
| - | }
| + | |
| - | }//wheel
| + | |
| - | if(mainCont.addEventListener){
| + | |
| - | mainCont.addEventListener("DOMMouseScroll",wheel,false);
| + | |
| - | mainCont.addEventListener("mousewheel",wheel,false);
| + | |
| - | }else addElementEvent(mainCont, 'onmousewheel', wheel);
| + | |
| - | }
| + | |
| - |
| + | |
| - | if(display.first_slide) displayFirstSlide();
| + | |
| - | update();
| + | |
| - | if(typeof(display.autostart) == 'undefined' || display.autostart) Slider.play();
| + | |
| - | return Slider;
| + | |
| - | }//Sliderman.slider
| + | |
| - |
| + | |
| - | | + | |
| - | }//Sliderman
| + | |
| - | | + | |
| - | /* predefined easing functions */
| + | |
| - | Sliderman.easing({name: 'none', method: function(x){return x;}});
| + | |
| - | Sliderman.easing({name: 'swing', method: function(x){return -Math.cos(x*Math.PI)/2 + 0.5;}});
| + | |
| - | Sliderman.easing({name: 'wave', method: function(t){return ((Math.cos((1-t)*3*Math.PI+2*Math.PI))*0.5+0.5+t)/2;}});
| + | |
| - | Sliderman.easing({name: 'bounce', method: function(t){return 1 - Math.abs(Math.cos((1-t)*(2.5+t*t*3)*Math.PI+0.5*Math.PI)*(1-t));}});
| + | |
| - | /* predefined order functions */ | + | |
| - | Sliderman.order({name: 'straight', method: function(e){
| + | |
| - | var cols = e.cols, rows = e.rows, road = e.road, count = e.count;
| + | |
| - | var a = [], i = 0, c = 0, r = 0, cl = cols - 1, rl = rows - 1, il = count - 1, cr;
| + | |
| - | for(r = 0; r < rows; r++) for(c = 0; c < cols; c++){cr = r+','+c;
| + | |
| - | switch(road){
| + | |
| - | case 'BL': a[cr] = il-(c*rows+(rl-r)); break;
| + | |
| - | case 'RT': a[cr] = il-(r*cols+(cl-c)); break;
| + | |
| - | case 'TL': a[cr] = il-(c*rows+r);
| + | |
| - | case 'LT': a[cr] = il-(r*cols+c); break;
| + | |
| - | case 'BR': a[cr] = c*rows+r; break;
| + | |
| - | case 'LB': a[cr] = r*cols+(cl-c); break;
| + | |
| - | case 'TR': a[cr] = c*rows+(rl-r); break;
| + | |
| - | default: a[cr] = r*cols+c; break;//'RB'
| + | |
| - | }
| + | |
| - | }
| + | |
| - | return a;
| + | |
| - | }});
| + | |
| - | Sliderman.order({name: 'swirl', method: function(e){
| + | |
| - | var cols = e.cols, rows = e.rows, road = e.road, count = e.count;
| + | |
| - | var a = [], i = 0, c = 0, r = 0, cl = cols - 1, rl = rows - 1, il = count - 1, cr;
| + | |
| - | var courses, course = 0;
| + | |
| - | switch(road){
| + | |
| - | case 'BL': c = cl; r = 0; courses = ['r+', 'c-', 'r-', 'c+']; break;
| + | |
| - | case 'RT': c = 0; r = rl; courses = ['c+', 'r-', 'c-', 'r+']; break;
| + | |
| - | case 'TL': c = cl; r = rl; courses = ['r-', 'c-', 'r+', 'c+']; break;
| + | |
| - | case 'LT': c = cl; r = rl; courses = ['c-', 'r-', 'c+', 'r+']; break;
| + | |
| - | case 'BR': c = 0; r = 0; courses = ['r+', 'c+', 'r-', 'c-']; break;
| + | |
| - | case 'LB': c = cl; r = 0; courses = ['c-', 'r+', 'c+', 'r-']; break;
| + | |
| - | case 'TR': c = 0; r = rl; courses = ['r-', 'c+', 'r+', 'c-']; break;
| + | |
| - | default: c = 0; r = 0; courses = ['c+', 'r+', 'c-', 'r-']; break;//'RB'
| + | |
| - | }
| + | |
| - | i = 0;
| + | |
| - | while(i < count){
| + | |
| - | cr = r+','+c;
| + | |
| - | if(c >= 0 && c < cols && r >= 0 && r < rows && typeof(a[cr]) == 'undefined') a[cr] = i++;
| + | |
| - | else switch(courses[course++%courses.length]){case 'c+': c--; break; case 'r+': r--; break; case 'c-': c++; break; case 'r-': r++; break;}
| + | |
| - | switch(courses[course%courses.length]){case 'c+': c++; break; case 'r+': r++; break; case 'c-': c--; break; case 'r-': r--; break;}
| + | |
| - | }
| + | |
| - | return a;
| + | |
| - | }});
| + | |
| - | Sliderman.order({name: 'snake', method: function(e){
| + | |
| - | var cols = e.cols, rows = e.rows, road = e.road, count = e.count;
| + | |
| - | var a = [], i = 0, c = 0, r = 0, cl = cols - 1, rl = rows - 1, il = count - 1, cr;
| + | |
| - | var courses, course = 0;
| + | |
| - | switch(road){
| + | |
| - | case 'BL': c = cl; r = 0; courses = ['r+', 'c-', 'r-', 'c-']; break;
| + | |
| - | case 'RT': c = 0; r = rl; courses = ['c+', 'r-', 'c-', 'r-']; break;
| + | |
| - | case 'TL': c = cl; r = rl; courses = ['r-', 'c-', 'r+', 'c-']; break;
| + | |
| - | case 'LT': c = cl; r = rl; courses = ['c-', 'r-', 'c+', 'r-']; break;
| + | |
| - | case 'BR': c = 0; r = 0; courses = ['r+', 'c+', 'r-', 'c+']; break;
| + | |
| - | case 'LB': c = cl; r = 0; courses = ['c-', 'r+', 'c+', 'r+']; break;
| + | |
| - | case 'TR': c = 0; r = rl; courses = ['r-', 'c+', 'r+', 'c+']; break;
| + | |
| - | default: c = 0; r = 0; courses = ['c+', 'r+', 'c-', 'r+']; break;//'RB'
| + | |
| - | }
| + | |
| - | i = 0;
| + | |
| - | while(i < count){cr = r+','+c;
| + | |
| - | if(c >= 0 && c < cols && r >= 0 && r < rows && typeof(a[cr]) == 'undefined'){a[cr] = i++;
| + | |
| - | switch(courses[course%courses.length]){case 'c+': c++; break; case 'r+': r++; break; case 'c-': c--; break; case 'r-': r--; break;}
| + | |
| - | }
| + | |
| - | else{
| + | |
| - | switch(courses[course++%courses.length]){case 'c+': c--; break; case 'r+': r--; break; case 'c-': c++; break; case 'r-': r++; break;}
| + | |
| - | switch(courses[course++%courses.length]){case 'c+': c++; break; case 'r+': r++; break; case 'c-': c--; break; case 'r-': r--; break;}
| + | |
| - | }
| + | |
| - | }
| + | |
| - | return a;
| + | |
| - | }});
| + | |
| - | Sliderman.order({name: 'straight_stairs', method: function(e){
| + | |
| - | var cols = e.cols, rows = e.rows, road = e.road, count = e.count;
| + | |
| - | var a = [], i = 0, c = 0, r = 0, cl = cols - 1, rl = rows - 1, il = count - 1, cr;
| + | |
| - | switch(road){
| + | |
| - | case 'BL': case 'TR': case 'TL': case 'BR': var C = 0, R = 0; break;
| + | |
| - | case 'LB': case 'RT': case 'LT': case 'RB': default: road = 'RB'; var C = cl, R = 0; break;
| + | |
| - | }
| + | |
| - | c = C; r = R;
| + | |
| - | while(i < count){cr = r+','+c;
| + | |
| - | if(road.indexOf('T') == 1 || road.indexOf('R') == 1) a[cr] = il - i++;
| + | |
| - | else a[cr] = i++;
| + | |
| - | switch(road){
| + | |
| - | case 'BL': case 'TR': c--; r++; break;
| + | |
| - | case 'TL': case 'BR': c++; r--; break;
| + | |
| - | case 'LB': case 'RT': c--; r--; break;
| + | |
| - | case 'RB': case 'LT': default: c++; r++; break;
| + | |
| - | }
| + | |
| - | if(c < 0 || r < 0 || c > cl || r > rl){
| + | |
| - | switch(road){
| + | |
| - | case 'BL': case 'TR': C++; break;
| + | |
| - | case 'LB': case 'RT': case 'TL': case 'BR': R++; break;
| + | |
| - | case 'RB': case 'LT': default: C--; break;
| + | |
| - | }
| + | |
| - | if(C < 0 || R < 0 || C > cl || R > rl){
| + | |
| - | switch(road){
| + | |
| - | case 'BL': case 'TR': C = cl; R++; break;
| + | |
| - | case 'TL': case 'BR': R = rl; C++; break;
| + | |
| - | case 'LB': case 'RT': R = rl; C--; break;
| + | |
| - | case 'RB': case 'LT': default: C = 0; R++; break;
| + | |
| - | }
| + | |
| - | if(R > rl) R = rl; else if(R < 0) R = 0; else if(C > cl) C = cl; else if(C < 0) C = 0;
| + | |
| - | }
| + | |
| - | r = R; c = C;
| + | |
| - | }
| + | |
| - | }
| + | |
| - | return a;
| + | |
| - | }});
| + | |
| - | Sliderman.order({name: 'square', method: function(effect){
| + | |
| - | var cols = effect.cols || 1, rows = effect.rows || 1, arr = [], i = 0, c, r, dc, dr, cr;
| + | |
| - | dc = cols < rows ? (rows-cols)/2 : 0; dr = cols > rows ? (cols-rows)/2 : 0; cr = Math.round(Math.max(cols/2, rows/2)) + 1;
| + | |
| - | for(c = 0; c < cols; c++) for(r = 0; r < rows; r++) arr[r+','+c] = cr - Math.min(c+1+dc, r+1+dr, cols-c+dc, rows-r+dr);
| + | |
| - | return arr;
| + | |
| - | }});
| + | |
| - | Sliderman.order({name: 'rectangle', method: function(effect){
| + | |
| - | var cols = effect.cols || 1, rows = effect.rows || 1, arr = [], i = 0, c, r, cr;
| + | |
| - | cr = Math.round(Math.min(cols/2, rows/2)) + 1;
| + | |
| - | for(c = 0; c < cols; c++) for(r = 0; r < rows; r++) arr[r+','+c] = cr - Math.min(c+1, r+1, cols-c, rows-r);
| + | |
| - | return arr;
| + | |
| - | }});
| + | |
| - | Sliderman.order({name: 'random', method: function(effect){
| + | |
| - | var a = [], tmp = [], r, c, i;
| + | |
| - | for(r = 0; r < effect.rows; r++) for(c = 0; c < effect.cols; c++) tmp.push(r+','+c);
| + | |
| - | tmp.sort(function(a,b){return Math.random() > 0.5;});
| + | |
| - | for(i = 0; i < effect.count; i++) a[tmp[i]] = i;
| + | |
| - | return a;
| + | |
| - | }});
| + | |
| - | Sliderman.order({
| + | |
| - | name: 'circle', method: function(effect){
| + | |
| - | var cols = effect.cols || 1, rows = effect.rows || 1, arr = [], i = 0, c, r;
| + | |
| - | var hc = cols/2-0.5, hr = rows/2-0.5;
| + | |
| - | for(c = 0; c < cols; c++) for(r = 0; r < rows; r++) arr[r+','+c] = Math.round(Math.sqrt(Math.pow(c-hc, 2)+Math.pow(r-hr, 2)));
| + | |
| - | return arr;
| + | |
| - | }
| + | |
| - | });
| + | |
| - | Sliderman.order({
| + | |
| - | name: 'cross', method: function(effect){
| + | |
| - | var cols = effect.cols || 1, rows = effect.rows || 1, arr = [], i = 0, c, r;
| + | |
| - | var hc = cols/2-0.5, hr = rows/2-0.5;
| + | |
| - | for(c = 0; c < cols; c++) for(r = 0; r < rows; r++) arr[r+','+c] = Math.round(Math.min(Math.abs(c-hc), Math.abs(r-hr)));
| + | |
| - | return arr;
| + | |
| - | }
| + | |
| - | });
| + | |
| - | Sliderman.order({
| + | |
| - | name: 'rectangle_cross', method: function(effect){
| + | |
| - | var cols = effect.cols || 1, rows = effect.rows || 1, arr = [], i = 0, c, r;
| + | |
| - | var hc = cols/2-0.5, hr = rows/2-0.5, cr = Math.max(hc, hr)+1;
| + | |
| - | for(c = 0; c < cols; c++) for(r = 0; r < rows; r++) arr[r+','+c] = Math.round(cr-Math.max(hc-Math.abs(c-hc), hr-Math.abs(r-hr)))-1;
| + | |
| - | return arr;
| + | |
| - | }
| + | |
| - | });
| + | |
| - | /* predefined effects */
| + | |
| - | Sliderman.effect({name: 'fade', fade: true, duration: 400});
| + | |
| - | Sliderman.effect({name: 'move', left: true, move: true, duration: 400});
| + | |
| - | Sliderman.effect({name: 'stairs', cols: 7, rows: 5, delay: 30, order: 'straight_stairs', road: 'BL', fade: true});
| + | |
| - | Sliderman.effect({name: 'blinds', cols: 10, delay: 100, duration: 400, order: 'straight', right: true, zoom: true, fade: true});
| + | |
| - | Sliderman.effect({name: 'rain', cols: 10, delay: 100, duration: 400, order: 'straight', top: true, fade: true});
| + | |
| - | | + | |
| - | </script> | + | |
| - | </HEAD> | + | |
| - | <body> | + | |
| - | <div id="wrapper">
| + | |
| - | | + | |
| - | <div id="examples_outer">
| + | |
| - | <h2>Sliderman.js — Demo 1</h2>
| + | |
| - | | + | |
| - | <div id="slider_container_1">
| + | |
| - | | + | |
| - | <div id="SliderName">
| + | |
| - | | + | |
| - | <a href="#1">
| + | |
| - | <img src="img/1.jpg" title="Description from Image Title" />
| + | |
| - | </a>
| + | |
| - | <div class="SliderNameDescription">
| + | |
| - | <img src="img/2.jpg" height="40" style="float:left;margin-right:5px;" />
| + | |
| - | <strong>Nulla luctus congue fermentum.</strong><br />Integer <a href="javascript:void(0);">elementum</a> convallis lorem eu volutpat. Suspendisse fermentum arcu in lorem fringilla ultricies. Nam vel diam nisi.
| + | |
| - | </div>
| + | |
| - | <a href="#2">
| + | |
| - | <img src="img/2.jpg" />
| + | |
| - | </a>
| + | |
| - | <img src="img/3.jpg" />
| + | |
| - | <div class="SliderNameDescription"><a href="#3">Link</a></div>
| + | |
| - | <img src="img/4.jpg" />
| + | |
| - | <div class="SliderNameDescription"><strong>Nullam nec velit vel leo tristique commodo.</strong><br />Nulla facilisi. Fusce lacus massa, ullamcorper sed hendrerit quis, venenatis eget tortor.</div>
| + | |
| - | </div>
| + | |
| - | <div class="c"></div>
| + | |
| - | <div id="SliderNameNavigation"></div>
| + | |
| - | <div class="c"></div>
| + | |
| - | | + | |
| - | <script type="text/javascript">
| + | |
| - | | + | |
| - | // we created new effect and called it 'demo01'. We use this name later.
| + | |
| - | Sliderman.effect({name: 'demo01', cols: 10, rows: 5, delay: 10, fade: true, order: 'straight_stairs'});
| + | |
| - | | + | |
| - | var demoSlider = Sliderman.slider({container: 'SliderName', width: 640, height: 300, effects: 'demo01',
| + | |
| - | display: {
| + | |
| - | pause: true, // slider pauses on mouseover
| + | |
| - | autoplay: 3000, // 3 seconds slideshow
| + | |
| - | always_show_loading: 200, // testing loading mode
| + | |
| - | description: {background: '#ffffff', opacity: 0.5, height: 50, position: 'bottom'}, // image description box settings
| + | |
| - | loading: {background: '#000000', opacity: 0.2, image: 'img/loading.gif'}, // loading box settings
| + | |
| - | buttons: {opacity: 1, prev: {className: 'SliderNamePrev', label: ''}, next: {className: 'SliderNameNext', label: ''}}, // Next/Prev buttons settings
| + | |
| - | navigation: {container: 'SliderNameNavigation', label: ' '} // navigation (pages) settings
| + | |
| - | }});
| + | |
| - | | + | |
| - | </script>
| + | |
| - | | + | |
| - | <div class="c"></div>
| + | |
| - | </div>
| + | |
| - | <div class="c"></div>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div class="c"></div>
| + | |
| - | </div>
| + | |
| - | </body> | + | |
| | </HTML> | | </HTML> |
"
