Fix image preview problem.(Add zoom-in and zoom-out to larger image.)
This commit is contained in:
parent
0e63f2d6ee
commit
7cf29b9d3e
Binary file not shown.
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
After Width: | Height: | Size: 4.2 KiB |
|
@ -16,6 +16,131 @@
|
||||||
</object>
|
</object>
|
||||||
<% else %>
|
<% else %>
|
||||||
<img alt="<%=@filename%>" src="<%=@url%>">
|
<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 %>
|
<% end %>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in New Issue