Fotorama

ground/controllers/IndexController.php

@@ -25,6 +25,7 @@ class IndexController extends Controller
 		self::addScript('/js/leaflet-routing-machine.js');
 		self::addScript('/js/route.js?ver='.App::getConfig('version'));
 		self::addScript('/js/leaflet.markercluster.js');
+		self::addScript('/js/fotorama.js');
 
 		self::addStyle('/css/style.css?ver='.App::getConfig('version'));
         self::addStyle('http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css');
@@ -33,6 +34,7 @@ class IndexController extends Controller
 		self::addStyle('/css/leaflet-routing-machine.css');
 		self::addStyle('/css/MarkerCluster.css');
 		self::addStyle('/css/MarkerCluster.Default.css');
+		self::addStyle('/css/fotorama.css');
 
 		if (!App::$user )
 			self::addScript('//ulogin.ru/js/ulogin.js');

ground/controllers/JsonController.php

@@ -42,6 +42,7 @@ class JsonController extends Controller
 			$point->descriptionHtml = nl2br($point->description);
 			$point->name = htmlspecialchars($point->name);
 			$imgs = $point->photos;
+			$photosCount = 1;
 
 			if ($point->img == '' && !empty($imgs))
 			{
@@ -53,6 +54,7 @@ class JsonController extends Controller
 			if (!empty($imgs))
 			{
 				$tmp = array();
+				$photosCount = count($imgs);
 				foreach ($imgs as $img)
 				{
 					$tmp[] = $img->name;
@@ -64,6 +66,7 @@ class JsonController extends Controller
 
 			$point->categoryIcon = $categories[$point->categoryId]['icon'];
             $point->categoryName = $categories[$point->categoryId]['name'];
+			$point->photosCount = $photosCount;
 
 			self::renderPartial('json.php', $point->getValues());
 		} else

ground/views/modals/image.php

@@ -7,6 +7,7 @@
 			</div>
 			<div class="modal-body" style="text-align: center;">
 				<img src="" id="imageModalImg" style="max-width: 555px; max-height: 450px;" />
+				<div class="fotorama" data-loop="true" data-auto="false" maxwidth="555" maxheight="450" ></div>
 			</div>
 			<div class="modal-footer">
 				<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>

public/css/style.css

@@ -14,6 +14,7 @@ div.clear {clear: both;}
 div.infoCard {text-align: justify;}
 div.infoCard h3 {text-align: center; margin-top: 0;}
 div.infoCard img {width: 200px; float: left; margin: 0 10px 5px 0; cursor: pointer;}
+div.infoCard .photosCount {position: absolute;margin: 3px;color: white;background-color: black;border-radius: 3px;padding: 2px 4px;opacity: 0.5;}
 div.header {display: block; position: absolute; top: 0; left: 110px; border-radius: 0 0 5px 5px; z-index: 1000; background-color: #FFF; padding: 5px 10px;}
 div.header h1 {display: inline; color: #333; cursor: default;}
 div.header a:hover {text-decoration: none;}

public/js/app.js

@@ -74,9 +74,28 @@ function closeBox()
 	return true;
 }
 
-function showImage(src, name)
+function showImage(id)
 {
-	$('#imageModalLabel').text(name);
-	$('#imageModalImg').attr('src', src);
+	point = pointsSources[id];
+	$('#imageModalLabel').text(point.name);
+
+	if (typeof(point.images) == 'object')
+	{
+		$('#imageModalImg').hide();
+		$('.fotorama').show();
+
+		photos = [];
+		point.images.forEach(function(entry) {
+			photos.push({img: '/photos/middle/'+entry, thumb: '/photos/small/'+entry});
+		});
+
+		$('.fotorama').fotorama({data: photos});
+	} else
+	{
+		$('#imageModalImg').show();
+		$('.fotorama').hide();
+		$('#imageModalImg').attr('src', point.img);
+	}
+
 	$('#imageModal').modal('show');
 }

public/js/map.js

@@ -170,9 +170,14 @@ function showInfo(id)
 			success: function(data) {
 				pointsSources[id] = data;
 				if (typeof(data.images) == 'object')
-					ph = '<img src="/photos/small/' + data.img + '" onclick="showImage(\'/photos/middle/'+ data.img +'\',\''+ data.name +'\')" />';
+				{
+					ph = '<div class="photosCount"><span class="glyphicon glyphicon-camera"></span> <b>+' + (data.photosCount-1) + '</b></div>';
+					ph += '<img src="/photos/small/' + data.img + '" onclick="showImage(\''+ id +'\')" />';
+				}
 				else
-					ph = '<img src="' + data.img + '" onclick="showImage(\''+ data.img +'\',\''+ data.name +'\')" />';
+				{
+					ph = '<img src="' + data.img + '" onclick="showImage(\''+ id +'\')" />';
+				}
 
 				description = '<div class="infoCard">' +
 						'<h3>' + data.name + '</h3>' +