Image Fading effect

[kows]

if you want to continue using jQuery, you could create a JSON file storing all of the URLs and associated images and then load that file using an AJAX call, and then loop through the URLs and add them all to your <div>. but, you could also just use a server-side language like PHP to load them all, too.

if you go the JSON route, you can make a JavaScript object like so (you could also use a language like PHP to create this object for you based on a database):

{"urls": [
          "http://example.com"
         ,"http://example.net"
         ,"http://example.org"
         ]
,"imgs": [
          "url1.jpg"
         ,"url2.jpg"
         ,"url3.jpg"
         ]
}

that object should be placed in its own file, like urls.json.

we can then use jQuery later to clone a template of the mark-up you want to use. so, we create all of the tags like normal, and fill in the necessary attributes to have valid XHTML:

<div id="rotate">
  <span><a href="#"><img src="#" alt="" /></a></span>
</div>

then, you can use the getJSON() method to request your JSON file, and loop through the urls and imgs arrays. then, you remove the empty template at the end:

$(document).ready(function(){

  // Get the JSON file using AJAX.
  $.getJSON('urls.json', function(data){

    // If either of these are undefined, something went wrong.
    if(data.urls !== undefined && data.imgs !== undefined){
      
      // data now holds an array of URLs and images
      for(var i = 0; i < data.urls.length; i++){
        
        // Clone the template
        var temp = $('#rotate span:first').clone();
        
        // Replace anchor's HREF attribute
        temp.find('a').attr('href', data.urls[i]);
        
        // Replace image's SRC attribute
        temp.find('img').attr('src', data.imgs[i]);
        
        // Add to rotate container
        temp.appendTo('#rotate');
        
      }
      
      // Remove the template
      $('#rotate span:first').remove();
      
    }else{
      alert('some error');
    }
  });
});