SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Threaded View

  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    0 Post(s)
    0 Thread(s)

    Javascript loop - document.write

    Hi all

    I have a group of lists of thumbnail images like below

    Code HTML4Strict:
              <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>

    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>');

    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


Posting Permissions

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