CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Apothem
Apothem

Reputation: 7

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>           
            <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.

Upvotes: 0

Views: 306

Answers (4)

quasistoic
quasistoic

Reputation: 4687

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.

Upvotes: 0

John Green
John Green

Reputation: 13435

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.

Upvotes: 0

zsalzbank
zsalzbank

Reputation: 9857

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.

Upvotes: 0

Jeremy
Jeremy

Reputation: 22415

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.

Upvotes: 1

Related Questions