CSS 灯箱 slider 关闭

标签 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 将“关闭”#galleryslider。但这仅在通过单击某处而没有聚焦 #gallerypic1 时才有效。所以行为有点不一致。所以我正在寻找一种非 JavaScript 方式来插入关闭画廊按钮。

最佳答案

我找到了一个解决方案。我在名为 #closeslider 的画廊周围添加了另一个 fixed 包装器，具有 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;


}

关于CSS 灯箱 slider 关闭，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15314338/

上一篇：CSS:复选框样式 - 选中时用颜色填充复选框

下一篇：html - vbulletin 论坛的 css 问题

相关文章：

html - 如何设置内容部分的全高

javascript - 当我将 HTML 放入 "include"时，为什么我的 javascript 不起作用？

css - Visual Studio 2017 在保存时缩小

javascript - 如何使用 fancyBox 创建幻灯片？

javascript - Lightbox 可以工作，但上传到服务器时不工作

build - 如何构建draw.io以拥有灯箱查看器

html - 图像悬停不起作用

html - 我可以禁用 HTML 中的地址链接吗？

jQuery 在 div 中插入和删除图像

javascript - Shadowbox 未定义

©2024 IT工具网  联系我们