saurabh
/
archive
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix image preview problem.(Add zoom-in and zoom-out to larger image.)

This commit is contained in:
BoHung Chiu 2020-09-07 15:50:40 +08:00
parent 0e63f2d6ee
commit 7cf29b9d3e
3 changed files with 125 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/archive/zoomin.cur Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
app/assets/images/archive/zoomout.cur Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

125
app/views/archives/download_file.html.erb
View File

@ -16,6 +16,131 @@
</object>
<% else %>
<img alt="<%=@filename%>" src="<%=@url%>">
<script type="text/javascript">
var img = document.getElementsByTagName('img')[0];
var width = img.width;
var height = img.height;
window.innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
window.innerHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var window_width = window.innerWidth;
var window_height = window.innerHeight;
var zoom_in_cursor,zoom_out_cursor;
var IE_ver = 11;
if(navigator.userAgent.search("MSIE") != -1){
IE_ver = Number(navigator.userAgent.split("MSIE")[1].split(";")[0]);
}
if(IE_ver <= 8){
img.style.marginTop = "-"+img.height/2+"px";
img.style.marginLeft = "-"+img.width/2+"px";
}else{
img.style.transform= "translate(-50%, -50%)";
img.style["-ms-transform"]= "translate(-50%, -50%)";
img.style["-moz-transform"]= "translate(-50%, -50%)";
}
if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {
zoom_in_cursor = 'url("/assets/archive/zoomin.cur"), auto';
zoom_out_cursor = 'url("/assets/archive/zoomout.cur"), auto';
}else{
zoom_in_cursor = 'zoom-in';
zoom_out_cursor = 'zoom-out';
}
if(height > window_height && (height / width) > (window_height / window_width) ){
img.height = window_height;
img.width = window_height / height * width;
img.style.cursor = zoom_in_cursor;
if(IE_ver <= 8){
img.style.marginTop = "-"+img.height/2+"px";
img.style.marginLeft = "-"+img.width/2+"px";
}
img.onclick=function(e){
var event = e || window.event;
if(img.style.cursor == zoom_in_cursor){
var cursor_x = event.clientX;
var cursor_y = event.clientY;
img.height = height;
img.width = width;
img.style.cursor = zoom_out_cursor;
document.getElementsByTagName('html')[0].style.overflow = "";
img.style.transform= "none";
img.style["-ms-transform"]= "none";
img.style["-moz-transform"]= "none";
img.style.top= "0";
img.style.left= "0";
if(IE_ver <= 8){
img.style.marginTop = "0";
img.style.marginLeft = "0";
}
window.scroll(
(((cursor_x - (window_width - window_height / height * width)/2) * height / window_height) - window_width / 2),
((cursor_y * height / window_height) - window_height / 2)
);
}else{
img.height = window_height;
img.width = window_height / height * width;
img.style.cursor = zoom_in_cursor;
document.getElementsByTagName('html')[0].style.overflow = "hidden";
if(IE_ver <= 8){
img.style.marginTop = "-"+img.height/2+"px";
img.style.marginLeft = "-"+img.width/2+"px";
}else{
img.style.transform= "translate(-50%, -50%)";
img.style["-ms-transform"]= "translate(-50%, -50%)";
img.style["-moz-transform"]= "translate(-50%, -50%)";
}
img.style.top= "50%";
img.style.left= "50%";
window.scroll(0, 0);
}
};
}else if(width > window_width){
img.width = window_width;
img.height = window_width / width * height;
img.style.cursor = zoom_in_cursor;
if(IE_ver <= 8){
img.style.marginTop = "-"+img.height/2+"px";
img.style.marginLeft = "-"+img.width/2+"px";
}
img.onclick=function(e){
var event = e || window.event;
if(img.style.cursor == zoom_in_cursor){
var cursor_x = event.clientX;
var cursor_y = event.clientY;
img.height = height;
img.width = width;
img.style.cursor = zoom_out_cursor;
document.getElementsByTagName('html')[0].style.overflow = "";
img.style.transform= "none";
img.style["-ms-transform"]= "none";
img.style["-moz-transform"]= "none";
img.style.top= "0";
img.style.left= "0";
if(IE_ver <= 8){
img.style.marginTop = "0";
img.style.marginLeft = "0";
}
window.scroll( ((cursor_x * height / window_height) - window_width / 2),
(((cursor_y - (window_height - window_width / width * height)/2) * height / window_height) - window_height / 2)
);
}else{
img.width = window_width;
img.height = window_width / width * height;
img.style.cursor = zoom_in_cursor;
document.getElementsByTagName('html')[0].style.overflow = "hidden";
if(IE_ver <= 8){
img.style.marginTop = "-"+img.height/2+"px";
img.style.marginLeft = "-"+img.width/2+"px";
}else{
img.style.transform= "translate(-50%, -50%)";
img.style["-ms-transform"]= "translate(-50%, -50%)";
img.style["-moz-transform"]= "translate(-50%, -50%)";
}
img.style.top= "50%";
img.style.left= "50%";
window.scroll(0, 0);
}
};
}
</script>
<% end %>
</body>
</html>