Realtime images switching support #190

pisi · May 17, 2013 · dbb6fcc · dbb6fcc
1 parent de48e66
commit dbb6fcc
Show file tree

Hide file tree

Showing 16 changed files with 158 additions and 1 deletion.
diff --git a/example/realtime-direct-sequence-switching/README.markdown b/example/realtime-direct-sequence-switching/README.markdown
@@ -0,0 +1,32 @@
+jQuery Reel Realtime Direct Sequence Switching Example
+======================================================
+
+Utilizing the `.reel()` method to change running Reel's data allows you to
+seamlessly switch image seuquences without affecting the state of animation
+or rotational position of a running Reel. Feature ideal for various product
+configurator setups. This example switches is made of 6 frames long sequence
+(2 sets in fact) and since this non-looping image depicts mere 80°, custom
+revolution is used to improve drag responsiveness.
+
+
+Options Employed In This Example
+--------------------------------
+
+- [frames](http://jquery.vostrel.cz/reel#frames)
+- [images](http://jquery.vostrel.cz/reel#image)
+- [loops](http://jquery.vostrel.cz/reel#loops)
+- [revolution](http://jquery.vostrel.cz/reel#revolution)
+- [speed](http://jquery.vostrel.cz/reel#speed)
+
+See the complete source of [index.html](index.html) for full
+implementation.
+
+
+---
+&copy; 2009-2013 Petr Vostřel, part of [jQuery Reel][reel] project, under [GPL][GPL] and [MIT][MIT] licences
+
+
+
+[reel]:http://jquery.vostrel.cz/reel
+[GPL]:http://opensource.org/licenses/GPL-2.0
+[MIT]:http://opensource.org/licenses/MIT
diff --git a/example/realtime-direct-sequence-switching/blue/1.png b/example/realtime-direct-sequence-switching/blue/1.png
diff --git a/example/realtime-direct-sequence-switching/blue/2.png b/example/realtime-direct-sequence-switching/blue/2.png
diff --git a/example/realtime-direct-sequence-switching/blue/3.png b/example/realtime-direct-sequence-switching/blue/3.png
diff --git a/example/realtime-direct-sequence-switching/blue/4.png b/example/realtime-direct-sequence-switching/blue/4.png
diff --git a/example/realtime-direct-sequence-switching/blue/5.png b/example/realtime-direct-sequence-switching/blue/5.png
diff --git a/example/realtime-direct-sequence-switching/blue/6.png b/example/realtime-direct-sequence-switching/blue/6.png
diff --git a/example/realtime-direct-sequence-switching/green/1.png b/example/realtime-direct-sequence-switching/green/1.png
diff --git a/example/realtime-direct-sequence-switching/green/2.png b/example/realtime-direct-sequence-switching/green/2.png
diff --git a/example/realtime-direct-sequence-switching/green/3.png b/example/realtime-direct-sequence-switching/green/3.png
diff --git a/example/realtime-direct-sequence-switching/green/4.png b/example/realtime-direct-sequence-switching/green/4.png
diff --git a/example/realtime-direct-sequence-switching/green/5.png b/example/realtime-direct-sequence-switching/green/5.png
diff --git a/example/realtime-direct-sequence-switching/green/6.png b/example/realtime-direct-sequence-switching/green/6.png
diff --git a/example/realtime-direct-sequence-switching/index.html b/example/realtime-direct-sequence-switching/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html data-type="example" data-id="realtime-direct-sequence-switching">
+  <head>
+    <title>jQuery Reel Realtime Direct Sequence Switching Example</title>
+    <meta charset='utf-8' content='text/html' http-equiv='Content-type' />
+
+    <script src='http://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'></script>
+    <script src='http://code.vostrel.cz/jquery.reel-edge.js' type='text/javascript'></script>
+
+    <!-- Common examples style (gray background, thin fonts etc.) -->
+    <link href="../style.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <h1>Realtime Direct Sequence Switching</h1>
+
+    <img id="image" src='green/1.png' width="160" height="120" />
+    <div>
+      <button id="blue">Blue</button>
+      <button id="green">Green</button>
+    </div>
+    <script>
+      $(function(){ // when DOM ready
+
+        var
+          greens = [
+            'green/1.png',
+            'green/2.png',
+            'green/3.png',
+            'green/4.png',
+            'green/5.png',
+            'green/6.png'
+          ],
+          blues = [
+            'blue/1.png',
+            'blue/2.png',
+            'blue/3.png',
+            'blue/4.png',
+            'blue/5.png',
+            'blue/6.png'
+          ]
+
+        $('#image').reel({
+          indicator:   5, // For no indicator just remove this line
+          images:      greens,
+          frames:      6,
+          loops:       false,
+          speed:       0.5,
+          revolution:  100
+        });
+
+        $('#blue').click(function(){
+          $('#image').reel('images', blues);
+        });
+
+        $('#green').click(function(){
+          $('#image').reel('images', greens);
+        });
+
+      });
+    </script>
+
+    <p class="credits graphic"><a href="http://bknilssen.no">Bjørn Kåre Nilssen</a></p>
+
+    <div class="ballast">
+      <p>Lots of dummy text ballast to stretch the page a little and allow testing how each Reel mode behaves in relation to page scrolling.</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum semper imperdiet. Integer non auctor orci. Nullam dictum pretium metus, interdum congue sapien lobortis in. Donec sed massa a tellus dapibus auctor et in mauris. Curabitur adipiscing fermentum felis vel molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut semper sem ut nulla fringilla luctus. Curabitur dignissim quam ac libero consequat tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In hac habitasse platea dictumst. Nunc sed lectus eget magna suscipit tempor eget id nibh.</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget lorem est, quis rhoncus augue. Proin mollis elit in lorem dignissim in pulvinar quam egestas. Praesent auctor tempus vestibulum. Praesent purus nisl, porta vel rhoncus mollis, suscipit a sapien. Suspendisse potenti. Nunc leo elit, auctor sed malesuada vel, accumsan in arcu. Quisque a turpis arcu. Fusce a dolor ut risus condimentum feugiat. Aliquam eget turpis ipsum. Fusce est metus, vulputate a mollis non, pretium sit amet mauris. Ut aliquam placerat risus ac volutpat. Phasellus dictum turpis ac nisi egestas faucibus. Nulla pretium molestie venenatis. Integer tincidunt imperdiet turpis, at pretium neque consequat at. Aenean id augue in odio elementum malesuada in in purus.</p>
+      <p>Donec in tincidunt tortor. Donec laoreet adipiscing orci ut gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla eget luctus neque. Aenean metus massa, sodales non pulvinar vitae, dignissim ut ipsum. Pellentesque eget arcu ultrices nisl blandit egestas id quis augue. Integer volutpat, ligula sit amet convallis consequat, nulla nisl suscipit felis, in aliquam tellus sapien ut lorem. Fusce eget lorem diam. Sed sit amet consectetur mi. Nullam nibh dui, auctor at ullamcorper a, vulputate quis mauris. Morbi feugiat lorem et libero dapibus bibendum vel non augue. Fusce luctus enim ac velit semper pharetra. Curabitur turpis nibh, tempor eget rhoncus ut, vulputate et metus. Sed rutrum eros id nisl pharetra mollis. In hac habitasse platea dictumst.</p>
+      <p>Duis fringilla urna vel leo molestie eu pellentesque turpis consequat. Aliquam ante magna, pretium a facilisis vitae, viverra eu dui. Curabitur augue ligula, scelerisque et dapibus non, pharetra eu arcu. Aliquam lobortis augue et elit accumsan porttitor. Donec gravida dignissim lorem, porta vulputate augue tincidunt at. Vivamus tincidunt, tellus et volutpat fermentum, enim metus bibendum ante, euismod feugiat velit nisi nec tellus. Pellentesque egestas, sapien convallis tempor vestibulum, mauris nisl lobortis metus, sagittis vulputate lacus ante ut dolor. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tristique velit ac tellus ullamcorper quis pellentesque ipsum cursus. Praesent luctus fringilla velit, eu placerat tellus luctus ac. Nulla nec massa quam.</p>
+      <p>Praesent rutrum dui congue massa dictum tincidunt. Pellentesque ac volutpat augue. Fusce vel dui ac enim viverra sodales. Etiam massa sapien, fermentum et ultricies at, placerat vitae eros. Sed convallis vehicula commodo. Mauris sit amet augue id turpis dapibus rhoncus et vel turpis. Nullam vitae massa sed nunc sagittis varius ac id sapien. Morbi ligula tellus, consequat ut pellentesque id, condimentum nec est. Donec id elit mollis diam dignissim iaculis sed nec lorem. Vivamus sed tellus venenatis sem viverra aliquet gravida nec neque. Donec facilisis odio ac nisl iaculis gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer in augue nec leo interdum adipiscing ut a quam. Aenean sit amet mauris vitae lacus interdum aliquam vel a erat.</p>
+    </div>
+  </body>
+</html>
+
diff --git a/jquery.reel.js b/jquery.reel.js
@@ -1385,7 +1385,10 @@ jQuery.reel || (function($, window, document, undefined){
                   // ### `imageChange` Event ######
                   // `Event`, EXPERIMENTAL
                   //
-                  imageChange: function(e, nil, image){
+                  // When `image` or `images` is changed on the fly, this handler resets the loading cache and triggers
+                  // new preload sequence. Images are actually switched only after the new image is fully loaded.
+                  //
+                  'imageChange imagesChange': function(e, nil, image){
                     preloader.$.remove();
                     t.siblings(dot(cached_klass)).remove();
                     t.parent().bind(_preloaded_, on.instance.preloaded);

diff --git a/test/unit/data.js b/test/unit/data.js
@@ -472,4 +472,52 @@
     });
   });
 
+  asyncTest( 'New `images` value will load new images while maintaining current geometry and status', function(){
+
+    expect(6);
+
+    var
+      old_images = [
+        'http://somewhere/something.jpg',
+        'http://somewhere/something2.jpg',
+        'http://somewhere/something3.jpg'
+      ],
+      new_images = [
+        'http://somewhere/something/else.jpg',
+        'http://somewhere/something/else2.jpg',
+        'http://somewhere/something/else3.jpg'
+      ],
+      frame = 2,
+      pass = 0,
+      $reel = $('#image').reel({
+        images: old_images,
+        frame: frame
+      })
+
+    $reel.bind('opening.test', function(){
+
+      switch (++pass){
+
+        case 1:
+          equal( $reel.attr('src'), old_images[frame - 1], 'Old image at first' );
+          $reel.reel('images', new_images);
+          break;
+
+        case 2:
+          deepEqual( $reel.reel('images'), new_images, 'New images in' );
+          equal( $reel.attr('src'), new_images[frame - 1], 'Image changed on the fly' );
+          equal( $reel.reel('frame'), frame, 'Reel frame hasn\'t changed' );
+          equal( $reel.siblings('img').length, new_images.length, 'Cache population in check' );
+
+          // Wait a sec for preloader transition to finish
+          setTimeout(function(){
+            ok( !$reel.siblings('.reel-preloader').length, 'Preloader gets properly cleared' );
+            start();
+          }, 1000);
+          break;
+
+      }
+    });
+  });
+
 })(jQuery);