add justified-gallery to fbrowser

view/theme/frio/js/filebrowser.js

@@ -217,10 +217,12 @@ var FileBrowser = {
 	},
 
 	postLoad: function() {
+		FileBrowser.initGallery();
 		$(".fbrowser .fbswitcher .btn").removeClass("active");
 		$(".fbrowser .fbswitcher [data-mode=" + FileBrowser.type + "]").addClass("active");
 		// We need to add the AjaxUpload to the button
 		FileBrowser.uploadButtons();
+		
 	},
 
 	loadContent: function(url) {
@@ -235,5 +237,13 @@ var FileBrowser = {
 				FileBrowser.postLoad();
 			}
 		});
+	},
+
+	initGallery: function() {
+		$(".fbrowser.image .fbrowser-content-container").justifiedGallery({
+			'rowHeight': 80,
+			'margins': 3,
+			'border': 0
+		});
 	}
 };

view/theme/frio/templates/filebrowser.tpl

@@ -34,16 +34,18 @@
 			{{/if}}
 
 			<div class="list {{$type}} media-body">
+				<div class="fbrowser-content-container">
 					{{foreach $files as $f}}
 					<div class="photo-album-image-wrapper">
 						<a href="#" class="photo-album-photo-link" data-link="{{$f.0}}" data-filename="{{$f.1}}" data-img="{{$f.2}}">
-						<img src="{{$f.2}}">
+							<img src="{{$f.2}}" alt="{{$f.1}}">
 							<p>{{$f.1}}</p>
 						</a>
 					</div>
 					{{/foreach}}
 				</div>
 			</div>
+		</div>
 
 		<div class="upload">
 			<button id="upload-{{$type}}"><img id="profile-rotator" src="images/rotator.gif" alt="{{$wait}}" title="{{$wait|escape:'html'}}" style="display: none;" /> {{"Upload"|t}}</button>