Loop through local folder & dynamically create elements

Question

I want to make a jquery-ui tabs menu including 54 images on each tab. I have 880 images in a folder, and it will take ages to use an <img> for each of them. Can I cycle through each one and dynamically append them to the tabs? This is what I want one tab to look like.

img {
    width: 35px;
    height: 35px;
}
#tabs {
    width: 420px;
    height: 300px;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
   float: left;
   padding: .1em .175em;
   text-decoration: none;
}

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
      img {
          width: 35px;
          height: 35px;
      }
      #tabs {
          width: 420px;
          height: 300px;
      }
      .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
   float: left;
   padding: .1em .175em;
   text-decoration: none;
      }
  </style>
  <script>
  $( function() {
    $( "#tabs" ).tabs();
  } );
  </script>
</head>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">1</a></li>
    <li><a href="#tabs-2">2</a></li>
    <li><a href="#tabs-3">3</a></li>
    <li><a href="#tabs-4">4</a></li>
    <li><a href="#tabs-5">5</a></li>
    <li><a href="#tabs-6">6</a></li>
    <li><a href="#tabs-7">7</a></li>
    <li><a href="#tabs-8">8</a></li>
    <li><a href="#tabs-9">9</a></li>
    <li><a href="#tabs-10">10</a></li>
    <li><a href="#tabs-11">11</a></li>
    <li><a href="#tabs-12">12</a></li>
    <li><a href="#tabs-13">13</a></li>
    <li><a href="#tabs-14">14</a></li>
    <li><a href="#tabs-15">15</a></li>
    <li><a href="#tabs-16">16</a></li>
    <li><a href="#tabs-17">17</a></li>
  </ul>
  <div id="tabs-1">
    <img src="emojis-master/100.png"/>
    <img src="emojis-master/1234.png"/>
    <img src="emojis-master/8ball.png"/>
    <img src="emojis-master/a.png"/>
    <img src="emojis-master/ab.png"/>
    <img src="emojis-master/abc.png"/>
    <img src="emojis-master/abcd.png"/>
    <img src="emojis-master/accept.png"/>
    <img src="emojis-master/aerial_tramway.png"/>
    <img src="emojis-master/airplane.png"/>
    <img src="emojis-master/alarm_clock.png"/>
    <img src="emojis-master/alien.png"/>
    <img src="emojis-master/ambulance.png"/>
    <img src="emojis-master/anchor.png"/>
    <img src="emojis-master/angel.png"/>
    <img src="emojis-master/anger.png"/>
    <img src="emojis-master/angry.png"/>
    <img src="emojis-master/anguished.png"/>
    <img src="emojis-master/ant.png"/>
    <img src="emojis-master/apple.png"/>
    <img src="emojis-master/aquarius.png"/>
    <img src="emojis-master/aries.png"/>
    <img src="emojis-master/arrow_backward.png"/>
    <img src="emojis-master/arrow_double_down.png"/>
    <img src="emojis-master/arrow_double_up.png"/>
    <img src="emojis-master/arrow_down.png"/>
    <img src="emojis-master/arrow_down_small.png"/>
    <img src="emojis-master/arrow_forward.png"/>
    <img src="emojis-master/arrow_heading_down.png"/>
    <img src="emojis-master/arrow_heading_up.png"/>
    <img src="emojis-master/arrow_left.png"/>
    <img src="emojis-master/arrow_lower_left.png"/>
    <img src="emojis-master/arrow_lower_right.png"/>
    <img src="emojis-master/arrow_right.png"/>
    <img src="emojis-master/arrow_right_hook.png"/>
    <img src="emojis-master/arrow_up.png"/>
    <img src="emojis-master/arrow_up_down.png"/>
    <img src="emojis-master/arrow_up_small.png"/>
    <img src="emojis-master/arrow_upper_left.png"/>
    <img src="emojis-master/arrow_upper_right.png"/>
    <img src="emojis-master/arrows_clockwise.png"/>
    <img src="emojis-master/arrows_counterclockwise.png"/>
    <img src="emojis-master/art.png"/>
    <img src="emojis-master/articulated_lorry.png"/>
    <img src="emojis-master/atm.png"/>
    <img src="emojis-master/b.png"/>
    <img src="emojis-master/baby.png"/>
    <img src="emojis-master/baby_bottle.png"/>
    <img src="emojis-master/baby_chick.png"/>
    <img src="emojis-master/back.png"/>
    <img src="emojis-master/bad.png"/>
    <img src="emojis-master/baggage_claim.png"/>
    <img src="emojis-master/balloon.png"/>
    <img src="emojis-master/ballot_box_with_check.png"/>
  </div>
  <div id="tabs-2">
  </div>
  <div id="tabs-3">
  </div>
  <div id="tabs-4">
  </div>
  <div id="tabs-5">
  </div>
  <div id="tabs-6">
  </div>
  <div id="tabs-7">
  </div>
  <div id="tabs-8">
  </div>
  <div id="tabs-9">
  </div>
  <div id="tabs-10">
  </div>
  <div id="tabs-11">
  </div>
  <div id="tabs-12">
  </div>
  <div id="tabs-13">
  </div>
  <div id="tabs-14">
  </div>
  <div id="tabs-15">
  </div>
  <div id="tabs-16">
  </div>
  <div id="tabs-17">
  </div>
</div>
 
 
</body>
</html>

Thanks in advance. I need to write this otherwise I can't post this question, because I have lots of code in it. Just ignore this part.

client side javascript cannot read a directory. is the directory client side or server side? what server side languages do you have available?? — I wrestled a bear once., Feb 17 '18 at 14:28
ok, java will work. i suggest writing a script on the back end to create a JSON file containing each of the file names, then ajax the JSON file and loop it. — I wrestled a bear once., Feb 17 '18 at 14:32
@MBJH I would recommend you do this server side, just because such a feature breaks as soon as you disable JS. Plus you have to worry about browser support, etc. It's going to be more reliable if you do it server side, then if you can, use a lazy loader for the images, so that they're only loaded when the relevant tab is open. If the user has JS disabled, then it just means that the initial load of the page will take longer. — JO3-W3B-D3V, Feb 17 '18 at 14:33
take a look to [tabs: external content via Ajax](http://jqueryui.com/tabs/#ajax) — gaetanoM, Feb 17 '18 at 14:34
@gaetanoM That's an even better solution than my recommendation. Nice! — JO3-W3B-D3V, Feb 17 '18 at 14:35
Possible duplicate of [Is there a way to return a list of all the image file names from a folder using only Javascript?](https://stackoverflow.com/questions/6994212/is-there-a-way-to-return-a-list-of-all-the-image-file-names-from-a-folder-using) — agrm, Feb 17 '18 at 14:41

Brian Peacock · Accepted Answer · 2018-02-17T16:34:55.463

You'll need a server-side solution if your files are on a server and you want to dynamical populate an HTML file, or if your files are on a regular (not server) device you'll need to run some file operations. Unfortunately, neither option are available from a browser environment.

Server-side you could use the PHP scandir() method or the Node.js fs.readdir() method to dump a list of files to your page as text to, say, insert a list of JavaScript variables or an array of URLs. Or you could use one of these to compile a JSON representation of your files or file structure and AJAX that into your application.

In a non-server environment I would suggest creating a list of your files for use in your application, either with the command line ls function, or often if you highlight all your files, Ctrl+C copy them, and paste that into a text document you get a list file addresses, which can be easily turned into an JavaScript array or a JSON file. Personally I'd look into going down the JSON route.

You might also find these links useful...

;)

Loop through local folder & dynamically create elements

1 Answers1