Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    28
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Create a list item dynamically from two different folders JQuery

    0 down vote favorite


    Ok I will explain this the best I can

    what I would like to do

    is create a Jquery function that will create a list from two different folders so it would give me something like this for up to 30 images

    Code:
    <div id="box">
        <ul>
          <li><a href="images/test1.jpg"><img src="imagesthumbs/test1.jpg" alt="" /></a></li>
          <li><a href="images/test2.jpg"><img src="imagesthumbs/test2.jpg" alt="" /></a></li>
          <li><a href="images/test3.jpg"><img src="imagesthumbs/test3.jpg" alt="" /></a></li>
        </ul>
    </div>
    this is what has been suggested so far but it is not executing - just a blank page I know I am missing something obvious


    Code:
    function addItems(num) {
      var myList = $('#box > ul').first();
      for(var i = 1; i <= num; i++) {
        myList.append('<li><a href="images/test' + i + '.jpg"><img src="imagesthumbs/test' + i + '.jpg" alt="" /></a></li>');
      }
    }
    this is how i've implemented it so far
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    
    
    
    $(document).ready(function() {
    
    function addItems(num) {
      var myList = $('#box > ul').first();
      for(var i = 1; i <= num; i++) {
        myList.append('<li><a href="images/test' + i + '.jpg"><img src="imagesthumbs/test' + i + '.jpg" alt="" /></a></li>');
      }
    }
    
     
     
     });
     
    
    
    
    
    
    </script>
    
    
    <body>
    <div id="#box">
    <ul>
    
    
    
    </ul>
    
    
    </div>
    </body>
    </html>
    about to give up

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,636
    Thanks
    6
    Thanked 1,003 Times in 976 Posts
    Well, the function doesn’t execute all by itself, you have to invoke it somehow. But you’ve also got errors in your HTML. Your ID must not contain the hash character (#) and a ul must not be empty. Try this:

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <
    title>Untitled Document</title>
    <
    script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {
        var num = 30; // the number of images; needs to be adjusted accordingly
        $('#box').append($('<ul>'));
      for(var i = 1; i <= num; i++) {
          $('#box ul').append(
              $('<li>').append(
                  $('<a>', {href: 'images/test'+i+'.jpg'}).append(
                      $('<img>', {src: 'imagesthumbs/test'+i+'.jpg'})
                  )
              )
          )
      }
    });
    </script>
    <body>
    <div id="box"></div>
    </body>
    </html> 
    I prefer the DOM kind of way to create elements.

  • Users who have thanked VIPStephan for this post:

    cocosurfer (07-22-2011)

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    28
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I think its the file path that is failing, all I get is bullet points

  • #4
    New Coder
    Join Date
    Aug 2010
    Posts
    28
    Thanks
    2
    Thanked 0 Times in 0 Posts
    ok, changed the path its working better but does not show images with 0 before the number eg test_01


  •  

    Posting Permissions

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