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

附注

任何Javascript都可以使用元素上的img类。

任何帮助都会很好，甚至可以指向正确的方向。

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

它非常简单，正是你想要做的。

单击时全屏显示图像

2 个答案: