summaryrefslogtreecommitdiffstats
path: root/data
diff options
context:
space:
mode:
Diffstat (limited to 'data')
-rw-r--r--data/css/colorbox.css32
-rw-r--r--data/js/jquery.colorbox.js123
-rw-r--r--data/js/script.js3
3 files changed, 128 insertions, 30 deletions
diff --git a/data/css/colorbox.css b/data/css/colorbox.css
index 395a01ebe..2cd015259 100644
--- a/data/css/colorbox.css
+++ b/data/css/colorbox.css
@@ -1,6 +1,6 @@
/*
- Colorbox Core Style:
- The following CSS is consistent between example themes and should not be altered.
+ Colorbox Core Style:
+ The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
@@ -16,22 +16,23 @@
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
/*
- User Style:
- Change the following styles to modify the appearance of Colorbox. They are
- ordered & tabbed in a way that represents the nesting of the generated HTML.
+ User Style:
+ Change the following styles to modify the appearance of Colorbox. They are
+ ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
- #cboxContent{margin-top:32px; overflow:visible; background:#000;}
- .cboxIframe{background:#fff;}
- #cboxError{padding:50px; border:1px solid #ccc;}
- #cboxLoadedContent{background:#000; padding:1px;}
- #cboxLoadingGraphic{background:url(/data/img/colorbox/loading.gif) no-repeat center center;}
- #cboxLoadingOverlay{background:#000;}
- #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
- #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px; display: none;}
+ #cboxContent{margin-top:32px; overflow:visible; background:#000;}
+ .cboxIframe{background:#fff;}
+ #cboxError{padding:50px; border:1px solid #ccc;}
+ #cboxLoadedContent{background:#000; padding:1px;overflow:hidden !important;}
+ .cboxPhoto{float:left !important;}
+ #cboxLoadingGraphic{background:url(/data/img/colorbox/loading.gif) no-repeat center center;}
+ #cboxLoadingOverlay{background:#000;}
+ #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
+ #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px; display: none;}
- /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
+ /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
/*#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(/data/img/colorbox/controls.png) no-repeat 0 0;}*/
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
@@ -52,7 +53,8 @@
#cboxClose{right:0;}
.cboxSlideshow_on #cboxSlideshow, .cboxSlideshow_off #cboxSlideshow{right:44px;}
.cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
- /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
+
+ /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
/*#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}*/
/*#cboxPrevious{background-position:0px 0px; right:44px;}*/
diff --git a/data/js/jquery.colorbox.js b/data/js/jquery.colorbox.js
index c0348849e..f9b676670 100644
--- a/data/js/jquery.colorbox.js
+++ b/data/js/jquery.colorbox.js
@@ -85,7 +85,10 @@
},
title: function() {
return this.title;
- }
+ },
+ orientation: function() {
+ return 0;
+ },
},
// Abstracting the HTML and event identifiers for easy rebranding
@@ -757,12 +760,20 @@
$loaded = $tag(div, 'LoadedContent').append(object);
function getWidth() {
- settings.w = settings.w || $loaded.width();
+ if (typeof object.renderWidth !== "undefined") {
+ settings.w = object.renderWidth;
+ } else {
+ settings.w = settings.w || $loaded.width();
+ }
settings.w = settings.mw && settings.mw < settings.w ? settings.mw : settings.w;
return settings.w;
}
function getHeight() {
- settings.h = settings.h || $loaded.height();
+ if (typeof object.renderHeight !== "undefined") {
+ settings.h = object.renderHeight;
+ } else {
+ settings.h = settings.h || $loaded.height();
+ }
settings.h = settings.mh && settings.mh < settings.h ? settings.mh : settings.h;
return settings.h;
}
@@ -965,6 +976,80 @@
// img.width and img.height of zero immediately after the img.onload fires
setTimeout(function(){
var percent;
+ var width, height;
+ var rotate = 0;
+ var mirror = false;
+ var translateX = false;
+ var translateY = false;
+ var transformation = "";
+
+ var orientation = settings.get('orientation');
+
+ switch (orientation) {
+ case 2:
+ mirror = true;
+ break;
+ case 3:
+ rotate = 180;
+ break;
+ case 4:
+ rotate = 180;
+ mirror = true;
+ break;
+ case 5:
+ rotate = 270;
+ mirror = true;
+ break;
+ case 6:
+ rotate = 90;
+ break;
+ case 7:
+ rotate = 90;
+ mirror = true;
+ break;
+ case 8:
+ rotate = 270;
+ break;
+ }
+
+ if (rotate%360 == 90) {
+ translateY = true;
+ }
+
+ if (rotate%360 == 180) {
+ translateY = true;
+ translateX = true;
+ }
+
+ if (rotate%360 == 270) {
+ translateX = true;
+ }
+
+ if (mirror) {
+ translateX = !translateX;
+ }
+
+ if (rotate%180 == 0) {
+ width = photo.width;
+ height = photo.height;
+ } else {
+ width = photo.height;
+ height = photo.width;
+ }
+ if (rotate != 0) {
+ transformation += "rotate("+rotate+"deg) ";
+ }
+ if (mirror) {
+ transformation +="scaleX(-1) ";
+ }
+ if (translateX) {
+ transformation += "translateX(-100%) ";
+ }
+ if (translateY) {
+ transformation += "translateY(-100%) ";
+ }
+ $(photo).css('transform-origin', '0 0');
+ $(photo).css('transform', transformation);
$.each(['alt', 'longdesc', 'aria-describedby'], function(i,val){
var attr = $(settings.el).attr(val) || $(settings.el).attr('data-'+val);
@@ -974,27 +1059,27 @@
});
if (settings.get('retinaImage') && window.devicePixelRatio > 1) {
- photo.height = photo.height / window.devicePixelRatio;
- photo.width = photo.width / window.devicePixelRatio;
+ height = height / window.devicePixelRatio;
+ width = width / window.devicePixelRatio;
}
if (settings.get('scalePhotos')) {
setResize = function () {
- photo.height -= photo.height * percent;
- photo.width -= photo.width * percent;
+ height -= height * percent;
+ width -= width * percent;
};
- if (settings.mw && photo.width > settings.mw) {
- percent = (photo.width - settings.mw) / photo.width;
+ if (settings.mw && width > settings.mw) {
+ percent = (width - settings.mw) / width;
setResize();
}
- if (settings.mh && photo.height > settings.mh) {
- percent = (photo.height - settings.mh) / photo.height;
+ if (settings.mh && height > settings.mh) {
+ percent = (height - settings.mh) / height;
setResize();
}
}
if (settings.h) {
- photo.style.marginTop = Math.max(settings.mh - photo.height, 0) / 2 + 'px';
+ photo.style.marginTop = Math.max(settings.mh - height, 0) / 2 + 'px';
}
if ($related[1] && (settings.get('loop') || $related[index + 1])) {
@@ -1004,12 +1089,20 @@
};
}
- photo.style.width = photo.width + 'px';
- photo.style.height = photo.height + 'px';
+ photo.renderWidth = width;
+ photo.renderHeight = height;
+ if (rotate%180 == 0) {
+ photo.style.width = width + 'px';
+ photo.style.height = height + 'px';
+ } else {
+ photo.style.width = height + 'px';
+ photo.style.height = width + 'px';
+ }
+
prep(photo);
}, 1);
});
-
+
photo.src = href;
} else if (href) {
diff --git a/data/js/script.js b/data/js/script.js
index 9aabf7557..100f30bd0 100644
--- a/data/js/script.js
+++ b/data/js/script.js
@@ -248,6 +248,9 @@ function fixedEncodeURIComponent (str) {
previous: '<span class="glyphicon glyphicon-chevron-left"></span>',
close: '<span class="glyphicon glyphicon-remove"></span>',
loop: false,
+ orientation: function() {
+ return parseInt($(this).children().first().parent().attr("data-orientation"));
+ },
});
}
setup_colorbox();