使用图像数组列表的simplegallary.js显示适合桌面屏幕的图像

show images fit to desktop screen using simplegallary.js of image array list

本文关键字：图像 桌面 屏幕 显示 simplegallary 数组 列表 js      更新时间：2023-09-26

在这里，我想要显示图像阵列中的图像的javascript函数应该显示为适合桌面屏幕大小，并告诉我在哪里更正代码，请告诉我是否有其他解决方案可以用于该组件

     var mygallery=new simpleGallery({
            wrapperid: "slideshow", //ID of main gallery container,
            dimensions: [960, 430], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
            imagearray: [
                        ["http://www.sifasusa.com/Atimo_s/news/slide-show16.jpg", "", ""],
                ["http://www.sifasusa.com/Atimo_s/news/slide-show15.jpg", "", ""],
                        ["http://www.sifasusa.com/Atimo_s/news/slide-show14.jpg", "", ""],
                        ["http://www.sifasusa.com/Atimo_s/news/slide-show01.jpg", "", ""],  
                ["http://www.sifasusa.com/Atimo_s/news/slide-show02.jpg", "", ""],
                ["http://www.sifasusa.com/Atimo_s/news/slide-show12.jpg", "", ""],
                ["http://www.sifasusa.com/Atimo_s/news/slide-show03.jpg", "", ""],
                ["http://www.sifasusa.com/Atimo_s/news/slide-show04.jpg", "", ""],
                ["http://www.sifasusa.com/Atimo_s/news/slide-show05.jpg", "", ""],
                ["http://www.sifasusa.com/Atimo_s/news/slide-show08.jpg", "", ""],
                ["http://www.sifasusa.com/Atimo_s/news/slide-show13.jpg", "", ""],
                ["http://www.sifasusa.com/Atimo_s/news/slide-show09.jpg", "", ""],
                ["http://www.sifasusa.com/Atimo_s/news/slide-show10.jpg", "", ""],
                ["http://www.sifasusa.com/Atimo_s/news/slide-show11.jpg", "", ""]
                ],
            autoplay: [true, 2500, 8], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
            persist: false, //remember last viewed slide and recall within same session?
            fadeduration: 500, //transition duration (milliseconds)
            oninit:function(){ //event that fires when gallery has initialized/ ready to run
                //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
            },
            onslide:function(curslide, i){ //event that fires after each slide is shown
                //Keyword "this": references current gallery instance
                //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
                //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
            }
                });

html code
<body>
<div id="slideshow">
    <img src="http://www.sifasusa.com/Atimo_s/news/slide-show01.jpg">
</div>
</body>

真正简单的Javascript来确定屏幕大小。

以下是您可以调用的各种功能，以获取有关屏幕大小的信息：

screen.width
screen.height
screen.availWidth
screen.availHeight
screen.colorDepth
screen.pixelDepth

因此，对您来说，您所需要做的就是将dimensions更改为

dimensions: [screen.height, screen.width]

现在你的图像应该显示在这些维度上。

相关文章：