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

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

@ -97,7 +97,7 @@ $(document).ready(function() {
photos = []; photos = [];
for (i = 0; i < currentAlbum.photos.length; ++i) { for (i = 0; i < currentAlbum.photos.length; ++i) {
link = $("<a href=\"#!/" + photoFloat.photoHash(currentAlbum, currentAlbum.photos[i]) + "\"></a>"); link = $("<a href=\"#!/" + photoFloat.photoHash(currentAlbum, currentAlbum.photos[i]) + "\"></a>");
image = $("<img title=\"" + photoFloat.trimExtension(currentAlbum.photos[i].name) + "\" alt=\"" + photoFloat.trimExtension(currentAlbum.photos[i].name) + "\" src=\"" + photoFloat.photoPath(currentAlbum, currentAlbum.photos[i], 150, true) + "\" height=\"150\" width=\"150\" />"); image = $("<img title=\"" + photoFloat.trimExtension(currentAlbum.photos[i].name) + "\" alt=\"" + photoFloat.trimExtension(currentAlbum.photos[i].name) + "\" src=\"" + photoFloat.photoPath(currentAlbum, currentAlbum.photos[i], 150, true) + "\" height=\"150\" width=\"150\" />");
if (currentAlbum.photos[i].mediaType == "video") if (currentAlbum.photos[i].mediaType == "video")
image.css("background-image", "url(" + image.attr("src") + ")").attr("src", "img/video-icon.png"); image.css("background-image", "url(" + image.attr("src") + ")").attr("src", "img/video-icon.png");
else else
@ -168,20 +168,36 @@ $(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)
$("#video-box-inner").css('height', height + 'px').css('margin-top', - height / 2); .on('loadstart', scaleVideo);
$("#photo-box").hide(); $("#video-box-inner").css('height', height + 'px').css('margin-top', - height / 2);
$("#video-box").show(); $("#photo-box").hide();
$("#video-box").show();
} }
else { else {
width = currentPhoto.size[0]; width = currentPhoto.size[0];
@ -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")