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) ことでし#gallerysliderた#galleryslider。ただし、これは、#gallerypic1どこかをクリックして焦点を合わせていない場合にのみ機能します。そのため、動作に少し一貫性がありませんでした。だから私はギャラリーを閉じるボタンを挿入するJavaScript以外の方法を探しています。

4

1 に答える 1

0

解決策を見つけました。高さと幅が 100% でfixed、. 私がホバリングを与えたよりも、親は全幅と高さになります。親と子の両方の高さと幅を 0 に設定します。#closeslidertabindex#galleryslider top: 30px;#closeslider#galleryslider#closeslider

理論的には非常に簡単ですが、私にとっては、それを理解するために多くの思考とテストが必要でした. 新しいコードは次のとおりです。

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 に答える