0

I have a list of pictures that need to be displayed. The list of pictures is very large (500+) and I did not want to load each by individually naming them in the html code for the href attribute of the a tag. Hence, I used javascript to generate filenames incremented by 1, which produces the correct filepath. Here is the javascript:

function bigpicture()
    {
        var filepath = "\"images/print/latest/" ;
        var ext = ".png\"";
        var total = filepath + num + ext;
        document.write(total)
        num = num + 1;
    }

When I call bigpicture() I get the correct filepath and name, and all multiple calls it increments as well. My problem is getting this string to display after the href attribute of my a tag, as seen here:

HTML

<div class = "big">
        <ul>    
            <li>
                <a href=<script>bigpicture()</script> rel="lightbox" title=""><img class="floated_img" img src="images/print/latest/small/1.png" /></a>
            </li>

        </ul>
</div>

I assumed (incorrectly) that I could call the function like this, but it does not work. Could anyone tell me how to execute the script in a way that the sting appears after href? Thank you.

nkorai
  • 145
  • 1
  • 11
  • I think you should add the **href** dynamically either using **onCLick** or inside **bigpicture()** function during the filename generation – Manish Kumar May 29 '13 at 07:40

2 Answers2

1

You could place your function within an onclick handler.

The onclick handler will bind the variable this to your a-node.

Maybe you need in combination with lightbox a handler before onclick like onmousedown

How to change href of <a> tag on button click through javascript

Community
  • 1
  • 1
zeitiger
  • 177
  • 2
  • 11
0

The way your doing it won't work because the function call is not bound to any event in your html code like an onload or onsubmit and therefore won't execute.

I would use jQuery to append to your ul in the big div. Your call to bigpicture() could look like this: 

<script>

  function bigpicture()
  {
    var filepath = "./images/print/latest/" ;
    var ext = ".png\"";
    for(var i = 0; i < numOfPictures; i++){
        $('#big ul').append('<li>' + filepath + i + ext + '</li>');
      }

  }

  $(function(){     //this is jQuery shorthand for document ready
      bigpicture(); //anything in this anonymous function will execute
    })              //after HTML document has been loaded

</script>

The document ready info comes from here

Community
  • 1
  • 1
Gruff McGruff
  • 280
  • 2
  • 9
  • That seems way better, how would I implement it in my html though? should I just call the function in the list where my list object would usually be? – nkorai May 29 '13 at 07:56
  • The function, when executed, would populate the `ul` with `li`'s.The function is being called once already in the document.ready anonymous function. The only thing you would need to add to the code above is the true value of `numOfPictures` – Gruff McGruff May 29 '13 at 14:12