All4DK
/
wikipoints
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Krivchikov Dmitry 2015-03-09 20:52:55 +03:00
parent 762a4d4f6a
commit b505678f89
5 changed files with 60 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ground/views/modals/image.php
View File

@ -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" data-width="555" data-height="450"></div>
<div class="fotorama" data-loop="true" data-auto="false"></div>
</div>
</div>
</div>

2
ground/views/point.php
View File

@ -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; ?>

20
public/css/style.css
View File

@ -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:768px) {
/* .leaflet-popup {
width: 100%!important;
height: 100%!important;
margin: 0!important;
}*/
@media screen and (max-width:815px) {
body {
padding: 0!important;
}
div.container{
padding: 5px;
}
div.header a img {
width: 115px;
height: 69px;
}
}

44
public/js/app.js
View File

@ -99,14 +99,12 @@ function showImage(id)
}
});
$('.fotorama').fotorama({data: photos});
} else
{
initFotorama('.fotorama', photos);
} else {
$('#imageModalImg').attr('src', point.img);
$('#imageModalImg').show();
$('.fotorama').hide();
$('#imageModalImg').attr('src', point.img);
}
$('#imageModal').modal('show');
}
@ -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
});
}
}

5
public/js/map.js
View File

@ -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();
}
}