SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript loop - document.write

    Hi all

    I have a group of lists of thumbnail images like below

    Code HTML4Strict:
            <ul>
              <li><a href="images/flora/01.jpg" rel="lightbox"><img src="images/flora/01_th.jpg" alt="" /></a></li>
              <li><a href="images/flora/02.jpg" rel="lightbox"><img src="images/flora/02_th.jpg" alt="" /></a></li>
              <li><a href="images/flora/03.jpg" rel="lightbox"><img src="images/flora/03_th.jpg" alt="" /></a></li>
              <li><a href="images/flora/04.jpg" rel="lightbox"><img src="images/flora/04_th.jpg" alt="" /></a></li>
              <li><a href="images/flora/05.jpg" rel="lightbox"><img src="images/flora/05_th.jpg" alt="" /></a></li>
              <li><a href="images/flora/06.jpg" rel="lightbox"><img src="images/flora/06_th.jpg" alt="" /></a></li>
              <li><a href="images/flora/07.jpg" rel="lightbox"><img src="images/flora/07_th.jpg" alt="" /></a></li>
              <li><a href="images/flora/08.jpg" rel="lightbox"><img src="images/flora/08_th.jpg" alt="" /></a></li>
              <li><a href="images/flora/09.jpg" rel="lightbox"><img src="images/flora/09_th.jpg" alt="" /></a></li>
              <li><a href="images/flora/10.jpg" rel="lightbox"><img src="images/flora/10_th.jpg" alt="" /></a></li>
              <li><a href="images/flora/11.jpg" rel="lightbox"><img src="images/flora/11_th.jpg" alt="" /></a></li>
              <li><a href="images/flora/12.jpg" rel="lightbox"><img src="images/flora/12_th.jpg" alt="" /></a></li>
              <li><a href="images/flora/13.jpg" rel="lightbox"><img src="images/flora/13_th.jpg" alt="" /></a></li>
              <li><a href="images/flora/14.jpg" rel="lightbox"><img src="images/flora/14_th.jpg" alt="" /></a></li>
              <li><a href="images/flora/15.jpg" rel="lightbox"><img src="images/flora/15_th.jpg" alt="" /></a></li>
              <li><a href="images/flora/16.jpg" rel="lightbox"><img src="images/flora/16_th.jpg" alt="" /></a></li>
              <li><a href="images/flora/17.jpg" rel="lightbox"><img src="images/flora/17_th.jpg" alt="" /></a></li>
              <li><a href="images/flora/18.jpg" rel="lightbox"><img src="images/flora/18_th.jpg" alt="" /></a></li>
              <li><a href="images/flora/19.jpg" rel="lightbox"><img src="images/flora/19_th.jpg" alt="" /></a></li>
              <li><a href="images/flora/20.jpg" rel="lightbox"><img src="images/flora/20_th.jpg" alt="" /></a></li>
              <li><a href="images/flora/21.jpg" rel="lightbox"><img src="images/flora/21_th.jpg" alt="" /></a></li>
              <li><a href="images/flora/22.jpg" rel="lightbox"><img src="images/flora/22_th.jpg" alt="" /></a></li>
              <li><a href="images/flora/23.jpg" rel="lightbox"><img src="images/flora/23_th.jpg" alt="" /></a></li>
              <li><a href="images/flora/24.jpg" rel="lightbox"><img src="images/flora/24_th.jpg" alt="" /></a></li>
              <li><a href="images/flora/25.jpg" rel="lightbox"><img src="images/flora/25_th.jpg" alt="" /></a></li>
            </ul>

    I have a few list like this where the images are numbered sequentially and in named folders.

    I thought it would be quicker to write a javascript loop and use the loop number to change the image number like below

    Code JavaScript:
              <script type="text/javascript">
                var i=1;
                for (i=1;i<=22;i++){
                document.write('<li><a href="images/beach/01.jpg" rel="lightbox"><img src="images/beach/0"'+i+'"_th.jpg" alt="" /></a></li>');
                }
              </script>

    This code isn't working but it is producing empty img holders. I'm thinking I am escaping the quotes wrong.

    What am I doing wrong?
    I'm I escaping the quotes wrong?
    Is this a good way to do this?
    Last edited by Mittineague; Dec 9, 2010 at 04:46. Reason: reformatting bbcode tags

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Try this

    Code JavaScript:
    window.onload = function(){
        var e = document.getElementsByTagName('ul')[0];
     
        for(var i=1; i<=22; i++){
            var li = document.createElement('li'), href = document.createElement('a'), img = document.createElement('img');
            var id = (i.length == 1) ? '0'+i : i;
     
            // Set some values
            href.setAttribute('href', 'images/beach/'+id+'.jpg');
            href.setAttribute('rel', 'lightbox');
            img.setAttribute('src', 'images/beach/'+id+'_th.jpg');
     
            href.appendChild(img);
            li.appendChild(href);
            e.appendChild(li);
        }
    };

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the code SgtLegend

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    No problem

  5. #5
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    When you intend a write to page of a block it is usually better to write the whole block at once., rather than line by line. Also, your own script will work if you pre-process the new image string and then drop the whole string into the build line, rather than the components.
    Here is a script that does it for you. You will note that I have added the width and height of the <img > so that you have well formed HTML. In practice you might need to store the relevant widths and heights for each image in an array and then use them for the images in the build string.

    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Write to Page</title>
    </head>

    <body>

    <script type="text/javascript">
    <!--
    var i=1, newImg;
    // commence build of unordered list
    var build='<ul>\n';
    // build all <li> tags
    for (i=1;i<5;i++)
    {// pre-process string
    newImg="0"+i+"_th.jpg";
    build+='<li><a href="images/beach/01.jpg" rel="lightbox">';
    // use string in build
    build+='<img src="images/beach/'+newImg+'" width="100" height="50"><\/a><\/li>\n';
    }
    // finish unordered list
    build+='<\/ul>\n';
    // write to page
    document.write(build);
    //-->
    </script>

    </body>

    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •