markus/photofloat
1
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Add automatic scaling for video

Browse Source
This commit is contained in:
Jerome Charaoui 2013-12-22 02:28:34 -05:00
parent 1409c13e30
commit 315b03f737
1 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/js/011-display.js
View File

@ -168,17 +168,33 @@ $(document).ready(function() {
else if (image.css("height") !== "100%") else if (image.css("height") !== "100%")
image.css("height", "100%").css("width", "auto").css("position", "").css("bottom", ""); image.css("height", "100%").css("width", "auto").css("position", "").css("bottom", "");
} }
function scaleVideo() {
var video, container;
video = $("#video");
if (video.get(0) === this)
$(window).bind("resize", scaleVideo);
container = $("#photo-view");
if (video.attr("width") > container.width() && container.height() * video.attr("ratio") > container.width())
video.css("width", container.width()).css("height", container.width() / video.attr("ratio")).parent().css("height", container.width() / video.attr("ratio")).css("margin-top", - container.width() / video.attr("ratio") / 2).css("top", "50%");
else if (video.attr("height") > container.height() && container.height() * video.attr("ratio") < container.width())
video.css("height", container.height()).css("width", container.height() * video.attr("ratio")).parent().css("height", "100%").css("margin-top", "0").css("top", "0");
else
video.css("height", "").css("width", "").parent().css("height", video.attr("height")).css("margin-top", - video.attr("height") / 2).css("top", "50%");
}
function showPhoto() { function showPhoto() {
var width, height, photoSrc, videoSrc, previousPhoto, nextPhoto, nextLink, text; var width, height, photoSrc, videoSrc, previousPhoto, nextPhoto, nextLink, text;
if (currentPhoto.mediaType == "video") { if (currentPhoto.mediaType == "video") {
width = currentPhoto.size[0]; width = currentPhoto.size[0];
height = currentPhoto.size[1]; height = currentPhoto.size[1];
$(window).unbind("resize", scaleVideo);
$(window).unbind("resize", scaleImage);
videoSrc = photoFloat.videoPath(currentAlbum, currentPhoto); videoSrc = photoFloat.videoPath(currentAlbum, currentPhoto);
$("#video") $("#video")
.attr("width", width).attr("height", height).attr("ratio", currentPhoto.size[0] / currentPhoto.size[1]) .attr("width", width).attr("height", height).attr("ratio", currentPhoto.size[0] / currentPhoto.size[1])
.attr("src", videoSrc) .attr("src", videoSrc)
.attr("alt", currentPhoto.name); .attr("alt", currentPhoto.name)
.on('loadstart', scaleVideo);
$("#video-box-inner").css('height', height + 'px').css('margin-top', - height / 2); $("#video-box-inner").css('height', height + 'px').css('margin-top', - height / 2);
$("#photo-box").hide(); $("#photo-box").hide();
$("#video-box").show(); $("#video-box").show();
@ -193,6 +209,7 @@ $(document).ready(function() {
width = width / height * maxSize; width = width / height * maxSize;
height = maxSize; height = maxSize;
} }
$(window).unbind("resize", scaleVideo);
$(window).unbind("resize", scaleImage); $(window).unbind("resize", scaleImage);
photoSrc = photoFloat.photoPath(currentAlbum, currentPhoto, maxSize, false); photoSrc = photoFloat.photoPath(currentAlbum, currentPhoto, maxSize, false);
$("#photo") $("#photo")