Passage links in a loop

Hello again, I have a list of names and a list of links to images, and I would like to use a loop to show them in the screen,

    var imgs = ["img1", "img2", "img3"]
    var names = ["a", "b", "c"]
    for (var i = 0; i < imgs.length; i++) 
        {
        squiffy.set("img",imgs[i])
        squiffy.set("name",names[i])
        squiffy.story.go("pics");
        }

[[pics]]:
<p style="text-align: center;">
<img src="{img}" alt="{name}" width="100" height="100">
[[{name}]]</p>

[[a]]:
\\ first link

[[b]]:
\\ second link

[[c]]:
\\ third link

But only the link that was printed last stays, the other ones aren't clickable. Can I do something about this? Or is there a better way to do this?


Your problem is that you're going to a different section. Any time you use squiffy.story.go, it disables all links.

A simple solution might be to use passages instead, which don't clear links:

    var imgs = ["img1", "img2", "img3"]
    var names = ["a", "b", "c"]
    for (var i = 0; i < imgs.length; i++) 
        {
        squiffy.set("img",imgs[i])
        squiffy.set("name",names[i])
        squiffy.story.passage("pics");
        }

[pics]:
<p style="text-align: center;">
<img src="{img}" alt="{name}" width="100" height="100">
[[{name}]]</p>

Or you could include the text within the javascript, rather than having a section or passage for it:

    var imgs = ["img1", "img2", "img3"]
    var names = ["a", "b", "c"]
    for (var i = 0; i < imgs.length; i++) 
        {
        squiffy.set("img",imgs[i])
        squiffy.set("name",names[i])
        squiffy.ui.write('<p style="text-align: center;"> <img src="{img}" alt="{name}" width="100" height="100"> [[{name}]]')
        }

Although if you're using two arrays in parallel, it's probably more efficient to store them as an object. This makes it harder to make mistakes if you want to add more to the list later:

    var imgs = {a: "img1", b: "img2", c: "img3"}
    $.each(imgs, (name, img) => {
        squiffy.set("img",img)
        squiffy.set("name",name)
        squiffy.ui.write('<p style="text-align: center;"> <img src="{img}" alt="{name}" width="100" height="100"> [[{name}]]')
    });

although in this case, there's really no benefit to using the squiffy attributes. You could just do:

    var imgs = {a: "img1", b: "img2", c: "img3"}
    $.each(imgs, (name, img) => {
        squiffy.ui.write('<p style="text-align: center;"> <img src="' + img + '" alt="' + name + '" width="100" height="100"> [[' + name + ']]')
    });

Or you could put the different parts together into a single attribute:

    var imgs = {a: "img1", b: "img2", c: "img3"}
    squiffy.set("imgs", $.map(imgs, (name, img) => ('<p style="text-align: center;"> <img src="' + img + '" alt="' + name + '" width="100" height="100"> [[' + name + ']]</p>')).join());

{imgs}

This is all off the top of my head, so there may be typos in there. But hopefully some of those will prove useful.

(In general, I might recommend changing for (var i = 0; i < imgs.length; i++) to for (var i in imgs), which does the same thing but is generally faster to type.


(actually, if you're going for maximum efficiency then creating elements on the DOM might turn out faster than creating an HTML string and parsing it. I'm not sure)

    var imgs = {a: "img1", b: "img2", c: "img3"}
    var currentSection = squiffy.ui.output.children('div').last()
    $.each(imgs,
        (name, img) => $('<p>').css('text-align', 'center').append(
            $('<img>', {src: img, alt: name, width: 100, height: 100})
        ).append(
            squiffy.ui.processText('[['+name+']]')
        ).appendTo(currentSection)
    );

I find this easier to read, but that's because I've got more experience with javascript than with HTML


Oh, wow, I tried to use passages but with squiffy.story.go(), I didn't know about squiffy.story.passage(), the first solution works fine for me. If I find it to be too slow once I add more images to the list I'll definitely try the last one, thanks!

I tried the second one, but the it isn't generating a link to the sections. Any ideas about that? Using JS only does look more clean.


Log in to post a reply.

Support

Forums