CODEWITHSUNDEEP
jqueryasp.net
Narendra Singh Rathore
Narendra Singh Rathore

Reputation: 706

Image Fullscreen on click

<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.

Upvotes: 11

Views: 79452

Answers (5)

schmark
schmark

Reputation: 71

$("img").on("click", function () {
    this.requestFullscreen();
});

Upvotes: 0

Juliano
Juliano

Reputation: 2552

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" />

Upvotes: 55

taki Martillo
taki Martillo

Reputation: 406

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.

Upvotes: 4

probablyup
probablyup

Reputation: 8134

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.

Upvotes: 5

Saranya Sadhasivam
Saranya Sadhasivam

Reputation: 1294

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>

Upvotes: 5

Related Questions