generating anchor and image tags for fancybox image gallery

问题

I have a simple html page and I want to make a very simple gallery to it with fancybox. Here is the code for one image:

<a class="gallery" href="img/83.jpg"><img src="img/83k.jpg" alt="" /></a>

Problem is, I have 400 of them and I have to make it sequential, like:

<a class="gallery" href="img/84.jpg"><img src="img/84k.jpg" alt="" /></a>
<a class="gallery" href="img/85.jpg"><img src="img/85k.jpg" alt="" /></a>
etc...

Hand coding it would be such a pain. How can I generate all of it?

Thanks!

回答1:

Create a container where you want to generate your galleries like:

<div id="galleries"></div>

then use this code:

$(document).ready(function(){
 var i = 83; // select your initial number
 for (i=83; i<=483; i++){ // loop as many images as you need
  $("div#galleries").append('<a href="img/' + i + '.jpg" class="fancybox" rel="gallery"><img src="img/' + i + 'k.jpg" alt="" /></a>');
 } // for
// and set your fancybox script afterwards
 $('.fancybox').fancybox({
  // fancybox options
 }); // fancybox
}); //ready

来源：https://stackoverflow.com/questions/10084345/generating-anchor-and-image-tags-for-fancybox-image-gallery