Add Range of Items Using API

<!-- Version 1: selecting items using jQuery -->
<script>
$('document').ready(function(){
	var $demo = $('#demo');
	
	//init jplist first time
	$demo.jplist({				
		itemsBox: '.list' 
		,itemPath: '.list-item' 
		,panelPath: '.jplist-panel'	
	});
	
	//add items to jplist collection
   $demo.jplist({
		command: 'add'
		,commandData: {
			$items: $('.your-item-path'),  //select your items using jQuery
          index: 0 //if index is omitted -> the items are added to the end of the list
		}
	});
	
});
</script>
                
<!-- Version 2: items are JS array -->
<script>
$('document').ready(function(){
	var $demo = $('#demo')
		,items = [];
		
	//add first item
	items.push($('<div class="list-item box">\
		<div class="img left">\
			<img title="" alt="" src="../assets/img/thumbs/arch-1.jpg">\
		</div>\
		<div class="block right">\
			<p class="date">03/15/2012</p>\
			<p class="title">Arch 1</p>\
			<p class="desc">Test description 1</p>\
			<p class="like">6 Likes</p>\
			<p class="theme">\
				<span class="architecture">Architecture</span>\
			</p>\
		</div>\
	</div>'));
    //add second item
	items.push($('<div class="list-item box">\
		<div class="img left">\
			<img title="" alt="" src="../assets/img/thumbs/arch-1.jpg">\
		</div>\
		<div class="block right">\
			<p class="date">03/15/2012</p>\
			<p class="title">Arch 2</p>\
			<p class="desc">Test description 2</p>\
			<p class="like">6 Likes</p>\
			<p class="theme">\
				<span class="architecture">Architecture</span>\
			</p>\
		</div>\
	</div>'));
   //add third item
	items.push($('<div class="list-item box">\
		<div class="img left">\
			<img title="" alt="" src="../assets/img/thumbs/arch-1.jpg">\
		</div>\
		<div class="block right">\
			<p class="date">03/15/2012</p>\
			<p class="title">Arch 3</p>\
			<p class="desc">Test description 3</p>\
			<p class="like">6 Likes</p>\
			<p class="theme">\
				<span class="architecture">Architecture</span>\
			</p>\
		</div>\
	</div>'));
	
	//init jplist first time
	$demo.jplist({				
		itemsBox: '.list' 
		,itemPath: '.list-item' 
		,panelPath: '.jplist-panel'	
	});
	
	//add items to jplist collection
	$demo.jplist({
		command: 'add'
		,commandData: {
			$items: items,
          index: 0 //if index is omitted -> the items are added to the end of the list
		}
	});
	
});
</script>