如何在点击打开灯箱库时链接按钮？

Question

Or open anything for that matter.

What is the correct script syntax for a button event of this sort.

Not sure whether it makes a difference but I'm attempting to follow the fotorama plugin - http://fotorama.io/

My 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>

Overall I would like to display, a set of 4 images first, as their 'own' lightbox gallery as such, and then have a button underneath which would when clicked would bring up the another lightbox gallery with more images.

Is the 2 gallery method the correct way to go about this? Or can I somehow only display a certain few (for instance first 4) images in the set in 2 different areas while the 2nd gallery adds more.

Answer 1

I don't know if i understood your qustion right:

you want to have a preview lightbox and then, when a button is clicked, show the full gallery?

You can add elemts in html via innerHtml like that:

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">';}

and the updated 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>