yeungalan
/
Slideshow-Demo


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
							<!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>

    <script>
        var endpoint = "/system/ajgi/interface?script=/DemoPhoto/backend/listFile.js";
        var image = [];
        var interval = 0;

        $.getJSON(endpoint, function(data) {
            image = data["results"];
            interval = data["interval"];
        }).done(function() {
            $(".slideshow").append('<div class="selector" style="text-align: center; position: absolute; top: ; bottom: 20px; left: 15px; "></div>');
            for (var i = 0; i < image.length; i++) {
                $('<div class="slide"><img src="' + image[i] + '" style="width:100% "></div>').insertBefore(".slideshow > .selector");
                $(".slideshow > .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 = $(".slideshow > .selector > .dot.active").next();
                if (selector.length > 0) {
                    selector.click();
                } else {
                    $(".slideshow > .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
            $(".slideshow .dot.active").attr("class", "dot")
            $(".slideshow .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);


        }
    </script>

</body>

</html>