<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.zoomooz.min.js"></script>
<style>
.container-iframe {
position: absolute;
overflow: visible;
width: 90%;
height: 90%;
}
.content-iframe {
position: absolute;
overflow: hidden;
width: 90%;
height: 100%;
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 98%;
height: 98%;
}
.responsive-iframe1 {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
button {
display: inline-block;
}
</Style>
</head>
<body>
<div class="container-iframe">
<h1>The iframe element</h1>
<button type="button" onclick="zoomIn()">+ Zoom In</button>
<button type="button" onclick="zoomOut()">- Zoom Out</button>
<button type="button" onclick="Reset()">Reset</button>
<button type="button" onclick="Fullscreen()">Full Screen</button>
<div class="content-iframe">
<iframe class="responsive-iframe1"
src='test.pdf' id="PDF" name="PDF"
frameborder="0"></iframe>
<iframe class="responsive-iframe" src="iframecontent-iframe.html" frameborder="0"
style="opacity: 0; z-index: 2; background:transparent" allowTransparency="true"></iframe>
</div>
</div>
<script>
function Reset() {
$('.content-iframe').css({
'height': '100%',
'width': '100%',
'-ms-zoom': '1',
'-moz-transform': 'scale(1)',
'-moz-transform-origin': '0 0',
'-o-transform': 'scale(1)',
'-o-transform-origin': ' 0 0',
'-webkit-transform': 'scale(1)',
'-webkit-transform-origin': '0 0'
});
}
function zoomOut() {
$('.content-iframe').css({
'height': '100%',
'width': '100%',
'-ms-zoom': '0.7',
'-moz-transform': 'scale(0.7)',
'-moz-transform-origin': '0 0',
'-o-transform': 'scale(0.7)',
'-o-transform-origin': ' 0 0',
'-webkit-transform': 'scale(0.7)',
'-webkit-transform-origin': '0 0'
});
}
function zoomIn() {
$('.content-iframe').css({
'height': '100%',
'width': '130%',
'-ms-zoom': '1.3',
'-moz-transform': 'scale(1.3)',
'-moz-transform-origin': '0 0',
'-o-transform': 'scale(1.3)',
'-o-transform-origin': ' 0 0',
'-webkit-transform': 'scale(1.3)',
'-webkit-transform-origin': '0 0',
});
}
function Fullscreen() {
$('.content-iframe').css({
'height': '100%',
'width': '150%',
'-ms-zoom': '1.5',
'-moz-transform': 'scale(1.5)',
'-moz-transform-origin': '0 0',
'-o-transform': 'scale(1.5)',
'-o-transform-origin': ' 0 0',
'-webkit-transform': 'scale(1.5)',
'-webkit-transform-origin': '0 0',
});
}
</script>
</body>
</html>
