Open dialog through image link in a <<for>> loop

Hi, I am trying to create a fighter menu. The fighters are represented by their respective images, when an image is clicked, a dialog box should appear displaying the respective stats.
I am using a for loop to populate the menu dynamically. My issue is that I cannot figure out for the life of me how to load the image while also making the image clickable. Right now the images load perfectly, but the link breaks.

<<for _index = 0; _index < $fighters.length; _index++>>
<div class="gal">
    <a data-setter="Dialog.setup("$fighters[_index].name"); Dialog.wiki("Corruption: <<= $fighters[_index].corruption>>"); Dialog.open()">
        <img @src="$fighters[_index].image" @alt="$fighters[_index].name + ' Gallery'" class="character-img">
    </a>
</div>
  • I got the “data-setter” in the <a> from the sugarcube documentation.

:thinking:
Why not using <<link>> and <<script>> inside instead of <a>.

Something like:

<<link '<img @src="" @alt="" class="">'>>
    <<script>>
         /* the code for the dialog box */
    <</script>>
<</link>>

(small note: you will want to include Gallery in the .name property though)

Also, I am not quite sure why you would need a class for the image. You can target it this way:

.gal > a > img {
    /* CSS Code */
}
1 Like

Thanks! I intially tried to use a <<link>> and it didn’t work! Must have been the “Gallery” as you correctly pointed out.