thumbnail and active image activate the link belonging to them or hide other links-CodePudding

I am using this JS Gallery to display some images.

The problem is that I want to display the link of the image between the current large image and the row of thumbnails. Unfortunately, I can't output it in the container of the thumbnail, because it is not clickable.

Therefore, it seems easiest to me to output an additional container for the output between the large image and the thumbnails.

That are my code:

    <ul id="pgwCotainer" >

    <!-- begin additional part -->
    <div >
        <div >
            <div >
                <ul >
                    <li >
                        <a download  href="https://domain/files/image1.zip">image1.zip</a>
                    </li>
                    <li >
                        <a download  href="https://domain/files/image2.zip">image2.zip</a>
                    </li>
                    <li >
                        <a download  href="https://domain/files/image3.zip">image3.zip</a>
                    </li>
                </ul>
                <a href="#" >Alle Bilder</a>
                <a href="#" >kompletter Beitrag</a>
            </div>
        </div>
    </div>
    <!-- end additional part -->

    <li>
        <img src="https://domain/image/image-1.jpg" alt="Bild 1 Lorem ipsum "
             data-description=""
             data-large-src="https://domain/small-image/image-1.jpg"/>
        <p >Bild 1</p>
    </li>
    <li>
        <img src="https://domain/image/image-2.jpg" alt="Bild 2 Lorem ipsum "
             data-description=""
             data-large-src="https://domain/small-image/image-2.jpg"/>
        <p >Bild 2</p>
    </li>
    <li>
        <img src="https://domain/image/image-3.jpg" alt="Bild 3 Lorem ipsum "
             data-description=""
             data-large-src="https://domain/small-image/image-3.jpg"/>
        <p >Bild 3</p>
    </li>
</ul>

How can I add a class "show" and "hide" at another place in the DOM?

When I click on a thumbnail or when I click on the big image, the class "show" should be added at the respective download link and at the other links should not be visible in each case.

CodePudding user response：

To do this you need to create a script.

give the download button element an ID like "downloadButton", then get the element.

const downloadButton = document.getElementById("downloadButton");

create a function that sets the right text and download link on the download element.

function setDownloadInformationOnElement(label, downloadLink) {
  downloadButton.innerHtml = label;
  downloadButton.setAttribute("href", downloadLink);
};

Then on your images and tumbnails add a onClick function which implements the right text and downloadLink.

Hope this helps.

CodePudding user response：

to make it clickable please wrap the anchor tag around list element.

<a download  href="https://domain/files/image1.zip"><li >image1.zip</li>
</a>