Cordova如何全屏打开图像(用于loop + jQuery)

在Cordova应用程序中全屏打开图像并使用循环和jQuery，您可以按照以下步骤操作：

首先，确保您已经安装了Cordova以及jQuery。
在您的HTML文件中，添加一个图像元素和一个用于全屏显示的按钮：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fullscreen Image</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <img id="myImage" src="your-image-source.jpg" alt="Image" style="width:100%; height:auto;">
    <button id="fullscreenBtn">全屏显示</button>
</body>
</html>

在JavaScript文件中，编写以下代码来处理全屏请求和循环滚动图片：

$(document).ready(function() {
    var images = ['image1.jpg', 'image2.jpg', 'image3.jpg']; // 要循环的图像数组
    var currentImageIndex = 0;

    function showFullscreenImage(src) {
        var imageElement = document.createElement('img');
        imageElement.src = src;
        imageElement.style.width = '100%';
        imageElement.style.height = 'auto';
        imageElement.style.position = 'fixed';
        imageElement.style.top = '0';
        imageElement.style.left = '0';
        imageElement.style.zIndex = '9999';
        document.body.appendChild(imageElement);

        imageElement.onclick = function() {
            document.body.removeChild(imageElement);
        };
    }

    function loopImages() {
        currentImageIndex = (currentImageIndex + 1) % images.length;
        showFullscreenImage(images[currentImageIndex]);
    }

    $('#fullscreenBtn').on('click', function() {
        loopImages();
    });
});

请确保将your-image-source.jpg替换为您的实际图片路径。此代码将使点击按钮时，图像将以全屏模式显示，并在每次单击时切换到下一张图像。如果您希望从第一张图像开始循环播放，可以将currentImageIndex初始化为0。

Cordova如何全屏打开图像(用于loop + jQuery)

、、

我将图像存储在localStorage中，值是base64编码的图像。该函数循环遍历localStorage并获取键和值，然后jQuery将图像附加到html中。我的问题是，如何让这些生成的图像列表能够在点击时全屏显示？

浏览 19提问于2016-08-20得票数 0

回答已采纳

1回答

如何在Phonegap中使用默认设备图像查看器打开图像

我希望下载的图像将显示给用户后，下载已经完成，文件已写入设备。你是怎么解决这个问题的？谢谢。

浏览 1提问于2014-10-22得票数 2

2回答

如何通过点击主图像打开fotorama全屏模式？

、、、

如何打开全屏模式时，点击主图像(不是缩略图)？我想让用户打开全屏模式，点击图像，而不是全屏图标在右上角。这个答案不适用于我：

浏览 6提问于2017-02-27得票数 2

回答已采纳

3回答

批处理程序不会打开最后一个文件

、

我需要在全屏上打开最后一张图片。让脚本监听，当在dir中创建一个新的映像时，需要打开它。我有这段代码，但它不能正常工作。for /f %%i in ('dir /b/a-d/od/t:c') do set LAST=%%i"C:\ProgramFiles\Internet Explorer\Iexplore.exe" -k "%CD

浏览 2提问于2014-12-17得票数 0

回答已采纳

2回答

如何在点击图像时禁用phonegap/cordova上的图像缩放？

、、

我有一个phonegap/cordova应用程序，可以从wordpress网站上拉出博客文章。然而，我有一个问题，当点击页面上的图像时，它会打开全屏，这会隐藏应用程序的导航。这种行为并不理想，因为用户必须退出应用程序并重新打开它才能恢复导航控件。此行为也发生在iPad Air 2上。有没有办法在phonegap/cordova中禁用此行为？

浏览 1提问于2015-02-19得票数 0

1回答

捏缩科多瓦

、

如何为cordova android项目实现缩放？我有一个iframe，我在其中加载我的src，我想实现按压放大iframe，因为它占据了整个屏幕。

浏览 3提问于2014-05-21得票数 6

1回答

如何在JavaScript中区分点击事件和滑动事件？

、

我正在使用带有ReactJS的Cordova 2来开发带有OnsenUI的跨平台应用程序。它应该可以在移动设备上运行，但如果它也能在普通浏览器上运行就更好了。我有一个带有全屏图像的Carousel元素，当用户点击图像时，我想打开一个新页面。问题是，每次滑动到新图像都会触发图像上的click事件。如何区分点击幻灯片和滑动到新幻灯片之间的区别？

浏览 15提问于2016-09-23得票数 1

回答已采纳

1回答

当您使用Cordova 6创建应用程序时，然后为iOS构建它时，您将看到，如果您在XCode上打开项目属性，将启用"Requires全屏“选项：这非常麻烦，因为它阻止应用程序在iOS上“多任务处理”(您不能在打开应用程序的情况下分割屏幕)，正如中提到的那样。只想提一下，修复程序(2)还需要更新项目的信息plist文件，以表明应用程序不需要全屏，如下所示在Cordova的早期版本中，您可以使用首选项来控制该选项但这并没

浏览 12提问于2017-02-13得票数 1

回答已采纳

1回答

为什么在设备内存中捕获的图像为0字节，而在图库中则是完全可见的？

、

我使用以下Cordova PhoneGap代码成功捕获图像并将其保存到内部内存，在本例中，保存到我的Nexus 7中的DCIM/照相机。我能够打开图库并查看在那里捕获的图像。问题是，当我将设备插入我的PC并导航到文件夹时，图像仅为0字节。在Photoshop中打开它们，它们是空白的。为什么在设备内存中捕获的图像为0字节，而在图库中则是完全可见的？如何防止图像在从PC上访问时为0字节？// saves p

浏览 4提问于2014-04-02得票数 0

1回答

Jquery动画切换到移位marginTop -随附演示

、、、

我在使用jquery打开/关闭选项卡时遇到了麻烦。该选项卡的作用是单击该选项卡，以显示下面滑块的全屏图像。从技术上讲，滑块本身不会改变，它只是简单地改变位于其下方的面板的marginTop，以显示滑块的全屏图像。首先，只需单击下面的选项卡“显示全屏图像”-这将打开以显示下面的滑块。只需要把它关起来。任何jquery专家，请帮助！我是一个jquery的新手，我要疯了！

浏览 2提问于2015-09-22得票数 0

回答已采纳

1回答

是否可以始终允许使用iOS中的Cordova的相机和麦克风第三方应用程序？

、、

我创建了用于使用Webrtc的VideoConferning应用程序，也制作了在ios中使用Cordova的应用程序，但问题是当我打开该应用程序时，每次它触发相机和麦克风的权限。这是我的插件cordova-plugin-file 7.0.0 "File"<e

浏览 18提问于2022-11-09得票数 0

回答已采纳

2回答

安卓-让onTouch优先于onClick

、、、、

每个视图显示一个图像列表。图像具有调用新活动并使图像全屏显示的onClick事件。这一切都很好，但是，如果我试图在3个不同的视图之间滑动，而我的手指划过一个图像，它将触发onClick事件并打开图像全屏。所以我想知道如何在onTouch上设置优先级(用于页面/视图交换)？

浏览 0提问于2011-07-12得票数 3

1回答

如何在iPad中添加全图视屏

、、

其中我在视图中显示图像。当我点击图像时，它必须在全屏中打开。目前它是在拆分视图控制器的detailviewcontroller中打开的。对于全屏打开的图像，我使用了这个。如何在全屏中打开这些图像，而不是在拆分视图控制器的子视图中？

浏览 2提问于2011-12-19得票数 0

5回答

android xml可绘制的全屏图像

、、

我需要android中的xml绘图(用于cordova启动屏幕)。我想显示一个透明的标志，以屏幕为中心(不拉伸)，而其余的屏幕有一个背景颜色集。<?splashscreen" </item>现在图像有了背景颜色--但

浏览 6提问于2015-04-23得票数 11

回答已采纳

3回答

iOS/iPhone上Ionic/Cordova/PhoneGap应用程序的内联YouTube视频

、、、、

如何让YouTube视频在iPhone上的Ionic/Cordova/PhoneGap应用程序中在线播放？我已经尝试了所有的顶级结果在这里和谷歌是徒劳的。无论我是嵌入一个iframe，一个对象，还是通过YouTube iframe，视频总是在全屏打开。有很多iOS应用程序可以实现这一点。他们是如何做到这一点的？这能被劫持并实现到一个Cordova应用程序中吗？比如科多瓦插件？

浏览 3提问于2015-11-30得票数 2

回答已采纳

1回答

如何在iOS 7.1上用Cordova 3.5打开Safari？

、、

我读过很多关于这个问题的文章，但是通常的解决方案似乎不适用于Cordova 3.5和iOS 7.1。不起作用：在全屏打开目标

浏览 3提问于2014-05-23得票数 0

回答已采纳

1回答

离子2图像弹出(角2动态结合)

、、、

我想要的是，如果用户点击一个<img />，那么它应该显示在一个全屏弹出图像。我如何做到这一点--基本上，在动态生成的内容中向所有img标记添加ng单击？我唯一能想到的方法就是使用jQuery.

浏览 1提问于2017-05-09得票数 2

回答已采纳

1回答

如何使用JS/JQuery检测视频是否为全屏？

、、、、

我想做以下几件事：我相信用于切换的JQuery是这样的： var video = $('.

浏览 1提问于2020-03-19得票数 2

回答已采纳

1回答

Cordova Google Maps Div空白

、

我一直在尝试将谷歌地图添加到我的Cordova应用程序中，今天我更新了所有的插件和cordova版本，以更新最新的google服务我添加了插件cordova- plugin -googlemaps，我有了但是，无论我做什么，div总是空白的，但如果使用全屏按钮，它会显示一个带有地图的对话框，在IOS和Android中可以很好地显示全屏地图，但我正在尝试获取div中的地图。下面的所有代码和屏幕图像，当我按下全屏按钮时，它会出现一个全屏地图，但我正在尝试

浏览 4提问于2017-03-30得票数 0

3回答