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

或者为此打开任何东西。

此类按钮事件的正确脚本语法是什么。

不确定它是否有所作为，但我正在尝试遵循 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画廊方法是解决这个问题的正确方法吗？或者我可以以某种方式只在 2 个不同区域的集合中显示某些(例如前 4 个)图像，而第二个画廊添加更多图像。

最佳答案

我不知道我是否理解你的问题:
您想要一个预览灯箱，然后在单击按钮时显示完整的画廊？
您可以通过 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>

关于javascript - 单击以打开灯箱画廊时如何链接按钮？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23799893/