javascript - 单击以打开灯箱画廊时如何链接按钮？

Question

或者为此打开任何东西。

这种按钮事件的正确脚本语法是什么。

不确定它是否有所作为，但我正在尝试使用 fotorama 插件 - http://fotorama.io/

我的 html:

<div class="Gal"
    <div class="fotorama" data-nav="thumbs" data-transition="crossfade">
        <img src="Gallery/1.jpg" data-caption="One">
        <img src="Gallery/2.jpg">
        <img src="Gallery/3.jpg">
        <img src="Gallery/4.jpg">
    </div>
    <button type="button" id="gallery-button">Click Me!</button>
</div>

总的来说，我想首先展示一组 4 张图片，作为它们自己的“自己的”灯箱画廊，然后在下方有一个按钮，单击该按钮会调出另一个包含更多图片的灯箱画廊。

2 gallery 方法是解决此问题的正确方法吗？或者我能否以某种方式仅在 2 个不同区域中显示集合中的某些(例如前 4 张)图像，而第二个画廊添加更多图像。

Answer 1

不知道我是否理解你的问题:

您想要预览灯箱，然后在单击按钮时显示完整画廊吗？

您可以通过 innerHtml 在 html 中添加元素像那样:

function addElementsToGalery(){
document.getElementById("fotorama").innerHTML = document.getElementById("fotorama").innerHTML + '<img src="Gallery/5.jpg"><img src="Gallery/6.jpg"><img src="Gallery/7.jpg">';}

和更新后的 html:

<div class="Gal">
<div id="fotorama" class="fotorama" data-nav="thumbs" data-transition="crossfade">
    <img src="Gallery/1.jpg" data-caption="One">
    <img src="Gallery/2.jpg">
    <img src="Gallery/3.jpg">
    <img src="Gallery/4.jpg">
</div>