ashumeow/example.js

## example.js
/**
 *	file: images.json
 */
{
  "images": [
    {"title": "Image One", "url": "image1.jpg", "rating": "3.5"},
    {"title": "Image Two", "url": "image2.jpg", "rating": "1"},
    {"title": "Image Three", "url": "image3.jpg", "rating": "5"}
  ]
}


/**
 *	file: application.js
 */

function loadImages (url, container){
  // get the JSON object
  $.getJSON(url, function(data){
   if(typeof data === 'object'){
     // create the HTML markup for the slider from data
      $.each(data['images'], function(key, image){
        var slide = '<li><img src="'+image['url']+'" alt="'+image['title']+'"></li>';
        $(container).append(slide);
      });
     // initialize anythingSlider
      $(container).anythingSlider();
    }
  });
};

$(function(){
  loadImages('images.json', '#slider1');
});


/**
 *	file: index.html
 */
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
  <script src="http://proloser.github.com/AnythingSlider/js/jquery.anythingslider.js"></script>
  <script src="application.js"></script>
</head>
<body>
  <ul id="slider1"></ul>
</body>
</html>
	/**
	* file: images.json
	*/
	{
	"images": [
	{"title": "Image One", "url": "image1.jpg", "rating": "3.5"},
	{"title": "Image Two", "url": "image2.jpg", "rating": "1"},
	{"title": "Image Three", "url": "image3.jpg", "rating": "5"}
	]
	}





	/**
	* file: application.js
	*/

	function loadImages (url, container){
	// get the JSON object
	$.getJSON(url, function(data){
	if(typeof data === 'object'){
	// create the HTML markup for the slider from data
	$.each(data['images'], function(key, image){
	var slide = '<li><img src="'+image['url']+'" alt="'+image['title']+'"></li>';
	$(container).append(slide);
	});
	// initialize anythingSlider
	$(container).anythingSlider();
	}
	});
	};

	$(function(){
	loadImages('images.json', '#slider1');
	});




	/**
	* file: index.html
	*/
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<script src="http://proloser.github.com/AnythingSlider/js/jquery.anythingslider.js"></script>
	<script src="application.js"></script>
	</head>
	<body>
	<ul id="slider1"></ul>
	</body>
	</html>