个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在从标准 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 文档(也许它还没有完成？)我想知道是否有人知道如何做到这一点？
非常感谢。
最佳答案
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 按钮关闭全屏。所以……
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>
关于javascript - 通过API以全屏模式调用fotorama图库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19014907/
25
4
0
我正在使用美丽而出色的 Fotorama slider ，但我有一个问题! 默认情况下， slider 在左上角! 我只希望它在页面上居中。 我在 .css 中找到，但找不到答案。 你能帮我吗？ 最佳
我使用 fotorama 作为图片库，所以我想在全屏显示时为图像或视频添加自定义按钮。当 fotorama 图像处于全屏模式时，是否有任何方法可以添加自定义按钮(例如用于共享，例如...)或工具栏。
我找遍了所有地方，但找不到这个问题的答案。我正在尝试使用 fotorama 在引导网页上创建照片库，但 fotorama div 一直显示在页面的左侧。我在不同的地方尝试过 margin: 0 aut
我需要增加缩略图之间的间距。我该怎么做？ 我只有 5 张图片，大拇指都聚在中间，看起来很有趣。 非常感谢。 最佳答案 只需使用thumbmargin选项: http://fotoram
如何在 fotorama 中始终显示缩略图？有一个只有一张图片的画廊，我也想显示缩略图，只有在有两张或更多图片时才会显示。 最佳答案 使用enableifsingleframe标志: 关于
Github 上最近更新的插件修复了 Fotorama 错误: https://github.com/artpolikarpov/fotorama/commit/1810d59eecc927fbef1
我刚刚安装了 Fotorama javascript 脚本。但是，当我使用 data-arrows="true"启用箭头时，这是一个您可以在其中设置的属性，它们根本不显示。 这是删除了图片链接的代码:
我为我的网站使用 jquery gallery fotorama ( http://fotorama.io )，我尝试通过将鼠标悬停在缩略图上来实现图像更改，就像这样 http://www.homea
有没有办法在我点击一个 div 时更改 Fotorama 中的图像？ 例如，我有两个 div，一个名为#NYPhotos，另一个名为#WAPhotos。当我单击 div #NYPhotos 时，Fot
我正在尝试根据 img 是否具有 data-title 属性来使自定义 Fotorama 标题显示不同。现在，它当前显示为“未定义”，但我希望它完全忽略该属性(如果它不存在)。我尝试使用 if/els
我曾经在我的网站中使用 fotorama 插件。我的问题是当我通过选择框选择其他产品时，缩略图不会改变。 我需要在缩略图上添加 data-serialid="xxx"。 任何建议都非常好。 非常感谢。
我正在使用 Fotorama 创建幻灯片，但我的所有图像都不会居中。例如，这就是它显示的 http://damien-harrow-photography.co.uk/picture.php?/285
我的产品详细信息页面上的产品 slider 有问题。我不知道如何设置容器的宽度和高度。 我找到了 Fotorama 插件的一些配置，但没有关于宽度和高度的信息。 我的产品图像有另一个维度。 这是插件
我正在为产品图库使用 fotorama js 插件。单击主图像(不是缩略图)时如何打开全屏模式？我想允许用户通过单击右上角的图像而不是全屏图标来打开全屏模式。 这个答案对我不起作用:https://s
我正在为产品图库使用 fotorama js 插件。单击主图像(不是缩略图)时如何打开全屏模式？我想允许用户通过单击右上角的图像而不是全屏图标来打开全屏模式。 这个答案对我不起作用:https://s
我正在寻找一个好的带有缩略图预览的 jQuery 图像 slider ，以用于我正在开发的 Web 应用程序。我遇到了 Fotorama.js，它似乎具有我想要的大部分功能，但我在文档中没有看到有关在
我已经用拇指集成了 fotorama 的幻灯片。我喜欢这个插件，但在本例中，语法是: (...) 用于显示大图像，因此我无法添加指向外部页面的链接。 我写不出来!! : 有人有解决办法吗？ 提前致
英语不是我的第一语言，很抱歉我的错误；) 我想将所有缩略图放在一个 block 中而不是 slider 示例中(加号是图像) 不是: (带有导航按钮的 slider ) 我想要: +++++++++
我在 fotorama 中使用 ajax 遇到了两个问题 i) 在ajax之前，我的代码是: 在ajax之后，我的代码是: 在这种情况下，fotorama 可能有效，也可能无效 ii
我试图通过将每个图像列表变成一个 fotorama 画廊来缩小我的博客文章的大小。这对一组图像非常有效，但是当我尝试使用多个 fotorama 时，该网站拒绝显示这些图像。我假设我应该更改编码中的某些
我是一名优秀的程序员,十分优秀！