如何修复此灯箱？ [英] How Do I Fix This Lightbox?
问题描述
我现在已经用灯箱砸了好头，好像没什么好看的。我需要它，当我点击照片链接只是弹出，图像居中并让覆盖填充屏幕，简单吧？然而，覆盖层变成透明灰色的垂直柱，仅填充屏幕的中间，并且图像紧贴在它的顶部以获得亲爱的生命。我曾经玩过这个东西，但它已经有一段时间了，我不知道我做错了什么，下面是html，css和java脚本代码，任何帮助都将不胜感激
HTML：
< img src =images / mens / clarks / swiftmile.jpg>
Swift Mile也有黑色可用
Hi, I've been wreaking my head with light-box for a good while now and nothing seems to help. I need it to, when i click the photo link to just pop up, image centered and have the overlay fill the screen, simple right? However the overlay turns into a vertical pillar of transparent grey, only filling the middle of the screen, and the image clings to the top of it for dear life. I used to play around with this stuff but it's been a while and I have no idea what it is that I'm doing wrong, below is the html,css and java-script code, any help would be greatly appreciated
HTML:
<img src="images/mens/clarks/swiftmile.jpg">
Swift Mile Also Available In Black
< img src =iamges / mens / clarks / swiftmile .jpg>
也有黑色可供选择
<img src="iamges/mens/clarks/swiftmile.jpg">
Also Available in black
/ *样式灯箱，将其从视线中移除并添加淡入淡出物 - 过渡期* /
.lightbox-target {
持仓：固定;
顶部：-100％ ;
宽度：50％;
身高：100％;
背景：rgba（0,0,0，.7）;
宽度：50％;
不透明度：0;
-webkit-transition：opacity .5s easy-in-out;
-moz-transition：opacity .5s easy-in-out;
-o-transition：opacity .5s ease-in-out;
过渡：不透明度.5s轻松进出;
z-index：9999;
溢出：自动;
}
/ *为灯箱图像设置样式，使其垂直和水平居中，添加放大过渡并使用边距和绝对定位的组合使其响应* /
.lightbox-target img {
保证金：自动;
持仓：绝对;
top：0 ;
左：0;
右：0;
底部：0;
最大高度：0 ％;
最大宽度：0％;
边框：3px纯白色;
box-shadow：0px 0px 8px rgba（0， 0,0，.3）;
box-sizing：border-box;
-webkit-transition：.5轻松进出;
-moz-transition：.5s轻松进出;
-o-transition：.5s轻松进出;
过渡：.5s轻松进出;
}
/ *样式关闭链接，添加下滑过渡* /
a.lightbox-close {
显示：块;
宽度： 50px;
身高：50px;
盒子大小：边框盒子;
背景：白色;
颜色：黑色;
文字装饰：无;
位置：绝对;
顶部：-90px;
右：0;
-webkit-transition：.5s easy-in-out;
-moz-transition：.5s easy-in-out;
-o-transition：.5s easy-in-out;
过渡：.5s轻松进出;
}
/ *提供部分X以消除关闭链接中的图像* /
a.lightbox-关闭：在{
内容：;
显示：块;
高度：30px;
宽度之前：1px;
ba ckground：black;
position：absolute;
left：26px;
top：10px;
-webkit -transform：rotate（45deg）;
-moz-transform：rotate（45deg）;
-o-transform：rotate（45deg）;
变换：旋转（45度）;
}
/ *提供部分X以消除关闭时的图像链接* /
a.lightbox-close：在{
内容：;
显示：块;
高度：30px;
宽度：1px;
背景：黑色;
border：black;
仓位：绝对;
剩余：26px;
顶部：10px;
-webkit-transform：rotate （-45deg）;
-moz-transform：rotate（-45deg）;
-o-transform：rotate（-45deg）;
变换：旋转（-45deg）;
}
/ *使用：target伪类在单击时执行动画.lightbox-target anchor * /
.lightbox-target：target {
不透明度：1;
顶部：0;
底部：0;
}
.lightbox-target：target img {
max-height：100％;
max-width：100％;
}
.lightbox-target：target a.lightbox-close {
top：50px;
}
JAVASCRIPT：
< script src =http://ajax.googleapis.com/ ajax / libs / jquery / 1.10.2 / jquery.min.jstype =text / javascript>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
$（'。grid-nav li a'）。on（'click'，function（event）{
event.preventDefault（）;
$（'。grid-container'）。fadeOut（500，function（）{
$（ '＃'+ gridID）.fadeIn（500）;
}）;
var gridID = $（this）.attr（data-id）;
$（'。grid-nav li a'）。removeClass（active）;
$（this）.addClass（active ）;
}）;
}）;
< / script>
CSS:
/* Styles the lightbox, removes it from sight and adds the fade-in transition */
.lightbox-target {
position: fixed;
top: -100%;
width: 50%;
height:100%;
background: rgba(0,0,0,.7);
width: 50%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
z-index:9999;
overflow: auto;
}
/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */
.lightbox-target img {
margin: auto;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* Styles the close link, adds the slide down transition */
a.lightbox-close {
display: block;
width:50px;
height:50px;
box-sizing: border-box;
background: white;
color: black;
text-decoration: none;
position: absolute;
top: -90px;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
border:black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */
.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}
.lightbox-target:target img {
max-height: 100%;
max-width: 100%;
}
.lightbox-target:target a.lightbox-close {
top: 50px;
}
JAVASCRIPT:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.grid-nav li a').on('click', function(event){
event.preventDefault();
$('.grid-container').fadeOut(500, function(){
$('#' + gridID).fadeIn(500);
});
var gridID = $(this).attr("data-id");
$('.grid-nav li a').removeClass("active");
$(this).addClass("active");
});
});
</script>
推荐答案
（文件）.ready（function（）{
(document).ready(function() {
（'。grid-nav li a'）。on（'click'，function（event）{
event.preventDefault（）;
('.grid-nav li a').on('click', function(event){
event.preventDefault();
（'。grid-container'）。fadeOut（500，function（）{
('.grid-container').fadeOut(500, function(){
这篇关于如何修复此灯箱？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
