Forum Replies Created

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter tonyuk

    (@tonycsanders)

    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>
    Thread Starter tonyuk

    (@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 1 year, 2 months ago by tonyuk.
    Thread Starter tonyuk

    (@tonycsanders)

    Many thanks David size=medium and omitting the mla_itemwidth parameter works nicely. Also I had not noticed the options on the Settings/Media admin page – so now I have lots of flexibility to achieve what I need.

    Case closed with thanks.

    Thread Starter tonyuk

    (@tonycsanders)

    I chatted with my host (Bluehost) – I have a Shared server subscription – no root access.

    Path /usr/bin/gs requires root access (VPS/Dedicated server only) – hey ho.

    size=full and then scaling down with mla_itemwidth=15% gives me what I need – unless there is a more elegant way ?

    Thread Starter tonyuk

    (@tonycsanders)

    How awesome is that ! Thankyou very much David. I was guilty of TLDNR and regretably skipped custom style templates in the documentation. MLA is a remarkable plugin and free ! (..but I donate to Chateau Seaview Fund, and will do so again).

    Thread Starter tonyuk

    (@tonycsanders)

    Solved – I shoud be using meta_value_num

    tonyuk

    (@tonycsanders)

    Same issue. Same solution. Thanks.

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