Revamp screenshot page and add horizontal file before the page footer.

 Code inspired by https://www.w3schools.com/howto/howto_js_slideshow.asp

Signed-off-by: Michele Calgaro <michele.calgaro@yahoo.it>

1 files changed, 69 insertions, 54 deletions

diff --git a/screenshots.php b/screenshots.php
index 373683c..a7a2e94 100644
--- a/screenshots.php
+++ b/screenshots.php
@@ -7,63 +7,78 @@ include("tde-head-and-foot.php");
 doHeader("TDE Screenshots", "Main", "Screenshots");
 ?>
 
-<p>This page contains screenshots of the Trinity running under various Linux
-distributions. If you have a particularly interesting Trinity desktop and
-would like to see it displayed here, please <a href="mailinglist.php">contact us</a>.</p>
+ <!-- Slideshow container -->
+<div class="slideshow-container">
+
+  <!-- Full-width images -->
+  <div class="mySlides fade">
+    <img src="media/screenshots/large/R14-1-0-michele2-TDE.png" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="media/screenshots/large/Blu256-deKorator-autumn.png" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="media/screenshots/large/TDE-screen1.png" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="media/screenshots/large/tde3.png" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="media/screenshots/large/R14-0-13-full-screenshot-BSD.png" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="media/screenshots/large/TDE-screen2.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="media/screenshots/large/R14-1-0-philippe.png" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="media/screenshots/large/Thierry_de_Coulon_2.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="media/screenshots/large/Nikolaus_Klepp_6.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="media/screenshots/large/tde6.png" style="width:100%">
+  </div>
+
+  <!-- Next and previous buttons -->
+  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+  <a class="next" onclick="plusSlides(1)">&#10095;</a>
+</div>
+<br/>
+
+<!-- The dots/circles -->
+<div style="text-align:center">
+  <span class="dot" onclick="currentSlide(1)"></span>
+  <span class="dot" onclick="currentSlide(2)"></span>
+  <span class="dot" onclick="currentSlide(3)"></span>
+  <span class="dot" onclick="currentSlide(4)"></span>
+  <span class="dot" onclick="currentSlide(5)"></span>
+  <span class="dot" onclick="currentSlide(6)"></span>
+  <span class="dot" onclick="currentSlide(7)"></span>
+  <span class="dot" onclick="currentSlide(8)"></span>
+  <span class="dot" onclick="currentSlide(9)"></span>
+  <span class="dot" onclick="currentSlide(10)"></span>
+</div>
 
-<p>
-<script type="text/javascript" src="highslide/highslide.js"></script>
 <script type="text/javascript" src="screenshots.js"></script>
 
-<DIV>
-    <div class="sc_img_holder">
-        <div class="sc_img">
-            <a href="media/screenshots/large/tde1.png" class="highslide" onClick="return hs.expand(this, { captionText: '' })"><img alt="" src="media/screenshots/small/tde1.png"></a>
-        </div>
-        <div class="sc_txt">
-        </div>
-    </div>
-    <div class="sc_img_holder">
-        <div class="sc_img">
-            <a href="media/screenshots/large/tde2.png" class="highslide" onClick="return hs.expand(this, { captionText: '' })"><img alt="" src="media/screenshots/small/tde2.png"></a>
-        </div>
-        <div class="sc_txt">
-        </div>
-    </div>
-    <div class="sc_img_holder">
-        <div class="sc_img">
-            <a href="media/screenshots/large/tde3.png" class="highslide" onClick="return hs.expand(this, { captionText: '' })"><img alt="" src="media/screenshots/small/tde3.png"></a>
-        </div>
-        <div class="sc_txt">
-        </div>
-    </div>
-    <div class="sc_img_holder">
-        <div class="sc_img">
-            <a href="media/screenshots/large/tde4.png" class="highslide" onClick="return hs.expand(this, { captionText: '' })"><img alt="" src="media/screenshots/small/tde4.png"></a>
-        </div>
-        <div class="sc_txt">
-        </div>
-    </div>
-    <div class="sc_img_holder">
-        <div class="sc_img">
-            <a href="media/screenshots/large/tde5.png" class="highslide" onClick="return hs.expand(this, { captionText: '' })"><img alt="" src="media/screenshots/small/tde5.png"></a>
-        </div>
-        <div class="sc_txt">
-        </div>
-    </div>
-    <div class="sc_img_holder">
-        <div class="sc_img">
-            <a href="media/screenshots/large/tde6.png" class="highslide" onClick="return hs.expand(this, { captionText: '' })"><img alt="" src="media/screenshots/small/tde6.png"></a>
-        </div>
-        <div class="sc_txt">
-        </div>
-    </div>
-</DIV>
-<div CLASS="clearall"></div>
-</p>
-
-<p>More screenshots from members of our community can be found in the community section
-of <a href="https://wiki.trinitydesktop.org/Community_Screenshots">our wiki</a>.</p>
+
+<br/>
+<p>See more screenshots <a href="https://wiki.trinitydesktop.org/Community_Screenshots">from our community members</a> on the Wiki.</p>
+
+<p>If you would like to submit a screenshot, please reach out on our <a href="mailinglist.php">mailing lists</a>.</p>
+<br/>
 
 <?php
     doFooter();