Modified apps/filemanager/views/gallery/embedded.html to add previews/next buttons

embedded.html

<link rel="stylesheet" type="text/css" href="/apps/filemanager/css/gallery_embedded.css" />
<script>
var gallery_desc = '{{ desc }}';
$(function () {
	// load the first image
	$('#gallery-view').attr ('src', $('.gallery').first ().attr ('href'));
	if (gallery_desc === 'yes') {
		$('#gallery-desc').html ($('.gallery').first ().data ('desc'));
	} else {
		$('#gallery-desc').hide ();
	}

	$.gallery_view = function (a) {
		$('#gallery-view').attr ('src', $(a).attr ('href'));
		if (gallery_desc === 'yes') {
			$('#gallery-desc').html ($(a).data ('desc'));
		}
		return false;
	}

	$('#gallery-previous').click (function (e) {
		e.preventDefault ();

		var view = $('#gallery-view'),
			cur = view.attr ('src'),
			all = $('.gallery'),
			total = all.length,
			num = 0;

		for (var i = 0; i < all.length; i++) {
			if ($(all[i]).attr ('href') === cur) {
				num = i - 1;
				break;
			}
		}
		
		if (num < 0) {
			num = total - 1;
		}
		
		view.attr ('src', $(all[num]).attr ('href'));
	});

	$('#gallery-next').click (function (e) {
		e.preventDefault ();

		var view = $('#gallery-view'),
			cur = view.attr ('src'),
			all = $('.gallery'),
			total = all.length,
			num = 0;

		for (var i = 0; i < all.length; i++) {
			if ($(all[i]).attr ('href') === cur) {
				num = i + 1;
				break;
			}
		}
		
		if (num > total - 1) {
			num = 0;
		}
		
		view.attr ('src', $(all[num]).attr ('href'));
	});
});
</script>

<div id="gallery-full">
	<img src="" id="gallery-view" />
	<div id="gallery-desc"></div>
</div>

<div id="gallery-list">
{% foreach files %}
<div><a href="/{{ loop_value->path }}" rel="gallery-{{ gallery }}" class="gallery" data-desc="{{ loop_value->desc }}" onclick="return $.gallery_view (this)"><img src="/{{ loop_value->path|filemanager_get_thumbnail }}" alt="" /></a>
	{% if User::require_admin () && $data->desc == 'yes' %}
	<a href="#" onclick="return $.filemanager ('prop', {file: '{{loop_value->path|FileManager::strip_webroot}}'})">{"Edit Caption"}</a>
	{% end %}
</div>
{% end %}
</div>

<div style="clear: both"></div>

<p>
	<a href="#" id="gallery-previous">Previous</a>
	|
	<a href="#" id="gallery-next">Next</a>
</p>