random effect part 1

sylouuu · Dec 4, 2013 · 313c8c2 · 313c8c2
1 parent 215d877
commit 313c8c2
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 44 deletions.
diff --git 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
@@ -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
                         */