Install

Install

jQuery and jQuery UI

jQuery 1.6.1 or higher is required. If you use custom jQuery UI build than make sure selectable, draggable, droppable, resizable, dialog and slider are included.

The most updated libraries compatible with all functionalities (cropping and rotating images) are jQuery UI v1.8.21 and v1.7.2.

<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" ></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>

elFinder

Include elFinder CSS and JS files.

<link rel="stylesheet" type="text/css" media="screen" href="css/elfinder.min.css">
<script type="text/javascript" src="js/elfinder.min.js"></script>

<!-- Mac OS X Finder style for jQuery UI smoothness theme (OPTIONAL) -->
<link rel="stylesheet" type="text/css" media="screen" href="css/theme.css">

Translation

Include optional translation if needed. List of available translations.

<script type="text/javascript" src="js/i18n/elfinder.ru.js"></script>

Initialize file manager

Create elFinder on you page.

<script type="text/javascript" charset="utf-8">
	$().ready(function() {
		var elf = $('#elfinder').elfinder({
			// lang: 'ru',             // language (OPTIONAL)
			url : 'php/connector.php'  // connector URL (REQUIRED)
		}).elfinder('instance');			
	});
</script>

<!-- Element where elFinder will be created (REQUIRED) -->
<div id="elfinder"></div>

More client configuration options available.

See the full html example.