From 313c8c2aee414393e6d1dfe02c40dcad72f65e06 Mon Sep 17 00:00:00 2001 From: Syl Date: Wed, 4 Dec 2013 22:52:39 +0100 Subject: [PATCH] random effect part 1 --- assets/js/doc/demo.js | 3 +- dist/js/jquery.desoslide.js | 108 ++++++++++++++++++++++-------------- 2 files changed, 67 insertions(+), 44 deletions(-) diff --git a/assets/js/doc/demo.js b/assets/js/doc/demo.js index 7f42494..e78a710 100644 --- a/assets/js/doc/demo.js +++ b/assets/js/doc/demo.js @@ -6,7 +6,8 @@ $(function() { container: '#demo1_main_image', cssClass: 'img-responsive' }, - caption: true + caption: true, + effect: 'random' }); /* Second demo */ diff --git a/dist/js/jquery.desoslide.js b/dist/js/jquery.desoslide.js index 78c84a2..e22b08b 100644 --- a/dist/js/jquery.desoslide.js +++ b/dist/js/jquery.desoslide.js @@ -28,7 +28,7 @@ }, first: 0, /* Index of the first image to show */ interval: 3000, /* Interval between each image */ - effect: 'fade', /* Transition effect ("fade", "flip", "light", "roll", "rotate") */ + effect: 'fade', /* Transition effect ("fade", "flip", "light", "roll", "rotate", "random") */ overlay: 'always', /* How to show overlay ("always", "hover", "none") */ caption: false, /* Show caption: data-desoslide-caption attribute required */ controls: { @@ -78,6 +78,7 @@ href, $controls_wrapper, effects, + current_effect, $spinner, first_error = false; @@ -188,6 +189,37 @@ app.events(); }, + effects: { + 'fade': { /* Default */ + 'in': 'fadeIn', + 'out': 'fadeOut' + }, + 'sideFade': { + 'in': 'fadeInLeft', + 'out': 'fadeOutRight' + }, + 'sideFadeBig': { + 'in': 'fadeInLeftBig', + 'out': 'fadeOutRightBig' + }, + 'flip': { + 'in': 'flipInX', + 'out': 'flipOutX' + }, + 'light': { + 'in': 'lightSpeedIn', + 'out': 'lightSpeedOut' + }, + 'roll': { + 'in': 'rollIn', + 'out': 'rollOut' + }, + 'rotate': { + 'in': 'rotateIn', + 'out': 'rotateOut' + } + }, + /** * Function that loads images */ @@ -206,52 +238,42 @@ * Function that handles the effect */ effectHandler: function() { - /** - * Available effects with in/out matches - */ - effects = { - 'fade': { /* Default */ - 'in': 'fadeIn', - 'out': 'fadeOut' - }, - 'sideFade': { - 'in': 'fadeInLeft', - 'out': 'fadeOutRight' - }, - 'sideFadeBig': { - 'in': 'fadeInLeftBig', - 'out': 'fadeOutRightBig' - }, - 'flip': { - 'in': 'flipInX', - 'out': 'flipOutX' - }, - 'light': { - 'in': 'lightSpeedIn', - 'out': 'lightSpeedOut' - }, - 'roll': { - 'in': 'rollIn', - 'out': 'rollOut' - }, - 'rotate': { - 'in': 'rotateIn', - 'out': 'rotateOut' - } - }; + if(p.effect !== 'random') { + /** + * Incorrect effect value + */ + if(!app.effects.hasOwnProperty(p.effect)) { + /** + * Get the default effect + */ + current_effect = defaults.effect; - /** - * Incorrect effect value - */ - if(!effects.hasOwnProperty(p.effect)) { + app.resultHandler('error', 'Incorrect value for the "effect" option. Default value is used. Check out the documentation.'); + } else { + current_effect = p.effect; + } + } else { /** - * Get the default effect + * Get a random effect */ - p.effect = defaults.effect; + current_effect = app.getRandomEffect(); + } + console.log(current_effect); + }, + + /** + * Function that gets a random effect name + */ + getRandomEffect: function() { + var result, count = 0; - app.resultHandler('error', 'Incorrect value for the "effect" option. Default value is used. Check out the documentation.'); + for(var prop in effects) { + if(Math.random() < 1 / ++count) { + result = prop; + } } + return result; }, /** @@ -261,7 +283,7 @@ /** * Hiding the old one */ - $(p.main.container).find('img').removeClass('animated '+ effects[p.effect].in).addClass('animated '+ effects[p.effect].out); + $(p.main.container).find('img').removeClass('animated '+ app.effects[current_effect].in).addClass('animated '+ app.effects[current_effect].out); /** * Showing the new one @@ -381,7 +403,7 @@ /** * Showing */ - $(this).removeClass('animated '+ effects[p.effect].out).addClass('animated '+ effects[p.effect].in) + $(this).removeClass('animated '+ app.effects[current_effect].out).addClass('animated '+ app.effects[current_effect].in) /** * Animation done */