0

嗨，我只是在研究 CSS。我为 wordpress 帖子制作了一个 CSS 灯箱。它仍然需要一些样式，但可以按预期工作。我仍然想弄清楚的唯一一件事是如何添加关闭按钮。

在这里你可以看到它：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），这样 unhover#galleryslider就会“关闭” #galleryslider。但这仅适用#gallerypic1于通过单击某处而分散注意力的情况。所以行为有点不一致。因此，我正在寻找一种非 JavaScript 方式来插入关闭图库按钮。

4

1 回答 1

0

我找到了解决方案。我在画廊周围添加了另一个fixed包装器，名为#closeslider100% 高度和宽度以及tabindex. 比我#galleryslider top: 30px; 悬停的父母#closeslider更宽#galleryslider和高。Focusing#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;


}
于 2013-03-11T06:59:43.793 回答