Clean-up the Demo.

[hacks/simpleWebSlides.git] / doc / demo.xhtml

diff --git a/doc/demo.xhtml b/doc/demo.xhtml
index c0e4c16..40322c2 100644 (file)
--- a/doc/demo.xhtml
+++ b/doc/demo.xhtml
@@ -11,37 +11,29 @@
     <meta name="copyright"
           content="Copyright &#169; 2013 Kim Nguyễn" />
 
+    <!-- Load jQuery -->
+    <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
+
+    <!-- Initialize the library -->
     <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"
           media="all" />
-    <!-- allows to switch themes in firefox -->
+    <script src="../simpleWebSlides.js" type="text/javascript" >
+    </script>
 
-    <link rel="stylesheet" title="Default" href="../themes/default.css"
-          type="text/css" />
-    <link rel="alternate stylesheet"  title="Web 2.0"
+    <!-- Load a custom Theme -->
+    <link rel="stylesheet"  title="Web 2.0"
           href="../themes/webTwoPointO.css"
           type="text/css" />
 
-    <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
-    <script src="../simpleWebSlides.js" type="text/javascript" ></script>
     <!-- Customize some templates and initialize -->
     <script type="text/javascript">
 /*
-      SWS.Presentation.setTemplate('sws-slide-change',
-      SWS.Effects.slideChangeVerticalSlide);
-      SWS.Presentation.setTemplate('sws-slide-change',
-      SWS.Effects.slideChangeHorizontalSlide);
-      SWS.Presentation.setTemplate('sws-slide-change',
-      SWS.Effects.slideChangeFadeOutIn);
+      SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeVerticalSlide;
+      SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
 */
-      SWS.Presentation.setTemplate('sws-slide-change',
-      SWS.Effects.slideChangeHorizontalFlip);
-
-      SWS.Presentation.setTemplate('sws-object-deactivate',
-      SWS.Effects.objectDeactivateFadeOut);
-
-      SWS.Presentation.setTemplate('sws-object-activate',
-      SWS.Effects.objectActivateFadeIn);
-
+      SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeHorizontalSlide;
+      SWS.Config['sws-object-deactivate'] =  SWS.Effects.objectDeactivateFadeOut;
+      SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
 
       SWS.Presentation.init();
 
@@ -68,7 +60,7 @@
       </div>
     </div>
 
-
+    <!-- H1 below is hidden, used for table of content (TODO) -->
     <h1>Introduction</h1>
 
     <div class="sws-slide" >
@@ -81,7 +73,7 @@
         your <span style='font-size:larger'>❤</span>'s content
         with <em id="css">C S S</em>!</li>
         <li class="sws-pause" >Create animations using Javascript &amp; jQuery!</li>
-        <li class="sws-onslide-1_3_5_7">(I'm here every other frame)</li>
+        <li class="sws-onslide-1_3-5_7">(I'm here every other frame)</li>
       </ul>
         <script type="text/javascript">
           var zoom_title = function (canvas) {
@@ -90,7 +82,7 @@
           h1.animate({"font-size":"80pt" }, 300)
           .animate({"font-size":old_size }, 300);
           };
-          SWS.Presentation.registerCallback(3, zoom_title);
+          SWS.Presentation.registerCallback(6, zoom_title);
         </script>
     </div>