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.

<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 your 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.

Tips

Auto Language Loader

<script type="text/javascript" charset="utf-8">
(function($){
	var i18nPath = 'js/i18n',
		start = function(lng) {
			$().ready(function() {
				var elf = $('#elfinder').elfinder({
					// Documentation for client options:
					// https://github.com/Studio-42/elFinder/wiki/Client-configuration-options
					lang : lng,
					url	 : 'php/connector.php'	// connector URL (REQUIRED)
				}).elfinder('instance');
			});
		},
		loct = window.location.search,
		full_lng, locm, lng;
	
	// detect language
	if (loct && (locm = loct.match(/lang=([a-zA-Z_-]+)/))) {
		full_lng = locm[1];
	} else {
		full_lng = (navigator.browserLanguage || navigator.language || navigator.userLanguage);
	}
	lng = full_lng.substr(0,2);
	if (lng == 'ja') lng = 'jp';
	else if (lng == 'pt') lng = 'pt_BR';
	else if (lng == 'zh') lng = (full_lng.substr(0,5) == 'zh-tw')? 'zh_TW' : 'zh_CN';

	if (lng != 'en') {
		$.ajax({
			url : i18nPath+'/elfinder.'+lng+'.js',
			cache : true,
			dataType : 'script'
		})
		.done(function() {
			start(lng);
		})
		.fail(function() {
			start('en');
		});
	} else {
		start(lng);
	}
})(jQuery);
</script>

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