Fork me on GitHub

jQuery jPList plugin is deprecated. Please check pure JavaScript (ES6) jPList Library alternative instead.

List, Grid and Thumbs View Control Usage

List, Grid and Thumbs View Control

Add jPList scripts to the HEAD:

    		
		
<!-- jPList Core -->		
<link href="jplist.core.min.css" rel="stylesheet" type="text/css" />
<script src="jplist.core.min.js"></script>	
<!-- Views Control -->
<link href="jplist.list-grid-view.min.css" rel="stylesheet" type="text/css" />
<script src=jplist.list-grid-view.min.js"></script>	
<script>
$('document').ready(function(){
	
	$('#demo').jplist({				
		itemsBox: '.list' 
		,itemPath: '.list-item' 
		,panelPath: '.jplist-panel'	
	});
	
});
</script>
			
	

Add basic HTML structure to the BODY:

    
<!-- demo -->
<div id="demo">
	
	<!-- panel -->
	<div class="jplist-panel">						
		<!-- views control -->
		<div 
		   class="jplist-views" 
		   data-control-type="views" 
		   data-control-name="views" 
		   data-control-action="views"
		   data-default="jplist-grid-view">
		   
		   <button type="button" class="jplist-view jplist-list-view" data-type="jplist-list-view"></button>
		   <button type="button" class="jplist-view jplist-grid-view" data-type="jplist-grid-view"></button>
		   <button type="button" class="jplist-view jplist-thumbs-view" data-type="jplist-thumbs-view"></button>
		</div>
	</div>				 
	
	<!-- HTML data -->   
	<div class="list">
		
		<!-- item 1 -->
		<div class="list-item">	
			...
		</div>
		
		<!-- item 2 -->
		<div class="list-item">	
			...
		</div>
		
		...
		
	</div>
	
	<!-- no results found -->
	<div class="jplist-no-results">
		<p>No results found</p>
	</div>
					
</div>