Implemented screenshot page animation

Now the screenshots are shown on the same page , with an animation

diff --git a/www/default.css b/www/default.css
index 79cc4b7..03474e9 100644 (file)
--- a/www/default.css
+++ b/www/default.css
@@ -43,7 +43,7 @@ div.note {
 }
 div.screenshot {
        display: inline-block;
-       margin: 10pt;
+       margin: 30pt;
        padding: 12pt;
        padding-top: 6pt;
        padding-bottom: 3pt;
@@ -61,3 +61,25 @@ div.screenshot p {
 div.screenshot img {
        width: 100%
 }
+
+div#picture-display {
+       position: absolute;
+       visibility: hidden;
+       z-index: 1;
+       opacity: 0.0;
+       margin: 10pt;
+       padding: 12pt;
+       padding-top: 6pt;
+       padding-bottom: 6pt;
+       text-align: center;
+       border: none;
+       background-color: #eee;
+       border-radius: 10pt;
+       box-shadow: 2pt 2pt 6pt #aaa;
+       -moz-transition-duration: 0.4s;
+       -moz-transition-property: opacity z-index visibility;
+       -moz-transition-timing-function: ease-in;
+       -webkit-transition-duration: 0.4s;
+       -webkit-transition-property: opacity z-index visibility;
+       -webkit-transition-timing-function: ease-in;
+}

diff --git a/www/screenshot-generator.js b/www/screenshot-generator.js
index 53b4add..7aec65e 100644 (file)
--- a/www/screenshot-generator.js
+++ b/www/screenshot-generator.js
@@ -5,6 +5,26 @@ var screenshots = {
        "screenshot-stationview-menu.png" : "The Station Departures Menu",
 };
 
+function dismiss_picture()
+{
+       var parent = this.parentNode;
+       parent.style.opacity = 0.0;
+       parent.style.visibility = 'hidden';
+       parent.display = 'none';
+}
+
+function present_picture()
+{
+       var display = document.getElementById('picture-display');
+       parent.display = 'block';
+       display.style.visibility = 'visible';
+       display.style.opacity = 1.0;
+       display.style.left = (window.width  - display.width) / 2;
+       display.style.top = (window.height  - display.height) / 2;
+       var picture = document.getElementById('picture-display-picture');
+       picture.setAttribute('src', this.getAttribute('src'));
+}
+
 function generate_div(value, index, array)
 {
        var screenshots = document.getElementById('screenshot-list');
@@ -14,8 +34,13 @@ function generate_div(value, index, array)
        var p1Element = document.createElement('div');
        var p2Element = p1Element.cloneNode(true);
        
-       var aElement = document.createElement('a');
-       aElement.setAttribute('href', index);
+       var aElement = document.createElement('img');
+       aElement.setAttribute('src', index);
+       if (aElement.addEventListener) {
+               aElement.addEventListener('click', present_picture, true);
+       } else if (aElement.attachEvent) {
+               aElement.attachEvent('onclick', show_picture);
+       }
 
        var imgElement = document.createElement('img');
        imgElement.setAttribute('src', index);
@@ -35,6 +60,13 @@ function build_screenshot_list()
 {
        for (var key in screenshots)
                generate_div(screenshots[key], key, screenshots);
+
+       var element = document.getElementById('picture-display-picture');
+       if (element.addEventListener) {
+               element.addEventListener('click', dismiss_picture, false);
+       } else if (element.attachEvent) {
+               window.attachEvent('onclick', dismiss_picture);
+       }
 }
 
 if (window.addEventListener) {
@@ -42,3 +74,5 @@ if (window.addEventListener) {
 } else if (window.attachEvent) {
        window.attachEvent('onload', build_screenshot_list);
 }
+
+

diff --git a/www/screenshots.html b/www/screenshots.html
index b8f6af8..682af82 100644 (file)
--- a/www/screenshots.html
+++ b/www/screenshots.html
@@ -21,6 +21,9 @@
                <div class="bodymatter">
                        <h2>Screenshots</h2>
                        <p>No utility program homepage is complete without a few screenshots. Here are a few:</p>
+                       <div id="picture-display">
+                               <img id="picture-display-picture" src="screenshot-stationlist-menu.png"></img>
+                       </div>
                        <div id="screenshot-list"></div>
                </div>
                <div class="footer">