单击时使全屏img

Question

I would like to make an image full screen when clicked on. Similar to hitting f11 in most modern browsers. I've tried screenfull.js but it is really buggy and not cross browser supported that well.

My HTML

 <div id="photoFrame">
   <img src="uploads/picture01.jpg" class="img" alt="PictureOne" />
   <img src="uploads/picture02.jpg" class="img" alt="PictureTwo" />
   <img src="uploads/picture03.jpg" class="img" alt="PictureThree" />
   ... and so on ...
  </div>

My CSS

#photoFrame {                                                       
    clear: both;
    margin-left: 0;
    width: 100vw;
    display: block;
    white-space:nowrap;
    height:auto;
    float:left;
    overflow-x:scroll;
    overflow-y: hidden;
    clear:left;
    background-color:#333;
    padding-top:40px;
    padding-bottom:40px;
}

#photoFrame img {
    width:auto;
    max-width:80%;
    height:50vh;
    overflow-x:auto;
    overflow-y: hidden;
    padding-right:10px;
    padding-left:10px;
}

Side Notes

The img class on the elements can be used by any Javascript.

Any help would be great or even a point in the right direction.

Answer 1

Try something like...

$(".img").click(function(){
    $(this).height($(window).height());
    $(this).width($(window).width());
});

edit
For an f11 style full screen plugin you should check out https://github.com/kayahr/jquery-fullscreen-plugin . Then edit my above code to...

$(".img").click(function(){
    $(this).fullScreen(true);
});

Answer 2

You should use a plugin like which is very simple to use and would give you a good result of what you want to achieve:

http://lytebox.com/

Just download the js from the above site and include that into your page

http://lytebox.com/howTo.php

Its pretty simple and exactly what you want to do.