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

Question

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" class="pgwSlideshow">

    <!-- begin additional part -->
    <div class="moreInfo col-md-12">
        <div class="row">
            <div class="row articleinfos">
                <ul class="col-md-3 einzeldownload">
                    <li class="item-1 show">
                        <a download class="download-archive icon-download-pfeil-boden uppercase" href="https://domain/files/image1.zip">image1.zip</a>
                    </li>
                    <li class="item-2 hidden">
                        <a download class="download-archive icon-download-pfeil-boden uppercase" href="https://domain/files/image2.zip">image2.zip</a>
                    </li>
                    <li class="item-3 hidden">
                        <a download class="download-archive icon-download-pfeil-boden uppercase" href="https://domain/files/image3.zip">image3.zip</a>
                    </li>
                </ul>
                <a href="#" class="col-md-3 icon-download-pfeil-boden uppercase">Alle Bilder</a>
                <a href="#" class="col-md-6 text-right text-beitrag icon-download-pfeil-boden uppercase">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 class="uppercase">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 class="uppercase">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 class="uppercase">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.

nbjorling · Answer 1 · 2023-01-03T11:42:27.637

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.

Diego D · Answer 2 · 2023-01-03T17:29:21.007

Why it's tricky?

Unfortunately the library pgwslideshow doesn't offer a very fine control. All you can do is initialize the gallery giving a selector pointing at a <ul> element having some given requirements.

There are no events to intercept when the current picture changed so you are forced to check which is the image currently shown only when the link is actually clicked.

And there's no way to inject html to build the caption if not just the plain text content in the data-description attribute. So that also won't be a way to inject the download link.

Proposed solution (...and fallacies)

You could do it on your own since the carousel has a clear structure and for example the caption element has class ps-caption but it's a weak strategy because anyway some carousel elements are positioned absolute and it's annoying to fit some other stuff in there plus those elements are in control of the library that could mess up with our plans. I'm not saying it won't be a good path, it's probably the best entry point to deliver the best result. But it would take some effort going too far from the point here.

So here I used your same approach: adding a div element inside the <ul> at the very beginning. It's not valid html of course since a list should only contain list items. Anyway to adapt to how the pgwslideshow works, it could be a place to put the element with the DOWNLOAD button for the sake of showing here how you could download the correct file corresponding to the currently shown picture.

It's worth saying that the only reason you are seeing that download link there between the big picture and the list of thumbnails, it's because it happens to be sitting just under where the absolute positioned big picture is ending. So it's actually an invalid approach but it seems to work because it's the first list item before the others following but yet it's not a <li> so it won't be affected by the styles.

The key

The key is having a static element defined in advance to contain a general link. Of course you can't make list of links like you did in your example because you have no way to show only the current picture in the gallery.

That's the anchor element we decided to put at the beginning of our <ul> list inside a div with class download. I tried to use valid html wrapping it inside a li but it messed up with the gallery.

Then you can add a click event handler to that unique link, that will query the gallery to know what's the currently shown picture and use that index to find what's the url where the browser should be redirected.

The url where the anchor point at, it's mapped by the <img> data attribute like this: data-archive-src="https://host/to/squirrel.zip"

Once the url is known, the strategy to trigger the actual download, is creating an anchor element from scratch with the correct download attribute and trigger its click event before removing it from the dom like it never existed.

References:

https://pgwjs.com/pgwslideshow/

getCurrentSlide - Returns the current image number. pgwSlideshow.getCurrentSlide();
And here I found the cdn urls for the assets:

https://www.webjs.net/en/p/pgwslideshow---responsive-slideshow-gallery-carousel-for-jquery-zepto-826.html
SO / Download file using javascript

Download File Using JavaScript/jQuery

var animalsCarousel;

$(document).ready(function() {
  animalsCarousel = $('#pgwContainer').pgwSlideshow();
  $('.download > a').on('click', () => {
    downloadCurrent();
  });
});

function downloadCurrent() {
  const i = animalsCarousel.getCurrentSlide();
  const url = $(`#pgwContainer li:nth-child(${i+1}) img`).data('archive-src');
  console.log(url);
  triggerBrowserDownload(url);
}

function triggerBrowserDownload(url, filename){

  if(!filename) filename = url.split('/').pop();
  
  console.log(`Downloading ${url}...`);
 
  var templink = document.createElement("a");
  templink.setAttribute('download', filename);
  templink.href = url;
  document.body.appendChild(templink);
  templink.click();
  templink.remove();
}

#pgwContainer {
  width: 100% !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#pgwContainer>li {
  float: none !important;
}

.download {
  display: block;
  outline: solid 3px red;
  flex-grow: 1;
  margin-top: 10px;
  padding: .2em 1em;
  font-size: 2rem;
  text-align: center;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://cdn.rawgit.com/Pagawa/PgwSlideshow/master/pgwslideshow.min.js'></script>

<link rel='stylesheet' href='https://cdn.rawgit.com/Pagawa/PgwSlideshow/master/pgwslideshow.min.css'>

<ul id="pgwContainer" class="pgwSlideshow">

  <!-- This is technically invalid in terms of HTML5 spe-->
  <div class="download">
    <a href="#">Download Picture</a>
  </div>

  <li>
    <img
      src="https://iili.io/HuycWGV.jpg"
      alt="Squirrel"
      data-description="The squirrel is a rodent..."
      data-large-src="https://iili.io/Huycwa1.jpg"
      data-archive-src="https://host/to/squirrel.zip">
  </li>
  <li>
    <img
      src="https://iili.io/HuycX6B.jpg"
      alt="Fox"
      data-description="The fox is a very smart predator..."
      data-large-src="https://iili.io/Huycj3P.jpg"
      data-archive-src="https://host/to/fox.zip">
  </li>
  <li>
    <img
      src="https://iili.io/HuycN8F.jpg"
      alt="Lion"
      data-description="The lion is a big predator living..."
      data-large-src="https://iili.io/HuycOyg.jpg"
      data-archive-src="https://host/to/lion.zip">
  </li>
</ul>

score -1 · Accepted Answer · answered Jan 03 '23 at 12:12

-1

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

<a download class="download-archive icon-download-pfeil-boden uppercase" href="https://domain/files/image1.zip"><li class="item-1 show">image1.zip</li>
</a>

answered Jan 03 '23 at 12:12

Malik Faizan

142
1
4

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

3 Answers3

Why it's tricky?

Proposed solution (...and fallacies)

The key

References: