0
嗨，我只是挖掘到CSS。我爲WordPress的帖子製作了一個css燈箱。它仍然需要一些樣式，但它按預期工作。我仍然試圖弄清楚的唯一事情是如何添加一個關閉按鈕。css lightbox-slider關閉
在這裏你可以看到它的生活：http://kaohsiung.at/?p=119你必須點擊第一張圖片才能打開燈箱。 （它使用僞類:focus具有tabIndex圖片）
下面是HTML：
<div id="gallerypic1" tabindex="10" >
<?php $imageid = get_post_meta(get_the_ID(), 'bild1', true);
$image_src = wp_get_attachment_image_src($imageid, 'gallery');
echo '<img src="' . $image_src[0] . '" class="gallerypic"/>';
?>
<div id="galleryslider" tabindex="100" >
<div id="slidermenucontainer" >
<div class="slidertext" id="slidertext1">
<?php $image = get_field('bild1');
echo $image['title' ];
?>
</div>
<div class="slidertext" id="slidertext2">
<?php $image = get_field('bild2');
echo $image['title' ];
?>
</div>
<div class="slidertext" id="slidertext3">
<?php $image = get_field('bild3');
echo $image['title' ];
?>
</div>
<div class="slidertext" id="slidertext4">
<?php $image = get_field('bild4');
echo $image['title' ];
?>
</div>
<div class="slidermenu" id="slidermenu1" tabindex="110"
<?php $bildda = get_field('bild1');
if (strlen($bildda['url'])<1) echo 'style="border-color:black;height:0;width:0;"' ;
?>
>
<div class="slidermenu" id="slidermenu2" tabindex="120"
<?php $bildda = get_field('bild2');
if (strlen($bildda['url'])<1) echo 'style="border-color:black;height:0;width:0;"' ;
?>
>
<div class="slidermenu" id="slidermenu3" tabindex="130"
<?php $bildda = get_field('bild3');
if (strlen($bildda['url'])<1) echo 'style="border-color:black;height:0;width:0;"' ;
?>
>
<div class="slidermenu" id="slidermenu4" tabindex="140"
<?php $bildda = get_field('bild4');
if (strlen($bildda['url'])<1) echo 'style="border-color:black;height:0;width:0;"' ;
?>
>
<div id="galleryframe" tabindex="150">
<div id="piccontainer">
<div class="piccontainer">
<?php $imageid = get_post_meta(get_the_ID(), 'bild1', true);
$image_src = wp_get_attachment_image_src($imageid, 'gallery');
echo '<img src="' . $image_src[0] . '"class="sliderpic"/>';
?>
</div>
<div class="piccontainer">
<?php $imageid = get_post_meta(get_the_ID(), 'bild2', true);
$image_src = wp_get_attachment_image_src($imageid, 'gallery');
echo '<img src="' . $image_src[0] . '"class="sliderpic"/>';
?>
</div>
<div class="piccontainer">
<?php $imageid = get_post_meta(get_the_ID(), 'bild3', true);
$image_src = wp_get_attachment_image_src($imageid, 'gallery');
echo '<img src="' . $image_src[0] . '"class="sliderpic"/>';
?>
</div>
<div class="piccontainer">
<?php $imageid = get_post_meta(get_the_ID(), 'bild4', true);
$image_src = wp_get_attachment_image_src($imageid, 'gallery');
echo '<img src="' . $image_src[0] . '"class="sliderpic"/>';
?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
這裏是CSS：
#galleryslider {
position: fixed;
left: 50%;
top: 50%;
width: 0%;
height: 0%;
overflow:hidden;
background: black;
display: block;
cursor: default;
outline: none;
z-index: 999999999999999;
}
#galleryslider {
/* W3C */
transition-property:all;
transition-duration:1s;
transition-timing-function: ease;
/* Firefox 4 */
-moz-transition-property:all;
-moz-transition-duration:1s;
-moz-transition-timing-function: ease;
/* Safari and Chrome */
-webkit-transition-property:all;
-webkit-transition-duration:1s;
-webkit-transition-timing-function: ease;
/* Opera */
-o-transition-property:all;
-o-transition-duration:1s;
-o-transition-timing-function: ease;
}
#gallerypic1:hover{
cursor: hand;
cursor: pointer;
}
#gallerypic1:focus #galleryslider{
height: 100%;
width: 100%;
top: 0;
left: 0;
}
#galleryslider:hover {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
#closeslider:hover {
display: block;
}
#closeslider:hover {
display: block;
}
#slidermenucontainer {
position: relative;
width: 900px;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
top: 60px;
}
.slidermenu {
position: relative;
height: 30px;
width: 218px;
display: block;
border: solid 2px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
cursor: pointer;
cursor: hand;
outline: none;
}
#slidermenu1 {
left: 0px;
border-color: white;
}
#slidermenu2 {
left: 224px;
top: -2px;
border-color: green;
}
#slidermenu3 {
left: 224px;
top: -2px;
border-color: blue;
}
#slidermenu4 {
left: 224px;
top: -2px;
border-color: yellow;
}
#galleryframe {
position: relative;
width: 900px;
top: 40px;
height: auto;
overflow: hidden;
display: block;
left: -680px;
/*border: solid 2px;*/
border-color: white;
z-index: 10000000;
cursor: default;
outline: none;
}
#piccontainer {
position: relative;
top: 0;
left: 0px;
width: 3600px;
height:auto;
display: block;
}
.piccontainer {
float: left;
width: 900px;
height: 700px;
}
.piccontainer img{
height: auto;
width: auto;
max-width: 900px;
max-height: 700px;
display: block;
margin-left: auto;
margin-right: auto;
}
#piccontainer {
/* W3C */
transition-property:all;
transition-duration:1.5s;
transition-timing-function: ease;
/* Firefox 4 */
-moz-transition-property:all;
-moz-transition-duration:1.5s;
-moz-transition-timing-function: ease;
/* Safari and Chrome */
-webkit-transition-property:all;
-webkit-transition-duration:1.5s;
-webkit-transition-timing-function: ease;
/* Opera */
-o-transition-property:all;
-o-transition-duration:1.5s;
-o-transition-timing-function: ease;
}
#slidermenu1:focus #piccontainer {
left: 0px;
}
#slidermenu2:focus #piccontainer {
left: -900px;
}
#slidermenu3:focus #piccontainer {
left: -1800px;
}
#slidermenu4:focus #piccontainer {
left: -2700px;
}
#slidermenu1:focus {
background-color: red;
}
#slidermenu2:focus {
background-color: green;
}
#slidermenu3:focus {
background-color: blue;
}
#slidermenu4:focus {
background-color: yellow;
}
#slidermenu1:focus #galleryframe {
border-color: white;
}
#slidermenu2:focus #galleryframe {
border-color: green;
}
#slidermenu3:focus #galleryframe {
border-color: blue;
}
#slidermenu4:focus #galleryframe {
border-color: yellow;
}
#galleryframe:focus {
border-color: white !important;
}
.slidertext {
position: absolute;
top: 10px;
color: white;
}
#slidertext1 {
left: 50px;
}
#slidertext2 {
left: 270px;
}
#slidertext3 {
left: 500px;
}
#slidertext4 {
left: 725px;
}
我發現的唯一的解決辦法，到目前爲止是移動#galleryslider稍微向右（或顯示標頭z-index），所以不掛斷#galleryslider將「關閉」#galleryslider。但是這隻有在通過點擊某個地方而不重點聚焦#gallerypic1時纔有效。所以這種行爲有點不一致。所以我正在尋找一種非JavaScript方式來插入一個關閉圖庫按鈕。