Add infinite mode, and you can stop or set final numbers manually

README.md

@@ -1,69 +1,87 @@
-# jQuery jSlots
-
-jSlots is 2k of jQuery slot machine magic. It turns any list (`<ol>` or `<ul>`) into a slot machine!
-
-## Options
-
-These are the options, with their default values, and what they do
-
-    $.jSlots.defaultOptions = {
-        number : 3,          // Number: number of slots
-        winnerNumber : 1,    // Number or Array: list item number(s) upon which to trigger a win, 1-based index, NOT ZERO-BASED
-        spinner : '',        // CSS Selector: element to bind the start event to
-        spinEvent : 'click', // String: event to start slots on this event
-        onStart : $.noop,    // Function: runs on spin start,
-        onEnd : $.noop,      // Function: run on spin end. It is passed (finalNumbers:Array). finalNumbers gives the index of the li each slot stopped on in order.
-        onWin : $.noop,      // Function: run on winning number. It is passed (winCount:Number, winners:Array, finalNumbers:Array)
-        easing : 'swing',    // String: easing type for final spin. I recommend the easing plugin and easeOutSine, or an easeOut of your choice.
-        time : 7000,         // Number: total time of spin animation
-        loops : 6            // Number: times it will spin during the animation
-    };
-
-## Usage
-
-Attach jQuery (successfully tested down to v1.4.1)
-
-    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
-
-Attach jSlots plugin
-
-    <script src="jquery.jSlots.js" charset="utf-8"></script>
-
-Attach easing plugin (optional but HIGHLY recommended for nice animation)
-
-    <script src="jquery.easing.1.3.js" charset="utf-8"></script>
-
-Create a list and an element that will spin the slots
-
-    <ul class="slot">
-        <li>1</li>
-        <li>2</li>
-        <li>3</li>
-        <li>4</li>
-        <li>5</li>
-        <li>6</li>
-        <li>7</li>
-    </ul>
-
-    <!-- this button will start the spin -->
-    <input type="button" id="playBtn" value="play">
-
-Target the list and make it a jSlot!
-
-    <script type="text/javascript" charset="utf-8">
-
-        $('.slot').jSlots({
-            spinner : '#playBtn',
-            winnerNumber : 7
-        });
-
-    </script>
-
-Styling is up to you, but jSlots supplies a jSlots-wrapper div around your lists that should get `overflow: hidden` and a height set on it. Here are some recommended styles:
-
-    .jSlots-wrapper {
-        overflow: hidden; /* to hide the magic */
-        height: 20px; /* whatever the height of your list items are */
-        display: inline-block; /* to size width correctly, can use float too, or width*/
-        border: 1px solid #999;
+# jQuery jSlots
+
+jSlots is 2k of jQuery slot machine magic. It turns any list (`<ol>` or `<ul>`) into a slot machine!
+
+## Options
+
+These are the options, with their default values, and what they do
+
+    $.jSlots.defaultOptions = {  
+        number : 3,          // Number: number of slots  
+        winnerNumber : 1,    // Number or Array: list item number(s) upon which to trigger a win, 1-based index, NOT ZERO-BASED  
+        spinner : '',        // CSS Selector: element to bind the start event to  
+        spinEvent : 'click', // String: event to start slots on this event  
+        onStart : $.noop,    // Function: runs on spin start,  
+        onEnd : $.noop,      // Function: run on spin end. It is passed (finalNumbers:Array). finalNumbers gives the index of the li each slot stopped on in order.  
+        onWin : $.noop,      // Function: run on winning number. It is passed (winCount:Number, winners:Array)  
+        easing : 'swing',    // String: easing type for final spin  
+        time : 7000,         // Number: total time of spin animation  
+        loops : 6,           // Number: times it will spin during the animation (or times it will spin to get to minimumSpeed in infinite mode)  
+        minimumSpeed : 1000, // Number: minimum speed the slot can spin (works only in infinite mode)  
+        infinite : false,    // Boolean: if it spins infinitely  
+        endsAt : []          // Array: manually set final numbers  
+    };  
+
+## Usage
+
+Attach jQuery (successfully tested down to v1.4.1)
+
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
+
+Attach jSlots plugin
+
+    <script src="jquery.jSlots.js" charset="utf-8"></script>
+
+Attach easing plugin (optional but HIGHLY recommended for nice animation)
+
+    <script src="jquery.easing.1.3.js" charset="utf-8"></script>
+
+Create a list and an element that will spin the slots
+
+    <ul class="slot">
+        <li>1</li>
+        <li>2</li>
+        <li>3</li>
+        <li>4</li>
+        <li>5</li>
+        <li>6</li>
+        <li>7</li>
+    </ul>
+
+    <!-- this button will start the spin -->
+    <input type="button" id="playBtn" value="play">
+
+Target the list and make it a jSlot!
+
+    <script type="text/javascript" charset="utf-8">
+
+        $('.slot').jSlots({
+            spinner : '#playBtn',
+            winnerNumber : 7
+        });
+
+    </script>
+
+You can spin it infinitely, and stop it manually
+
+	<script type="text/javascript" charset="utf-8">  
+
+        $('.slot').jSlots({  
+            spinner : '#playBtn',  
+            winnerNumber : 7,  
+            infinite : true,  
+            onStart : function (jslot) {  
+                setTimeout(function() { jslot.stop([1, 2, 3, 4, 5, 6, 7]); }, 2000);  
+            }  
+        });  
+
+    </script>  
+
+Styling is up to you, but jSlots supplies a jSlots-wrapper div around your lists that should get `overflow: hidden` and a height set on it. Here are some recommended styles:
+
+    .jSlots-wrapper {
+        overflow: hidden; /* to hide the magic */
+        height: 20px; /* whatever the height of your list items are */
+        display: inline-block; /* to size width correctly, can use float too, or width*/
+        border: 1px solid #999;
     }

demos/fancy.html

@@ -190,7 +190,7 @@
 </head>
 <body>
 
-            
+    <h2>Always stop at 1234567</h2>
     <div class="fancy">
         <ul class="slot">
             <!-- In reverse order so the 7s show on load -->
@@ -220,7 +220,9 @@
             easing : 'easeOutSine',
             time : 7000,
             loops : 6,
-            onStart : function() {
+            // new functionality : set final numbers
+            endsAt : [7, 6, 5, 4, 3, 2, 1],
+            onStart : function(jslot) {
                 $('.slot').removeClass('winner');
             },
             onWin : function(winCount, winners) {

demos/inifite-and-finalnumber.html

@@ -0,0 +1,67 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<title>jSlots Slot Machine - Matthew Lein</title>
+
+<style type="text/css">
+
+
+ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+.jSlots-wrapper {
+    overflow: hidden;
+    height: 20px;
+    display: inline-block; /* to size correctly, can use float too, or width*/
+    border: 1px solid #999;
+}
+
+.slot {
+    float: left;
+}
+
+
+</style>
+
+</head>
+
+<body>
+	<h2>
+		This slot machine always stop at 123
+	</h2>
+    <ul class="slot">
+        <li>1</li>
+        <li>2</li>
+        <li>3</li>
+        <li>4</li>
+        <li>5</li>
+        <li>6</li>
+        <li>7</li>
+    </ul>
+    <input type="button" id="playNormal" value="play">
+
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
+    <script src="../jquery.easing.1.3.js" type="text/javascript" charset="utf-8"></script>
+    <script src="../jquery.jSlots.min.js" type="text/javascript" charset="utf-8"></script>
+    <script type="text/javascript" charset="utf-8">
+
+        // normal example
+        $('.slot').jSlots({
+            spinner : '#playNormal',
+            winnerNumber : 7,
+			loops : 4,
+			minimumSpeed : 300,
+			// new functionality : allow it spins infinitely (the speed is stable at options.minimumSpeed after options.loops)
+			infinite : true,
+			// new functionality : stop the slot machine manually and set final number
+			onStart : function (jslot) { setTimeout(function () {jslot.stop([1, 2, 3]);}, 2000); }
+        });
+
+    </script>
+
+</body>
+</html>

index.html

@@ -244,10 +244,13 @@ <h2>Options</h2>
     spinEvent : 'click', // String: event to start slots on this event
     onStart : $.noop,    // Function: runs on spin start,
     onEnd : $.noop,      // Function: run on spin end. It is passed (finalNumbers:Array). finalNumbers gives the index of the li each slot stopped on in order.
-    onWin : $.noop,      // Function: run on winning number. It is passed (winCount:Number, winners:Array, finalNumbers:Array)
-    easing : 'swing',    // String: easing type for final spin. I recommend the easing plugin and easeOutSine, or an easeOut of your choice.
+    onWin : $.noop,      // Function: run on winning number. It is passed (winCount:Number, winners:Array)
+    easing : 'swing',    // String: easing type for final spin
     time : 7000,         // Number: total time of spin animation
-    loops : 6            // Number: times it will spin during the animation
+    loops : 6,           // Number: times it will spin during the animation (or times it will spin to get to minimumSpeed in infinite mode)
+    minimumSpeed : 1000, // Number: minimum speed the slot can spin (works only in infinite mode)
+    infinite : false,    // Boolean: if it spins infinitely
+    endsAt : []          // Array: manually set final numbers
 };</pre>
 
         <h2 id="scroll_to_here">Usage</h2>
@@ -293,6 +296,22 @@ <h2 id="scroll_to_here">Usage</h2>
         winnerNumber : 7
     });
 
+&lt;/script&gt;</pre>
+
+        <p>You can spin it infinitely, and stop it manually</p>
+
+        <pre name="code" class="html">
+&lt;script type="text/javascript" charset="utf-8"&gt;
+
+    $('.slot').jSlots({
+        spinner : '#playBtn',
+        winnerNumber : 7,
+        infinite : true,
+        onStart : function (jslot) {
+            setTimeout(function() { jslot.stop([1, 2, 3, 4, 5, 6, 7]); }, 2000);
+        }
+    });
+
 &lt;/script&gt;</pre>
 
         <p>Styling is up to you, but jSlots supplies a jSlots-wrapper div around your lists that should get overflow: hidden and a height set on it. Here are some recommended styles:</p>