Menu
<html>
<head>
<title>
Image Full-Screen On Click.
</title>
</head>
<body>
<div>
I want to make image full-screen when user click on it ,just simple as that ,i have search the web no getting proper answer, as i am not expert to make my own java script function to do it , So which is best way to do it . and Please provide example if any.
893
Here is my quick solution (no CSS needed, but you can tweak it if you need). I'm using this on my website and it works well.
$('img[data-enlargeable]').addClass('img-enlargeable').click(function() {
var src = $(this).attr('src');
var modal;
function removeModal() {
modal.remove();
$('body').off('keyup.modal-close');
}
modal = $('<div>').css({
background: 'RGBA(0,0,0,.5) url(' + src + ') no-repeat center',
backgroundSize: 'contain',
width: '100%',
height: '100%',
position: 'fixed',
zIndex: '10000',
top: '0',
left: '0',
cursor: 'zoom-out'
}).click(function() {
removeModal();
}).appendTo('body');
//handling ESC
$('body').on('keyup.modal-close', function(e) {
if (e.key === 'Escape') {
removeModal();
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img data-enlargeable width="100" style="cursor: zoom-in" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png" />Alternatively, you could pop a <div> into the DOM with position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('image.jpg') no-repeat center; background-size: cover; and that would give you an effective full-screen lightbox for your image.
29
Give the html as below
<html>
<head>
<title>Image Full-Screen On Click.</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<input id="clickbutton" type="button" value="Click" onclick="showimage()" />
</body>
</html>
Write a Javascript function
<script type="text/javascript">
function showimage()
{
$("body").css("background-image","url('images/test.png')"); // Onclick of button the background image of body will be test here. Give the image path in url
$('#clickbutton').hide(); //This will hide the button specified in html
}
</script>
Well, friend, the first thing you need is an image to click on your page. You can use jQuery to program against basically any DOM element you can imagine a CSS selector for!
If it were ME, I would do something like the following:
<html>
<head>
<title>My Full-Screen Image Clicker</title>
<script src = "Scripts/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
//your code for stuff should go here
$('#Fullscreen').css('height', $(document).outerWidth() + 'px');
//for when you click on an image
$('.myImg').click(function(){
var src = $(this).attr('src'); //get the source attribute of the clicked image
$('#Fullscreen img').attr('src', src); //assign it to the tag for your fullscreen div
$('#Fullscreen').fadeIn();
});
$('#Fullscreen').click(function(){
$(this).fadeOut(); //this will hide the fullscreen div if you click away from the image.
});
});
</script>
<style>
#MainImages {
width: 100%;
height: 800px;
}
#MainImages img {
cursor: pointer;
height: 70%;
}
#Fullscreen {
width: 100%;
display: none;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
/* I made a 50% opacity black tile background for this
div so it would seem more... modal-y*/
background: transparent url('../Images/bgTile_black50.png') repeat;
}
#Fullscreen img {
display: block;
height: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="MainImages">
<img src="Images/img.jpg" alt="" class="myImg" />
</div>
<div id="Fullscreen">
<img src="" alt="" />
</div>
</body>
</html>
I put together a little fiddle for you too: http://jsfiddle.net/wxj4c6yj/1/
Hope this is of some assistance to you.
44
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
