單擊時使全屏img

Question

我想在單擊時使圖像全屏顯示。 與大多數現代瀏覽器中的f11相似。 我已經嘗試過screenfull.js，但是它確實有問題，而且還不能很好地支持跨瀏覽器。

我的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>

我的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;
}

旁注

元素上的img類可由任何Javascript使用。

任何幫助都將是巨大的，甚至朝着正確方向邁出了一步。

Answer 1

嘗試類似...

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

編輯
對於f11風格的全屏插件，您應該查看https://github.com/kayahr/jquery-fullscreen-plugin 。 然后將我上面的代碼編輯為...

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

Answer 2

您應該使用像lytebox這樣的插件，該插件使用起來非常簡單，並且可以為您實現的目標帶來良好的效果：

http://lytebox.com/

只需從上述網站下載js並將其包含在您的頁面中

如何使用：

http://lytebox.com/howTo.php

它非常簡單，而且正是您想要執行的操作。