Commits

Sumin Byeon  committed e9dcb4d

Committing uncommitted changes.

  • Participants
  • Parent commits 714d8fb

Comments (0)

Files changed (3)

 <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Walter+Turncoat"/>
 <link rel="stylesheet" type="text/css" href="style.css"/>
 
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+<script type="text/javascript" src="script.js"></script>
+
 </head>
 <body>
 
 <div id="content">
-    <img id="cover" src="cover.jpg" alt="Cover"/>
+    <img id="cover0" class="cover current" src="cover1.jpg" alt="Cover"/>
+    <img id="cover1" class="cover" src="cover2.png" alt="Cover"/>
+    <img id="cover2" class="cover" src="cover3.jpg" alt="Cover"/>
+    <!-- http://www.flickr.com/photos/horiavarlan/4273225057/ -->
+    
     <div id="panel">
+        <div id="page-indicator">
+            <span id="dot0" class="dot current"></span>
+            <span id="dot1" class="dot"></span>
+            <span id="dot2" class="dot"></span>
+        </div>
         On March 26, 2012, writing a chemistry lab report becomes remarkably easy!
     </div>
 </div>
 
-var coverImages = new Array("cover1.jpg", "cover2.png");
+var coverImages = new Array("cover1.jpg", "cover2.png", "cover3.jpg");
 var currentPage = 0;
 var numberOfPages = coverImages.length;
 
 
 function goToPage(page) {
     currentPage = page;
-    $("#cover").attr("src", coverImages[currentPage]);
+    //$("#cover").attr("src", coverImages[currentPage]);
+    
+    // Update page indicator
     $(".dot").removeClass("current");
-    $("#dot" + (page+1)).addClass("current");
+    $("#dot" + page).addClass("current");
+    
+    // Transition
+    $("#cover" + ((page-1+numberOfPages) % numberOfPages)).fadeOut("fast", function() {
+        // Upon completion of the transition
+        $("#cover" + (page % numberOfPages)).fadeIn("fast");
+    });
 }
 
 window.onload = function() {
-    $("#cover").click(nextPage);
-    for (var i = 0; i < numberOfPages; i++) {
-        $("#dot" + (i+1)).click(function() { goToPage(i); });
-    }
+    $(".cover").click(nextPage);
+//     for (var i = 0; i < numberOfPages; i++) {
+//         $("#dot" + i).click(function() { goToPage(i); });
+//     }
 }
     
     left: 50%;
     top: 50%;
-    width: 800px;
+    width: 920px;
     height: 640px;
-    margin-left: -400px;
+    margin-left: -450px;
     margin-top: -320px;
 }
 
+.cover {
+    display: none;
+    width: 900px;
+    height: 420px;
+}
+.cover:hover {
+    cursor: pointer;
+}
+.cover.current {
+    display: block;
+}
+
 #panel {
-    width: 760px;
+    width: 860px;
     padding: 20px;
     font-size: 24pt;
     color: #FFF;
     background-color: #282828;
+}
+
+#page-indicator {
+    padding: 0;
+    font-size: 10pt;
+    text-align: center;
+}
+
+.dot {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    margin: 0 5px 0 5px;
+    border-radius: 4px;
+    background-color: #8999A6;
+}
+/*
+.dot:hover {
+    cursor: pointer;
+}
+*/
+.dot.current {
+    background-color: #FFF;
 }