Gallery links that have been clicked

Resolved tonyuk
(@tonycsanders)

3 months, 2 weeks ago

I have a gallery with quite a few pdf files. Caption is the title and the link opens in a new page

mla_caption='<a href=”{+file_url+}” target=”_blank”>{+title+}</a>’

Is there a way I can change the style of the caption to indicate that a user has clicked/visited the link ?

selector a:visited { is not what I want since this persists until the user clears their browser cache.

I need something that will show the user what pdfs they have selected.

Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)

Thread Starter

(@tonycsanders)

Not strictly an MLA question I guess. Scripted in an event listener. Any more elegant solutions gratefully accepted.

<script> 
var links = document.getElementsByClassName("gallery-caption");
function changeColor(e) {
    e.target.style.color = e.target.style.color = 'red';
}
for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', changeColor);
}
</script>
<script> 
var thumbnails = document.getElementsByClassName("gallery-icon");
function changeColorIcon(e) {
    e.target.style.backgroundColor = e.target.style.backgroundColor = 'red'; 
    }
for (var i = 0; i < thumbnails.length; i++) {
    thumbnails[i].addEventListener('click', changeColorIcon);
}
</script>

This reply was modified 3 months, 2 weeks ago by tonyuk.

Thread Starter

tonyuk

(@tonycsanders)

3 months, 2 weeks ago

This is better. Gallery icon and caption text get a blue background when either the thumbnail or caption is clicked. My scripting skills didn’t have the mileage for this – chatgpt however did.

<script> 
document.addEventListener("DOMContentLoaded", function () {
    // Select all image links and captions
    const galleryItem = document.getElementsByClassName("gallery-item");
    const captions = document.getElementsByClassName("gallery-caption");

    // Convert HTMLCollection to an array and loop through
    for (let i = 0; i < galleryItem.length; i++) {
        // Ensure there is a corresponding caption for each image
        if (captions[i]) {
            // Click event on image link
            galleryItem[i].addEventListener("click", function (event) {
                this.style.backgroundColor = "lightblue"; // Change image background
            });

            // Click event on caption
            captions[i].addEventListener("click", function (event) {
            galleryItem[i].style.backgroundColor = "lightblue"; // Change image background
            });
        }
    }
});
</script>

Plugin Author

David Lingren

(@dglingren)

3 months, 2 weeks ago

Good to hear from you again. Thanks for working through this issue on your own before I had a chance to respond. I was going to suggest some sort of CSS and script solution, and you’ve found it!

I’m impressed that ChatGPT was able to help – it’s a new world. I will leave this topic resolved, but please update it if you have problems, further questions or more solutions to share. Thanks for your continued interest in the plugin.

Viewing 3 replies - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.