通过API以全屏模式调用fotorama gallery

2023-12-10

我从标准 HTML 链接启动 fotorama jquery gallery 插件。它工作得很好,但我想立即以全屏模式启动,而不是在启动后单击 fotorama 中的链接将其更改为全屏。

我的代码是这样的:

<div id="fotorama" class="fotorama"
   data-width="100%"
   data-height="100%"
   data-nav="thumbs"
   data-allowfullscreen="true"
   data-transition="crossfade"
   data-auto="false">
</div>

<p class="something">Something</p>

<script>
  $(function(){
    $('.something').click(function(){

      var $gallery = $('#fotorama').fotorama();
      var fotorama = $gallery.data('fotorama');

      // Overwirte all the photos
      fotorama.load([
        {img: '0027.jpg'},
        {img: '1759.jpg'}
      ]);

    });
  });
</script>

由于我找不到 API 文档(也许它还不完整?)我想知道是否有人知道如何做到这一点?

非常感谢。


1. requestFullScreen()

使用 Fotorama API 调用来阻止自动初始化:

<script>
  $(function () {
    var fotorama = $('.fotorama')
      .fotorama({allowfullscreen: true})
      .data('fotorama');

    fotorama.requestFullScreen();
  });
</script>

<div class="fotorama"
     data-auto="false"
     data-height="100%">
  <img src="1.jpg">
  <img src="2.jpg">
</div>

但右上角会有一个全屏退出图标,用户将能够离开全屏。即使您使图标不可见,也可以通过按关闭全屏esc按钮。所以...


2. data-width="100%" data-height="100%"

我相信最好用这个片段来模仿全屏:

<body style="margin: 0;">

  <div class="fotorama"
       data-width="100%"
       data-height="100%">
    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
  </div>

</body>

例子:http://fotorama.io/examples/full-window.html.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

通过API以全屏模式调用fotorama gallery 的相关文章

随机推荐

  • Perl,使脚本在x秒后超时?

    我一直在搜索这个问题 但令人惊讶的是很难得到一个直接的答案 因为 php 似乎有关于这个主题的更多信息 我需要让我的 perl 脚本在指定的秒数后终止 因为 就像现在一样 它们运行时间太长并堵塞了我的系统 我怎样才能使整个脚本在指定的秒数后
  • Java-改变秋千背景颜色?

    好的 我得到了一个使用 系统 外观的 Swing 应用程序 现在 我想将主面板的背景颜色更改为黑色 太容易了吧 UIManager put Panel background Color BLACK 是的 除了现在应用程序中的控件看起来很愚蠢
  • 如何获取 Windows 中所有打开的命名管道的列表?

    有没有一种简单的方法来测试命名管道是否正常工作 我想确保从应用程序发送的数据确实已发送 有没有一种快速简便的方法来获取所有命名管道的列表 在 Windows Powershell 控制台中 键入 System IO Directory Ge
  • 无法保存/传递父级对组合对象的引用

    在 C 中 它会是这样的struct A由 组成struct B和一些功能B获取指向父对象的指针A 所以函数为A调用该函数B将简单地通过this指向它的指针 我正在 Rust 中尝试此操作 但未能使其正常工作 这就是我想要实现的目标 str
  • 从经典 ASP 调用 COM 对象

    如何从经典 ASP 调用 COM 对象 我努力尝试但找不到好的教程 有什么建议吗 我在经典 ASP 中使用 C 要在经典 ASP 中实例化 COM 对象 Dim rs Set rs Server CreateObject ADODB Rec
  • lxml.html。读取文件时出错;无法加载外部实体

    我正在尝试使用 lxml html 解析从 YouTube 获取电影预告片 url from lxml import html import lxml html from lxml etree import XPath def get yo
  • solr 数据导入错误:索引失败。回滚所有更改

    当我运行 完全导入并清理 命令时 错误是 索引失败 回滚所有更改 我的数据导入配置文件
  • iAds 不适用于 iPad 应用程序吗?

    我有一个 iPad 应用程序 它需要 iAds 但在库中我找不到广告横幅视图 iAds 不适用于 iPad 吗 我使用的是 iOS SDK 4 1 在 iPad 应用程序中实施的其他替代方案是什么 您需要使用 iOS SDK 4 2 因为
  • ScalaTest 可以在没有同步调用的情况下检测超时吗(比如在无限循环中?)

    在下面的代码中 测试称为sleep优雅地失败 而测试freeze导致测试永远不会结束 import org scalatest FunSuite import org scalatest concurrent TimeLimitedTest
  • 如何将 C++ wstring UTF-8 字符打印到 Mac OS 或 Unix 终端?

    我怎样才能打印一个std wstring using std wcout 我尝试了以下推荐的方法here 但它仅适用于打印此 Hola 但不是这个日本 include
  • 在应用颜色的同时对图像应用阴影

    我正在根据 HSV 的 3 个滑块值更改汽车的颜色 我可以改变颜色 但感觉就像油漆 颜色改变后的图像没有原创性 我如何应用阴影和效果 我如何应用输入图像中的阴影和效果 您好 您可以参考下面的 C 代码 这里我仅更改色调值 如果您想更改饱和度
  • 在 C++ 中的向量向量上使用“unique()”

    我希望这不是一个重复的问题 但如果是 请随时为我指出正确的方向 我有一个vector
  • 当不支持-XX:+PrintFlagsFinal时如何找到默认的MaxPermSize?

    我正在使用一个系统 其中可以同时启动许多作为 Java 应用程序实现的作业 每个作业都在单独的 JVM 中运行 其中一些工作需要比其他工作更大的永久元大小 然而 由于操作系统内存有限 让所有作业都使用最大值是不可行的 因此 我想指定 XX
  • eWay支付网关

    我正在尝试实现来自 eway 澳大利亚 的定期网络服务 但是我无法让它工作 我不断收到消息 命名空间 中的元素 rebillCustomerCreate http www eway com au gateway rebill manageR
  • 使用 gspread 将 CSV 上传到 Google 表格

    我有一个 Json 对象需要上传到 Google 电子表格 我搜索并阅读了各种资源 但找不到解决方案 有没有办法使用 gspread 将对象或 csv 从本地上传到谷歌电子表格 我宁愿不使用谷歌客户端API 谢谢 您可以使用导入 CSV 数
  • Pandas 中数据为负时为红线,数据为正时为绿线

    I wanted to have the data in this graph as red when y is below 0 and green when it is above 0 我正在尝试这个 但没有成功 import panda
  • Mysql - 存储过程 OUT 变量返回 null

    我的表结构是 DROP TABLE IF EXISTS child CREATE TABLE child id int 11 NOT NULL AUTO INCREMENT name varchar 255 NOT NULL PRIMARY
  • 删除向量中大于 value 的元素

    我需要删除元素 我正在用误差线绘制 所以我需要从下面的所有四个向量中删除该数据点 其中diff向量大于 2 std 这是我的想法 for i in 1 length Z if diff i gt 2 std Z i lt NULL ucl
  • minLength 数据验证不适用于 CakePHP 的 Auth 组件

    假设我有一个用户注册并且正在使用 Auth 组件 当然允许 user register 问题是 如果我需要在模型中设置 minLength 验证规则 它不起作用 因为 Auth 组件会对密码进行哈希处理 因此它始终大于我的 minlengt
  • 通过API以全屏模式调用fotorama gallery

    我从标准 HTML 链接启动 fotorama jquery gallery 插件 它工作得很好 但我想立即以全屏模式启动 而不是在启动后单击 fotorama 中的链接将其更改为全屏 我的代码是这样的 div class fotorama