Question

＆＃13;

 html, body {
      margin: 0;
      width: 100%;
      height: 100%;
      
    }
h1 {
font-family: 'Roboto', sans-serif;
    font-weight: normal;
    font-size: 85px;
    color: black;
}
h2 {
font-family: 'Roboto', sans-serif;
    font-weight: normal;
    font-size: 65px;
    color: black;
}


    button {
      font-family: 'Roboto', sans-serif;
      font-size: 17px;
      font-weight:normal;
      color: white;
      background-color: Transparent;
      border: 2px solid white;
    }

    #head
    {
display: none;
   }

a {
    color: white;
    text-decoration: none;
}
#headSecond {
          font-family: 'Roboto', sans-serif;
      font-size: 21px;
      font-weight:normal;
      color: black;
      padding: 2px;
      margin-left: 1em;
     
}
#galleryPos {
    padding: 5px;
    margin-left: 3em;
}
#imgLeft {
    width:188px;
    height:32px;
    down: 2;
    padding: 0px;
  margin-left: 0em;
}

#headButton {

font-family: 'Roboto', sans-serif;
      font-size: 17px;
     
      font-weight:normal;
      color: white;
      background-color: Transparent;
      border: 2px solid white;
      margin-left: 2em;
      

}
#headButton2 {

font-family: 'Roboto', sans-serif;
      font-size: 17px;
      font-weight:normal;
      color: white;
      background-color: Transparent;
      border: 2px solid white;
      margin-left: 2em;


}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
      
              <link rel = "stylesheet" href="main.css">
              <link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>


    </head>
      
        <body>
<div style="background-color:gray;color:white;padding:18px;">

<image id="imgLeft" src="rabbit2.png"/>

<a href="home.html">    <button id="headButton">Home</button> </a>
<a href="photo.html">   <button id ="headButton2"> Photography </button> </a>
</div>
<h2 id ="headSecond" >Demo Reel</h2>

<br>
<br>
<div id="galleryPos">

  <a data-fancybox="gallery" href="https://www.youtube.com/embed/geZD5_OVCiQ">
      <img class="img-responsive" src="OU.jpg" />
  </a>
  <a data-fancybox="gallery" href="https://www.youtube.com/embed/7fcBoTFyQcM">
      <img class="img-responsive" src="okc.jpg" />
 </a>
<a data-fancybox="gallery" href="https://www.youtube.com/embed/_jNChDq8foY">
<img class"img-responsive" src="Puebla.jpg"/>

</a>


</div>
        </body>
</html>

＆＃13;

我正在使用fancyBox的开源项目。我是使用JavaScript / jQuery的新手。

<link rel = "stylesheet" href="main.css">
<link rel="stylesheet" type="text/css" href="dist/jquery.fancybox.min.css">

我已经在HTML的头部输入了这个内容，并将其用于我的YouTube视频库：

<div id="galleryPos">
    <a data-fancybox="gallery" href="https://www.youtube.com/embed/geZD5_OVCiQ">
        <img class="img-responsive" src="OU.jpg">
    </a>
</div>

我使用图像OU.jpg作为显示图像，然后点击链接：

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="dist/jquery.fancybox.min.js"></script>
<script src="main.js"></script>

我在视频库中使用fancyBox，但它无法正常工作

0 个答案: