Menu
I have an image on a web page. When I click on it, it should display full screen.
I have the following code:
<!doctype html>
<html>
<head>
<script>
function makeFullScreen() {
var divObj = document.getElementById("theImage");
//Use the specification method before using prefixed versions
if (divObj.requestFullscreen) {
divObj.requestFullscreen();
}
else if (divObj.msRequestFullscreen) {
divObj.msRequestFullscreen();
}
else if (divObj.mozRequestFullScreen) {
divObj.mozRequestFullScreen();
}
else if (divObj.webkitRequestFullscreen) {
divObj.webkitRequestFullscreen();
} else {
console.log("Fullscreen API is not supported");
}
}
</script>
</head>
<body>
Click Image to display Full Screen...</br>
<img id="theImage" style="width:400px; height:auto;" src="pic1.jpg" onClick="makeFullScreen()"></img>
</body>
</html>
Problem I am facing - In full screen mode:
513
Full-screen can be activated for the whole browser window by pressing the F11 key. It can be exited by pressing the Esc button. It is also possible to make a specific element in the page to enter and exit full-screen mode programmatically using Javascript Fullscreen API.
Create “show()” function in JavaScript which can get the image and add the image source link to the src attribute.
If you do want to full screen everything pass in document. documentElement that will ensure you'll get the correct root element('html' or 'body'). And use can use cancelFullscreen() to close it (or send 'F11' again for IE). It can only be triggered by the user (for example via a fullscreen button).
So, found the solution after some trial...
The solution is in the style section:
- width, height, margin are set to 'auto',
- but also marked as '!important' - this allows you to override the inline styling of the image on the webpage - when in fullscreen mode.
<!doctype html>
<html>
<head>
<style>
.fullscreen:-webkit-full-screen {
width: auto !important;
height: auto !important;
margin:auto !important;
}
.fullscreen:-moz-full-screen {
width: auto !important;
height: auto !important;
margin:auto !important;
}
.fullscreen:-ms-fullscreen {
width: auto !important;
height: auto !important;
margin:auto !important;
}
</style>
<script>
function makeFullScreen() {
var divObj = document.getElementById("theImage");
//Use the specification method before using prefixed versions
if (divObj.requestFullscreen) {
divObj.requestFullscreen();
}
else if (divObj.msRequestFullscreen) {
divObj.msRequestFullscreen();
}
else if (divObj.mozRequestFullScreen) {
divObj.mozRequestFullScreen();
}
else if (divObj.webkitRequestFullscreen) {
divObj.webkitRequestFullscreen();
} else {
console.log("Fullscreen API is not supported");
}
}
</script>
</head>
<body>
Hello Image...</br>
<img id="theImage" style="width:400px; height:auto;" class="fullscreen" src="pic1.jpg" onClick="makeFullScreen()"></img>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With