我正在尝试创建一个多功能(适用于移动设备、台式机和平板电脑)灯箱弹出窗口。我是通过 Gravityforms 输入的,所以链接本身只能是 HTML。
此代码有效 - 但有点困惑。它必须是画廊和文字,我已经做到了。我正在使用 wordpress 4.0,所以如果有更好的插件解决方案,我愿意接受。
- 打开时的漂亮过渡</li>
- 调整大小以适应移动设备/较小的屏幕
- 点击背景关闭
将有一个页面上的多个画廊。
到目前为止我的代码
#gallery .item a {
overflow: hidden;
}
#gallery .item a img {
height: 100%;
align-self: center;
}
.lightbox {
/** Hide the lightbox */
display: none;
/** Apply basic lightbox styling */
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
top: 0;
left: 0;
color:#333333;
}
.lightbox:target {
/** Show lightbox when it is target */
display: block;
outline: none;
}
.lightbox .box {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
min-width:500px;
margin: 2% auto;
padding:10px 20px 10px 20px;
background-color:#FFF;
box-shadow: 0px 1px 26px -3px #777777;
}
.lightbox .title {
margin:0;
padding:0 0 10px 0px;
border-bottom:1px #ccc solid;
font-size:22px;
}
.lightbox .content {
display:block;
position:relative;
}
.lightbox .content .desc {
z-index:99;
bottom:0;
position:absolute;
padding:10px;
margin:0 0 4px 0;
background:rgba(0,0,0,0.8);
color:#fff;
font-size:17px;
opacity:0.75;
transition: opacity ease-in-out 0.5s;
}
.lightbox .content:hover .desc {
opacity:0.8;
}
.lightbox .next,
.lightbox .prev,
.lightbox .close {
display:block;
text-decoration:none;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:22px;
color:#858585;
}
.prev {
float:left;
}
.next, .close {
float:right;
}
.clear {
display:block;
clear:both;
}
我认为这就是我想要的过渡:
html { min-height: 100%; position: relative; }
body { margin: 0; height: 100%; margin-right: 2em; background: #110; }
dl { float: left; }
dd a {
background: #fff; display: inline-block;
transition: 4s box-shadow ease-in;
缩放功能也很棒(即在灯箱内),但我不确定是否可行。
非常感谢任何帮助
我最新的 JSFiddle Click here
最佳答案
- 打开时的过渡很好。
使用 CSStransition
- 调整大小以适应移动设备/较小的屏幕
使用max-width: 100%
您可能想尝试使用中描述的长度.desc
因为它对于手机屏幕的宽度来说似乎太长了 - 点击背景关闭。
我认为这可以使用 javascript 实现。
查看 FIDDLE 在这里。
关于仅 CSS 灯箱 - 单击以关闭和缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27239433/