时间戳

首页 > 解决方案 > 正确显示图像和javascript

javascript - 正确显示图像和javascript

问题描述

好的，我有一个网站，我想把我所有的照片都放上去同样，当您单击图像时，当单击图像时，它会在页面底部打开更大的图像，我希望页面自动下到图像，但我也希望它打开不同的图像，所以我可以在底部显示高分辨率，我知道这都是 CSS 和 javascript，但我不太确定这些。

另外，甚至可以在计算机上使用它，它会将所有图像放在一行中，您可以滚动浏览，在您单击图片并获得大图片后，然后当您单击大图片上的 x 时，它会将它们放回原处成列

这是网站，所以你可以看到我想要做什么。单击此处转到我所在的肖像页面

这是代码

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}
.text {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
  text-shadow: 5px 5px 5px #ababab;
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.link {
  color: black;
  font-weight: bold;
  text-decoration: none;
}

.link:hover {
  color: grey;
  font-weight: normal;
  text-decoration: none;
}

.text2 {
  font-family: Comic Sans MS;
  font-size: 1em;
  display: inline;
}

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 200px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
  font-family: Comic Sans MS;
  font-size: 2em;
}

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 25%;
  padding: 10px;
}

.column img {
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.container {
  position: relative;
  display: none;
}

#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}
<!DOCTYPE html>
<html amp lang="en">

<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <meta name="viewport" content="width=device-width" />
  <meta property="og:description" content="Tyler Rawlings Photography">
  <meta property="og:url" content="https://tylerphotography.tk">
  <meta property="og:title" content="Tyler Rawlings Photography">
  <meta name="theme-color" content="#D500FF">
  <meta content="Tyler Rawlings Photography" property="og:title">
  <meta name="og:site_name" content="">
  <meta name="twitter:title" content="Tyler Rawlings Photography">
  <meta name="twitter:description" content="Tyler Rawlings Photography">
  <meta content="Tyler Rawlings Photography" property="og:description">
  <meta property="og:image" content="https://tylerphotography.tk/static/TylerR.png">
  <meta name="twitter:image" content="https://tylerphotography.tk/static/TylerR.png">
  <meta name="og:image" content="https://tylerphotography.tk/static/TylerR.png">
  <meta name="robots" content="index, follow">
  <title>Tyler Rawlings Photography - About</title>

  <link rel="icon" href="/static/icon.ico">
</head>

<body>
  <center>
    <p class='text' style="font-family:Comic Sans MS; font-size: 3em;">Tyler Rawlings</p>
    <p class='text' style="font-family:Comic Sans MS; font-size: 2em;">Photography</p>
    <br>
    <br>
    <a class='link' href='/'>
      <p class='text2'>Home</p>
    </a>&nbsp;&nbsp;&nbsp;
    <a class='link' href='/about'>
      <p class='text2'>About</p>
    </a>&nbsp;&nbsp;&nbsp;
    <a class='link' href='/equipment'>
      <p class='text2'>Equipment</p>
    </a>&nbsp;&nbsp;&nbsp;
    <a class='link' href='https://www.instagram.com/drumsnaps' target='_blank'>
      <p class='text2'>Instagram</p>
    </a>
    <br>
    <br>
    <p class='text' style="font-family:Comic Sans MS; font-size: 2em;">Portraits</p>
    <br>

    <div class="row">

      <div class="column">
        <img src="./static/nancysc.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

      <div class="column">
        <img src="./static/decsadsc.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

      <div class="column">
        <img src="./static/decsc.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

      <div class="column">
        <img src="./static/joesc.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

      <div class="column">
        <img src="./static/dadsc.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

      <div class="column">
        <img src="./static/paisleysc.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

      <div class="column">
        <img src="./static/deccorn.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

      <div class="column">
        <img src="./static/grandpop.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

      <div class="column">
        <img src="./static/robinsmoke.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

      <div class="column">
        <img src="./static/danny.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

      <div class="column">
        <img src="./static/james.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

      <div class="column">
        <img src="./static/taxman.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

      <div class="column">
        <img src="./static/strangerthingsjoe.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
      </div>

    </div>

    <div class="container">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <img id="expandedImg" style="width:100%">
      <div id="imgtext"></div>
    </div>



  </center>
</body>

</html>

标签： javascriptpythonhtmlcssbottle

解决方案

我更改了您的 HTML 和 CSS 中的一些内容 - 也许它会有所帮助：

  1. 向该部分添加了一个<base href="...">标签以<head>使示例在此处工作（现在它显示图像）
  2. 逐div类替换rowimage-container
  3. 制作image-container了一个带有包装的 flex 布局容器
  4. 逐div类替换columnimage
  5. 在底部添加了一些新的 CSS
    • 托管图像的<div>元素现在具有固定大小并隐藏溢出。这样我们就得到了一个漂亮的网格
    • 将 amax-width应用于<img>元素并删除了内联样式width: 100%。这样图像保持比例。
  6. 使“预览”div元素成为绝对定位的叠加层。移除了属性并在 CSS 代码中class分配了一个适当的 ID 选择器id

您可以稍微使用width/heightCSS 中的值来更改缩略图图像的大小。

请看一下这个工作示例：

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  document.getElementById('container').style.display = "block";  
}
.text {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
  text-shadow: 5px 5px 5px #ababab;
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.link {
  color: black;
  font-weight: bold;
  text-decoration: none;
}

.link:hover {
  color: grey;
  font-weight: normal;
  text-decoration: none;
}

.text2 {
  font-family: Comic Sans MS;
  font-size: 1em;
  display: inline;
}

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 200px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
  font-family: Comic Sans MS;
  font-size: 2em;
}

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 25%;
  padding: 10px;
}

.column img {
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}


#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}





/* New CSS */

.image-container {
  display: flex;
  flex-wrap: wrap;
}

.image {
  width: 200px;
  height: 200px;
  margin: 10px;
  overflow: hidden;
  cursor: pointer;
}

.image img {
  max-width: 200px;
}

#container {
  position: absolute;
  left: calc(50% - 300px);
  top: 10%;
  width: 600px;
  padding: 20px;
  background-color: white;
  overflow: hidden;
}
<!DOCTYPE html>
<html amp lang="en">

<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <base href="https://tyler.photography/">
  <meta name="viewport" content="width=device-width" />
  <meta property="og:description" content="Tyler Rawlings Photography">
  <meta property="og:url" content="https://tylerphotography.tk">
  <meta property="og:title" content="Tyler Rawlings Photography">
  <meta name="theme-color" content="#D500FF">
  <meta content="Tyler Rawlings Photography" property="og:title">
  <meta name="og:site_name" content="">
  <meta name="twitter:title" content="Tyler Rawlings Photography">
  <meta name="twitter:description" content="Tyler Rawlings Photography">
  <meta content="Tyler Rawlings Photography" property="og:description">
  <meta property="og:image" content="https://tylerphotography.tk/static/TylerR.png">
  <meta name="twitter:image" content="https://tylerphotography.tk/static/TylerR.png">
  <meta name="og:image" content="https://tylerphotography.tk/static/TylerR.png">
  <meta name="robots" content="index, follow">
  <title>Tyler Rawlings Photography - About</title>

  <link rel="icon" href="/static/icon.ico">
</head>

<body>
  <center>
    <p class='text' style="font-family:Comic Sans MS; font-size: 3em;">Tyler Rawlings</p>
    <p class='text' style="font-family:Comic Sans MS; font-size: 2em;">Photography</p>
    <br>
    <br>
    <a class='link' href='/'>
      <p class='text2'>Home</p>
    </a>&nbsp;&nbsp;&nbsp;
    <a class='link' href='/about'>
      <p class='text2'>About</p>
    </a>&nbsp;&nbsp;&nbsp;
    <a class='link' href='/equipment'>
      <p class='text2'>Equipment</p>
    </a>&nbsp;&nbsp;&nbsp;
    <a class='link' href='https://www.instagram.com/drumsnaps' target='_blank'>
      <p class='text2'>Instagram</p>
    </a>
    <br>
    <br>
    <p class='text' style="font-family:Comic Sans MS; font-size: 2em;">Portraits</p>
    <br>

    <div class="image-container">

      <div class="image">
        <img src="./static/nancysc.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/decsadsc.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/decsc.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/joesc.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/dadsc.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/paisleysc.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/deccorn.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/grandpop.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/robinsmoke.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/danny.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/james.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/taxman.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/strangerthingsjoe.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

    </div>

    <div id="container" style="display: none">
      <div onclick="this.parentElement.style.display='none'" class="closebtn">&times;</div>
      <img id="expandedImg" style="width:100%">
      <div id="imgtext"></div>
    </div>
  </center>
</body>

</html>

推荐阅读