Making an image full-screen when clicked on.

Report · Aug 15, 2015

I wish to make my images full screen available,so when you click on it the image enlarges and it comes to the center possibly.

When you are finished looking on the picture you can close it by pressing the "X".

How is this possible?

Thank you

Report · Aug 15, 2015

This is done with JavaScript or jQuery Modal Windows -- sometimes called Lightboxes. See links below.

fancyBox - Fancy jQuery Lightbox Alternative

Bootstrap components: modal window

http://www.w3schools.com/bootstrap/bootstrap_modal.asp

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 15, 2015

I should have added to my reply that you must use 2 sets of images in your modal window. A thumbnail size image linked to the full size image.

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 15, 2015

Images stretched beyond their native size get pretty raggedy.

Are you sure that's what you want?

Report · Aug 15, 2015

Fullscreen example below - simple bit of jQuery. I've used the same sized image for the thumbnail and large image for the example but to save on bandwidth reduce the size of the thumbnail images.

<!DOCTYPE>

<html>

<head>

<title>Full Screen Gallery</title>

<style>

html {

height: 100%;

}

body {

font-family: helvetica, sans-serif;

height: 100%;

margin: 100px 0;

}

.photo-overlay {

height: 100%;

width: 100%;

position: absolute;

top: 0;

left: 0;

background-color:#9F3;

background-size: cover;

}

.close-photo-overlay {

font-size: 30px;

position: absolute;

right: 50px;

top: 50px;

color: #fff;

z-index: 2;

padding: 6px 9px;

border: 1px solid #fff;

}

.imgBox {

width: 20%;

margin: 0 auto;

}

img {

max-width: 100%;

height: auto;

padding: 0 0 15px 0;

}

</style>

$(document).ready(function() {

$('.photo-overlay').hide();

$('.thumb').click(function(event) {

event.preventDefault();

var imageUrl = $(this).attr('href');

$('.photo-overlay').show().css('background-image', 'url(' + imageUrl + ')');

});

$('.close-photo-overlay').css('cursor' , 'pointer').click(function() {

$('.photo-overlay').hide();

});

</script>

</head>

<body>

</div>

</div>

</div>

</div>

</body>

</html>

Report · Aug 24, 2015

thank you

Making an image full-screen when clicked on.

1 Correct answer