add tag
samcarter
*Background story: I dearly miss a former firefox addon that allowed to easily view a sequence of numbered images. For example if I visited the url https://raw.githubusercontent.com/samcarter/shared/master/images/5.png I could use the addon to see the images `1.png`, ..., `7.png` on a single page. Unfortunately the addon is no longer compatible with the current firefox release.*

So long story short, I tried to hack together something as replacement. The following document is probably very badly coded (I neither know html nor javascript), but so far it seems to work as expected. The only annoyance is that when I have an individual image opened in the browser I have to copy its url, then open this document, paste the url (and edit it to remove the number over which I would like to iterate, but that's no big deal).

Now I'm wondering if the copy & paste step could be skipped? I have seen examples of bookmarklets which use the current url, for example

```
javascript: void(location.href = 'http://web.archive.org/web/*/' + escape(location.href));
```

(found at https://www.thetechbasket.com/most-useful-bookmarklets/) 

Can such a bookmarklet be used to replace my document? Or can a bookmarklet open my document and fill in the image url? I am not at all committed to any specific approach and open to ideas if you think a different approach would be better.

```
<!DOCTYPE html>
<html>

    <head>
        <title>Loop Images</title>
    </head>

    <body>

        Start: <input type="text" name="start" id="startid" value="1" />
        Stop: <input type="text" name="stop" id="stopid" value="5" />
        Scale: <input type="text" name="scale" id="scaleid" value="10" />%
        
        <p></p>
        
        Pre: <input type="text" size=100 name="pre" id="preid" value="https://raw.githubusercontent.com/samcarter/shared/master/images/" />
        
        <p></p>
        
        Post:  <input type="text" size=50 name="post" id="postid" value=".png" />
        
        <p></p>
        
        <FORM>
            <INPUT Type="button" VALUE="Submit" onClick="history.go(0)">
        </FORM>
        
        <p id="demo"></p>

        <script type="text/javascript">
            var start = document.getElementById("startid").value;
            var stop = document.getElementById("stopid").value;
            var pre = document.getElementById("preid").value;
            var post = document.getElementById("postid").value;
            var scale = document.getElementById("scaleid").value;
            
            var a;
            for(a=start; a <= stop; a++){
                demo.innerHTML+=( a + ":<img src=\"" + pre + a + post +  "\" style=\"width: " + scale + "vw;\">" );       
            }
        </script>

    </body>
</html>
```

Enter question or answer id or url (and optionally further answer ids/urls from the same question) from

Separate each id/url with a space. No need to list your own answers; they will be imported automatically.