Новый вариант отображения фоторамы - чуть лучше для мобильных девайсов

ground/views/modals/image.php

@@ -6,8 +6,7 @@
 				<h4 class="modal-title" id="imageModalLabel"></h4>
 			</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"></div>
-				<div class="fotorama" data-loop="true" data-auto="false" data-width="555" data-height="450"></div>
 			</div>
 		</div>
 	</div>

ground/views/point.php

@@ -32,7 +32,7 @@
 				<?php if ($photos || $point->img): ?>
 					<br/><br/>
 					<div style="text-align: center;">
-					<div class="fotorama" data-width="555" data-height="450" data-loop="true" data-nav="thumbs" data-thumbwidth="100">
+					<div class="dfotorama"  data-loop="true" data-nav="thumbs" data-thumbwidth="100">
 						<?php if ($point->img): ?>
 							<img data-thumb="<?= $point->img ?>" src="<?= $point->img ?>">
 						<?php endif; ?>

public/css/style.css

@@ -103,7 +103,6 @@ div#box {background-image: url('/img/back.png'); background-repeat: no-repeat; b
     .modal-content {
         width: 100%!important;
         height: 100%!important;
-        /*margin: 0!important;*/
     }
     
     .modal-header {
@@ -126,12 +125,17 @@ div#box {background-image: url('/img/back.png'); background-repeat: no-repeat; b
     }
 }
 
-/* Target landscape smartphones, portrait tablets, narrow desktops */
+@media screen and (max-width:815px) {
-@media screen and (max-width:768px) {
+    body {
-/*    .leaflet-popup {
+        padding: 0!important;
-        width: 100%!important;
+    }
-        height: 100%!important;
-        margin: 0!important;
-    }*/
-}
 
+    div.container{
+        padding: 5px;
+    }
+
+    div.header a img {
+        width: 115px;
+        height: 69px;
+    }
+}

public/js/app.js

@@ -1,4 +1,4 @@
-/* 
+/*
  * Приложение
  */
 
@@ -99,14 +99,12 @@ function showImage(id)
 			}
 		});
 
-		$('.fotorama').fotorama({data: photos});
+		initFotorama('.fotorama', photos);
-	} else
+	} else {
-	{
+		$('#imageModalImg').attr('src', point.img);
 		$('#imageModalImg').show();
 		$('.fotorama').hide();
-		$('#imageModalImg').attr('src', point.img);
 	}
-
 	$('#imageModal').modal('show');
 }
 
@@ -157,7 +155,7 @@ window.addEventListener('popstate', function(e)
 			lat = e.state.lat;
 			lng = e.state.lng;
 			zoom = e.state.zoom;
-			
+
 			myMap.setView([lat, lng], zoom);
 		} else
 		if (e.state.hasOwnProperty('route'))
@@ -441,3 +439,39 @@ function filter()
 	}
 }
 
+$(document).ready(function(){
+	if ($('.dfotorama').length >= 1) {
+		initFotorama('.dfotorama');
+
+		$(window).on("orientationchange", function (event) {
+			$('.dfotorama').data('fotorama').destroy();
+			initFotorama('.dfotorama');
+		});
+	}
+});
+
+function initFotorama(selector, data){
+	width = $(window).width() < 585 ? $(window).width()-10 : 555;
+	height = $(window).width() < 585 ? ((450/555)*($(window).width()-10)) : 450;
+
+	if($(window).height() < height ) {
+		height = $(window).height();
+		width = (555/450)*height;
+	}
+
+	width = Math.round(width);
+	height = Math.round(height);
+
+	if (typeof data !== 'undefined') {
+		$(selector).fotorama({
+			data: data,
+			width: width,
+			height: height
+		});
+	} else {
+		$(selector).fotorama({
+			width: width,
+			height: height
+	});
+	}
+}

public/js/map.js

@@ -1,4 +1,4 @@
-/* 
+/*
  * Let's GO!
  */
 
@@ -214,8 +214,10 @@ function showInfo(id)
 				}
 				description += '</div>';
 
+				maxWidth = $(window).width() < 500 ? $(window).width() : 500;
+				maxHeight = $(window).height() < 300 ? $(window).height() : 300;
 				marker.options.description = description;
-				marker.bindPopup(marker.options.description, {maxWidth: 500, minWidth: 400,maxHeight: 300});
+				marker.bindPopup(marker.options.description, {maxWidth: maxWidth, minWidth: 400,maxHeight: maxHeight});
 
 				markers.zoomToShowLayer(marker, function () {
 					marker.openPopup();
@@ -236,7 +238,6 @@ function showInfo(id)
 
 		history.pushState({pointId: id}, document.title, "/?point=" + id);
 		document.title = points[id].options.title;
-//		marker.openPopup();
 	}
 }