Site Notice
hello, world
MediaWiki:Js-imgpreview.js
From Project-EPB Commons
Invoke this: https://common.wjghj.cn/js/{{#replace:{{#replace:Js-imgpreview.js|Js-|}}|.js|}}
Note: After saving, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
$(function() {
var PostbirdImgGlass = {
init: function(objParam) {
this.domSelector = objParam.domSelector || "img";
this.width = objParam.width || "auto";
this.height = objParam.height || "auto";
this.boxClassName = objParam.boxClassName || 'postbird-img-glass-box';
this.boxBgColor = objParam.bgColor || 'rgba(0,0,0,0.8)';
this.animation = objParam.animation || false;
this.startGlass();
this.box = this.initImageClassContainer();
},
initImageClassContainer: function() {
var _this = this,
img = document.createElement('img');
img.style.width = _this.width;
img.style.height = _this.height;
var box = document.createElement("div");
box.style = _this.boxStyle;
box.className = _this.boxClassName;
box.appendChild(img);
box.onclick = function() {
_this.hideImageGlass();
};
document.body.insertBefore(box, document.body.childNodes[0]);
this.initCssClass();
return box;
},
startGlass: function() {
var domList = document.querySelectorAll(this.domSelector);
var _this = this;
for (var i = 0,
len = domList.length; i < len; i++) {
domList[i].style.cursor = 'zoom-in';
domList[i].addEventListener('click',
function(event) {
var target = event.target || event.srcElement;
_this.showImageGlass(target.getAttribute('src'));
},
false);
}
},
showImageGlass: function(src) {
this.box.childNodes[0].src = src;
this.box.style.display = 'block';
if (this.animation) {
this.addCssAnimation();
}
},
hideImageGlass: function() {
this.box.style.display = 'none';
if (this.animation) {
this.removeCssAnimation();
}
},
addCssAnimation: function() {
this.box.className = this.box.className + ' postbird-img-glass-box-move';
},
removeCssAnimation: function() {
this.box.className = this.box.className.replace(' postbird-img-glass-box-move', '');
},
initCssClass: function() {
var style = document.createElement('style');
var styleContent = '.' + this.boxClassName + '{position:fixed;top:0;left:0;width:100%;height:100%;text-align:center;cursor:zoom-out;background-color:' + this.boxBgColor + ';display:none;text-align:center;overflow:hidden;z-index:9999;}';
styleContent += '.' + this.boxClassName + ' img {position:relative;top:50%;transform:translateY(-50%);max-width:90%;}';
styleContent += '.postbird-img-glass-box-move{animation:postbird-img-glass .5s;-webkit-animation:postbird-img-glass .5s;-moz-animation:postbird-img-glass .5s;-o-animation:postbird-img-glass .5s;animation-fill-mode:forwards;-o-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}@-moz-keyframes postbird-img-glass{from{opacity:0;width:100%;height:100%;transform:translateY(-200px)}to{opacity:1;width:100%;height:100%;transform:translateY(0)}}@-webkit-keyframes postbird-img-glass{from{opacity:0;width:100%;height:100%;transform:translateY(-200px)}to{opacity:1;width:100%;height:100%;transform:translateY(0)}}@-o-keyframes postbird-img-glass{from{opacity:0;width:100%;height:100%;transform:translateY(-200px)}to{opacity:1;width:100%;height:100%;transform:translateY(0)}}@keyframes postbird-img-glass{from{opacity:0;width:100%;height:100%;transform:translateY(-200px)}to{opacity:1;width:100%;height:100%;transform:translateY(0)}}';
style.innerHTML = styleContent;
document.head.appendChild(style);
}
};
PostbirdImgGlass.init({
domSelector: "body:not(.wp-admin) .content-area img", // DOM Selector
//width: 'auto',
//height: 'auto',
boxClassName: 'postbird-img-glass-box',
boxBgColor: 'rgba(0,0,0,0.8)',
animation: true
});
});
