Updated traffic and introduction pages.

* Small updates to introduction page.
* Updated traffic page:
    - traffic routes
    - new metro map
* Used bootstrap modal plugin to view images for traffic page
    - traffic.js
    - traffic.css

4 files changed, 41 insertions, 0 deletions

diff --git a/page/static/css/traffic.css b/page/static/css/traffic.css
new file mode 100644
index 0000000..8b21f7a
--- /dev/null
+++ b/page/static/css/traffic.css
@@ -0,0 +1,16 @@
+/*
+ * traffic.css
+ * used with 'traffic.html' page
+ *
+ * 2014/06/23
+ */
+
+img.modal-images {
+    cursor: pointer;
+}
+
+// modal style
+@media (min-width: 768px) {
+    //
+}
+
diff --git a/page/static/images/map-dongchuan-route.png b/page/static/images/map-dongchuan-route.png
new file mode 100644
index 0000000..bca9a0c
--- /dev/null
+++ b/page/static/images/map-dongchuan-route.png
diff --git a/page/static/images/shmetro_map2014.jpg b/page/static/images/shmetro_map2014.jpg
new file mode 100644
index 0000000..59756a4
--- /dev/null
+++ b/page/static/images/shmetro_map2014.jpg
diff --git a/page/static/js/traffic.js b/page/static/js/traffic.js
new file mode 100644
index 0000000..34400c5
--- /dev/null
+++ b/page/static/js/traffic.js
@@ -0,0 +1,25 @@
+/*
+ * traffic.js
+ * used with 'traffic.html' page
+ *
+ * 2014/06/23
+ */
+
+/* bootstrap 3 built-in modal plugin */
+$(document).ready(function() {
+    $("img.modal-images").on("click", function() {
+        var src = $(this).attr('src');
+        var img_html = '<img src="'+src+'" class="img-responsive">';
+        var orig_html = $('#imageviewer-modal .modal-body').html();
+        // modal
+        $('#imageviewer-modal').modal('toggle');
+        // action
+        $('#imageviewer-modal').on('shown.bs.modal', function() {
+            $('#imageviewer-modal .modal-body').html(img_html);
+        });
+        $('#imageviewer-modal').on('hidden.bs.modal', function() {
+            $('#imageviewer-modal .modal-body').html(orig_html);
+        });
+    });
+});
+