css lightbox-slider关闭

时间：2013-03-09 18:28:00

标签： css lightbox

您好我正在深入研究CSS。我为wordpress帖子制作了一个css灯箱。它仍然需要一些样式，但它按预期工作。我仍然试图找出的唯一方法是如何添加一个关闭按钮。

在这里你可以看到它：http://kaohsiung.at/?p=119你必须点击第一张图片打开灯箱。 （它在图像上使用带有tabindex的伪类:focus）

这是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将“关闭”{{1} }。但是只有当一个人通过点击某个地方而没有聚焦#galleryslider时，这才有效。所以行为有点不一致。所以我正在寻找一种非JavaScript方式来插入一个关闭的图库按钮。

1 个答案:

答案 0 :(得分：0)

我找到了解决方案。我在名为fixed的图库中添加了另一个#closeslider包装，其高度和宽度均为100％，tabindex。比我给#galleryslider top: 30px; 将父#closeslider悬停在#galleryslider的全宽和高度上。将父项和子项的#closeslider的高度和宽度设置为0。

从理论上说这很容易，但对我而言，要想出这个问题需要进行大量的思考和测试。这是新代码：

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="closeslider"  tabindex="90">

     Click to close slider      

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

</div>

和我进行更改的CSS：

/* =css slider
-------------------------------------------------------------- */
#closeslider {
    position: fixed;
    left:50%;
    top: 50%;
    height: 0%;
    width: 0%;
    color: white;
    background-color: black;
    z-index: 2000;
    text-align: center;
    border: solid black;
    border-width: 0px;
    font-size: 0px;
    }

#galleryslider {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 0%;
  height: 0%;
  overflow:hidden; 
  background: black;
  cursor: default;
  outline: none;
  z-index: 9000;
  border: solid white;
  border-width: 0px;
  }

#galleryslider {
transition: height 1s ease, width 1s ease 1s, top 1s ease, left 1s ease 1s, border-width 1ms ease 2s;
    /* Firefox 4 */
    -moz-transition: height 1s ease, width 1s ease 1s, top 1s ease, left 1s ease 1s, border-width 1ms ease 2s;
    /* Safari and Chrome */
    -webkit-transition: height 1s ease, width 1s ease 1s, top 1s ease, left 1s ease 1s, border-width 1ms ease 2s;
    /* Opera */
    -o-transition: height 1s ease, width 1s ease 1s, top 1s ease, left 1s ease 1s, border-width 1ms ease 2s;
}

#closeslider {
/* W3C */
transition: height 1s ease 2s, width 1s ease 3s, top 1s ease 2s, left 1s ease 3s, border-width 1ms ease 4s;
/* Firefox 4 */
-moz-transition: height 1s ease 2s, width 1s ease 3s, top 1s ease 2s, left 1s ease 3s, border-width 1ms ease 4s;
/* Safari and Chrome */
-webkit-transition: height 1s ease 2s, width 1s ease 3s, top 1s ease 2s, left 1s ease 3s, border-width 1ms ease 4s;
/* Opera */
-o-transition: height 1s ease 2s, width 1s ease 3s, top 1s ease 2s, left 1s ease 3s, border-width 1ms ease 4s;
}



#gallerypic1:hover{
    cursor: hand;
    cursor: pointer;
}

#gallerypic1:focus #closeslider{
    height: 100%; 
    width: 100%;
    top: 0px;
    left: 0px;
    border-width: 2px;

    transition: height 1s ease, width 1s ease 1s, top 1s ease, left 1s ease 1s, border-width 1ms ease ;
    /* Firefox 4 */
    -moz-transition: height 1s ease, width 1s ease 1s, top 1s ease, left 1s ease 1s, border-width 1ms ease ;
    /* Safari and Chrome */
    -webkit-transition: height 1s ease, width 1s ease 1s, top 1s ease, left 1s ease 1s, border-width 1ms ease ;
    /* Opera */
    -o-transition: height 1s ease, width 1s ease 1s, top 1s ease, left 1s ease 1s, border-width 1ms ease ;

    }



#gallerypic1:focus #galleryslider{
    height: 100%; 
    width: 100%;
    top: 30px;
    left: 0px;
    border-width: 2px;

    /* W3C */
transition: height 1s ease 2s, width 1s ease 3s, top 1s ease 2s, left 1s ease 3s, border-width 1ms ease 2s;
/* Firefox 4 */
-moz-transition: height 1s ease 2s, width 1s ease 3s, top 1s ease 2s, left 1s ease 3s, border-width 1ms ease 2s;
/* Safari and Chrome */
-webkit-transition: height 1s ease 2s, width 1s ease 3s, top 1s ease 2s, left 1s ease 3s, border-width 1ms ease 2s;
/* Opera */
-o-transition: height 1s ease 2s, width 1s ease 3s, top 1s ease 2s, left 1s ease 3s, border-width 1ms ease 2s;


    } 


#galleryslider:hover {
    height: 100%; 
    width: 100%;
    top: 30px;
    left: 0px;
    border-width: 2px;
}

#closeslider:hover #galleryslider{
    height: 100%; 
    width: 100%;
    top: 30px;
    left: 0px;
    border-width: 2px;

}

#closeslider:hover {
    height: 100%; 
    width: 100%;
    top: 0px;
    left: 0px;
    border-width: 2px;
    font-size: 12px;
}

#closeslider:focus #galleryslider{
    left:50%;
    top: 50%;
    height: 0%;
    width: 0%;
    border-width: 0px;

    transition: height 1s ease, width 1s ease 1s, top 1s ease, left 1s ease 1s, border-width 1ms ease 2s;
    /* Firefox 4 */
    -moz-transition: height 1s ease, width 1s ease 1s, top 1s ease, left 1s ease 1s, border-width 1ms ease 2s;
    /* Safari and Chrome */
    -webkit-transition: height 1s ease, width 1s ease 1s, top 1s ease, left 1s ease 1s, border-width 1ms ease 2s;
    /* Opera */
    -o-transition: height 1s ease, width 1s ease 1s, top 1s ease, left 1s ease 1s, border-width 1ms ease 2s;

}

#closeslider:focus {
    left:50%;
    top: 50%;
    height: 0%;
    width: 0%;
    border-width: 0px;
    font-size: 0px;

    /* W3C */
transition: height 1s ease 2s , width 1s ease 3s, top 1s ease 2s, left 1s ease 3s, border-width 1ms ease 4s;
/* Firefox 4 */
-moz-transition: height 1s ease 2s , width 1s ease 3s, top 1s ease 2s, left 1s ease 3s, border-width 1ms ease 4s;
/* Safari and Chrome */
-webkit-transition: height 1s ease 2s, width 1s ease 3s, top 1s ease 2s, left 1s ease 3s, border-width 1ms ease 4s;
/* Opera */
-o-transition: height 1s ease 2s, width 1s ease 3s, top 1s ease 2s, left 1s ease 3s, border-width 1ms ease 4s;


}
相关问题
最新问题