title: How to load images dynamically from server and display them
body: <p>i have images stored on my server i.e. i have a directory on my server such as :
  $uploadsDirectory = $_SERVER['DOCUMENT_ROOT'] . $directory_self . 'uploaded_files/';</p>
  
  <p>i need to load each of the image from the directory and display in on the following html :</p>
  
  <pre><code>&lt;div class="image-set"&gt;
                  &lt;a class="example-image-link" href="images/demopage/1.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."&gt;&lt;img class="example-image" src="images/demopage/1.jpg" alt=""/&gt;&lt;/a&gt;
                  &lt;a class="example-image-link" href="images/demopage/2.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."&gt;&lt;img class="example-image" src="images/demopage/2.jpg" alt="" /&gt;&lt;/a&gt;
                  &lt;a class="example-image-link" href="images/demopage/3.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."&gt;&lt;img class="example-image" src="images/demopage/3.jpg" alt="" /&gt;&lt;/a&gt;
                  &lt;a class="example-image-link" href="images/demopage/4.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."&gt;&lt;img class="example-image" src="images/demopage/4.jpg" alt="" /&gt;&lt;/a&gt;
                  &lt;a class="example-image-link" href="images/demopage/5.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."&gt;&lt;img class="example-image" src="images/demopage/5.jpg" alt=""/&gt;&lt;/a&gt;
                  &lt;a class="example-image-link" href="images/demopage/6.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."&gt;&lt;img class="example-image" src="images/demopage/6.jpg" alt="" /&gt;&lt;/a&gt;
                  &lt;a class="example-image-link" href="images/demopage/7.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."&gt;&lt;img class="example-image" src="images/demopage/7.jpg" alt="" /&gt;&lt;/a&gt;
                  &lt;a class="example-image-link" href="images/demopage/8.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."&gt;&lt;img class="example-image" src="images/demopage/8.jpg" alt="" /&gt;&lt;/a&gt;
                  &lt;a class="example-image-link" href="images/demopage/9.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."&gt;&lt;img class="example-image" src="images/demopage/9.jpg" alt=""/&gt;&lt;/a&gt;
                  &lt;a class="example-image-link" href="images/demopage/10.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."&gt;&lt;img class="example-image" src="images/demopage/10.jpg" alt="" /&gt;&lt;/a&gt;
                  &lt;a class="example-image-link" href="images/demopage/11.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."&gt;&lt;img class="example-image" src="images/demopage/11.jpg" alt="" /&gt;&lt;/a&gt;
                  &lt;a class="example-image-link" href="images/demopage/12.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."&gt;&lt;img class="example-image" src="images/demopage/12.jpg" alt="" /&gt;&lt;/a&gt;
                  &lt;a class="example-image-link" href="images/demopage/13.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."&gt;&lt;img class="example-image" src="images/demopage/13.jpg" alt="" /&gt;&lt;/a&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>the img tags can be dynamically increased , can anyone help me out in this ?</p>