How can I scale this HTML using Javascript and JQuery

I have a website I am working on but there is a photo gallery I am currently working on with some issues.

The problem is that there are about 30 pictures and I don't want to have 30 blocks of code inputting an image. I want to scale it so when I have albums of about 100 pictures each, I can let it go.

I want to do this using Javascript, with a JQuery plugin. How can I do this?

Here is the code:

<div id="main">
            <h1>Suicide Run 2008</h1>
            <div class="panel">
                <ul id="images">
                    <li><a href="images/gallery/2008suiciderun/srun1.jpg"><img src="images/gallery/2008suiciderun/thumbs/srun_t1.jpg" title="" /></a></li>
                </ul>
                <div id="controls"></div>
                <div class="clear"></div>
            </div>
            <div id="exposure"></div>           
     开发者_如何学Go       <div class="clear"></div>
            <div id="slideshow"></div>      
</div>

Is there a way I can write some Javascript to have it generate a block of code (from the beginning UL tag to the end UL tag) to fill it in per picture in my folder?

In other words, if I were to do this in Java, I can do it this way:

for(int i = 0; i < amountOfPictures; i++)
{
System.out.println("<a href="images/gallery/2008suiciderun/srun"+i+".jpg">");
} etc...

But how do I do it in Javascript?

Much appreciated! I'm sure my explanation sucks.

---

On the server-side you need to gather all the URLs for the images. Then I would just use whatever template engine to loop over those URLs. However, if you must do it with jQuery, then you can try out jQuery's template plugin.

---

There are more elegant ways to do this in javascript, but this is the equivalent code.

<div id="main">
  <h1>Suicide Run 2008</h1>
  <div class="panel">
      <ul id="images">
        <script type="text/javascript">
        var numPictures = 100; // You'll need to set this yourself.
        for (var i=0, l=numPictures; i < l; i++) {
          document.write('<li><a href="images/gallery/2008suiciderun/srun' + i + '.jpg"><img src="images/gallery/2008suiciderun/thumbs/srun_t' + i + '.jpg" title="" /></a></li>');
        }
        </script>
      </ul>
      <div id="controls"></div>
      <div class="clear"></div>
  </div>
  <div id="exposure"></div>           
  <div class="clear"></div>
  <div id="slideshow"></div>      
</div>

A slightly cleaner version using jQuery, as originally requested:

<script type="text/javascript">
window.onload = function() {
  var numPictures = 100; // You'll need to set this yourself.
  var pathPrefix = 'images/gallery/2008suiciderun/srun';
  var thumbPrefix = 'images/gallery/2008suiciderun/thumbs/srun_t';
  var container = $('#images');
  for (var i=0, l=numPictures; i < l; i++) {
    var li = $('<li>');
    var img = $('<img>').attr('src', thumbPrefix + i + '.jpg');
    var link = $('<a>').attr('href', pathPrefix + i + '.jpg');
    link.append(img);
    li.append(link);
    container.append(li);
  }
}
</script>

<div id="main">
  <h1>Suicide Run 2008</h1>
  <div class="panel">
      <ul id="images">
      </ul>
      <div id="controls"></div>
      <div class="clear"></div>
  </div>
  <div id="exposure"></div>           
  <div class="clear"></div>
  <div id="slideshow"></div>      
</div>

Of course, as several others have indicated, if server-side scripting is available to you, you don't have to rely on filename conventions or knowing exactly how many images there are, as you'd have direct access to the filesystem.

---

You can do something like this too:

$('<div id="main"></div>')
    .append($('<h1></h1>').text(titleVariable))  
    .append($('<div class="panel"></div>'))  
    .appendTo('body');

That's not the whole thing but it would work. I would suggest generating code server-side for the initial load, and then if you load more via ajax or something, you can do this.

It might be faster to generate all the HTML server-side though.

---

In reality, javascript is an improper solution for this.

You already need to know how many images go into each folder at the server-level, which means some sort of server-executable code (PHP, Java, .Net, whatever).

You should just write the page dynamically (like this PHP example):

...
<ul id="images">
  <?php 
   $files = glob($folderspec.'*.php');
   for ($ii=0; $ii = count($files); $ii++)
   {
     echo '<li><a href="images/gallery/'.$folderspec.'/srun'.$ii.'.jpg" ...[ etc ]
   }
 ?>
</ul>
...

This is better for the client, for automated crawlers (google) and just about everything else. Although it can be done as Javascript using many of the solutions above, it generally shouldn't be done that way.