|
|
@@ -0,0 +1,153 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ background-color: black;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slide {
|
|
|
+ display: none;
|
|
|
+ /**/
|
|
|
+ }
|
|
|
+
|
|
|
+ .slide.active {
|
|
|
+ display: block !important;
|
|
|
+ /**/
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ vertical-align: middle;
|
|
|
+ height: auto;
|
|
|
+ max-height: 100vh;
|
|
|
+ max-width: 100vw;
|
|
|
+ overflow: hidden;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slideshow {
|
|
|
+ max-width: 100vw;
|
|
|
+ position: relative;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dot {
|
|
|
+ cursor: pointer;
|
|
|
+ height: 10px;
|
|
|
+ width: 10px;
|
|
|
+ margin: 0 2px;
|
|
|
+ background-color: #b7c6d8;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dot.active,
|
|
|
+ .dot:hover {
|
|
|
+ background-color: #0067e6;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+
|
|
|
+ <div class="slideshow">
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <br>
|
|
|
+ <div style="text-align: center; position: absolute; bottom: 0px; right: 0px;width:100px;height:100px" onclick="toSetting()"></div>
|
|
|
+ <script>
|
|
|
+ var endpoint = "/system/ajgi/interface?script=/Slideshow/backend/listFile.js";
|
|
|
+ var image = [];
|
|
|
+ var interval = 0;
|
|
|
+
|
|
|
+ $.getJSON(endpoint, function(data) {
|
|
|
+ image = data["results"];
|
|
|
+ interval = data["interval"];
|
|
|
+ }).done(function() {
|
|
|
+ $("body").append('<div class="selector" style="text-align: center; position: absolute; bottom: 20px; left: 15px; "></div>');
|
|
|
+ for (var i = 0; i < image.length; i++) {
|
|
|
+ $("body > .slideshow").append('<div class="slide"><img src="' + image[i] + '" style="width:100% "></div>');
|
|
|
+ $("body > .selector").append('<span class="dot" onclick="showSlides(' + (i + 1) + ') "></span>');
|
|
|
+ }
|
|
|
+ //realigin to center
|
|
|
+ upd();
|
|
|
+ showSlides(1);
|
|
|
+ $('.slideshow .slide').on('load', function() {
|
|
|
+ upd();
|
|
|
+
|
|
|
+ });
|
|
|
+ $(window).on('resize', function() {
|
|
|
+ upd();
|
|
|
+ });
|
|
|
+
|
|
|
+ //auto refresh
|
|
|
+ setInterval(function() {
|
|
|
+ var selector = $("body > .selector > .dot.active").next();
|
|
|
+ if (selector.length > 0) {
|
|
|
+ selector.click();
|
|
|
+ } else {
|
|
|
+ $("body > .selector > .dot").first().click();
|
|
|
+ }
|
|
|
+ }, interval);
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ function showSlides(n) {
|
|
|
+ $(".slideshow .slide").fadeOut(500, "linear");
|
|
|
+ $(".slideshow .slide").attr("class", "slide")
|
|
|
+ $(".slideshow .slide:nth-child(" + (n) + ")").attr("class", "slide active")
|
|
|
+ $(".slideshow .slide:nth-child(" + (n) + ")").fadeIn("linear");
|
|
|
+ //dot
|
|
|
+ $("body .dot.active").attr("class", "dot")
|
|
|
+ $("body .dot:nth-child(" + (n) + ")").attr("class", "dot active")
|
|
|
+ upd();
|
|
|
+ }
|
|
|
+
|
|
|
+ function upd() {
|
|
|
+ //ascept ratio calculator, use to resize the image
|
|
|
+ var selector = $(".slideshow > .slide.active > img");
|
|
|
+ var img_width = selector.prop("naturalWidth");
|
|
|
+ var img_height = selector.prop("naturalHeight");
|
|
|
+ console.log(img_width, img_height);
|
|
|
+ var win_width = window.innerWidth;
|
|
|
+ var win_height = window.innerHeight;
|
|
|
+ var final_w = 0;
|
|
|
+ var final_h = 0;
|
|
|
+
|
|
|
+ final_h = win_height;
|
|
|
+ final_w = img_width * (win_height / img_height);
|
|
|
+ //reszie until everything fit the screen
|
|
|
+ while (final_w >= win_width) {
|
|
|
+ final_w *= 0.999;
|
|
|
+ final_h *= 0.999;
|
|
|
+ }
|
|
|
+ selector.height(final_h);
|
|
|
+ selector.width(final_w);
|
|
|
+
|
|
|
+ if (img_width < win_width && img_height < win_height) {
|
|
|
+ selector.height(img_height);
|
|
|
+ selector.width(img_width);
|
|
|
+ }
|
|
|
+
|
|
|
+ $('.slide.active').css('margin-left', (window.innerWidth - selector.width()) / 2);
|
|
|
+ $('.slide.active').css('margin-top', (window.innerHeight - selector.height()) / 2);
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function toSetting() {
|
|
|
+ window.location.href = "setting.html";
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
yeungalan
