Question

我希望在单击后将图库中的图片放大为完整尺寸。我尝试了一切，但没有任何帮助。如果有人能帮助我并向我解释如何做到，将不胜感激。

随附了HTML代码和CSS。我是否必须创建图像的第二个版本并对其使用<a href>？

.column {
  flex: 10%;
  max-width: 10%;
  padding: 0 4px;
  margin: 79px;
  ;
}

.holder {
  position: relative;
  display: inline-block;
}

.column img {
  filter: brightness(35%);
  margin-top: 10px;
  vertical-align: middle;
  display: block;
  align-content: center;
  max-width: 300px;
  transition: filter 0.5s;
}

.holder:hover img {
  filter: brightness(100%);
}

<div class="row">
  <div class="column">

    <div class='holder'>
      <img src="/artbook/28.png">
      <p> sample </p>
    </div>

    <div class='holder'>
      <img src="/artbook/24.png">
      <p> sample </p>
    </div>

    <div class='holder'>
      <img src="/artbook/20.png">
      <p> sample </p>
    </div>

    <div class='holder'>
      <img src="/artbook/16.png">
      <p> sample </p>
    </div>

    <div class='holder'>
      <img src="/artbook/12.png">
      <p> sample </p>
    </div>

    <div class='holder'>
      <img src="/artbook/8.png">
      <p> sample </p>
    </div>

    <div class='holder'>
      <img src="/artbook/4.png">
      <p> sample </p>
    </div>

Answer 1

这个问题确实很模糊，但是我尽力了。我将使用一些overlay实用程序使它们在新层中扩展。我向您推荐jQueryUI及其Dialog实用程序。 -文档：http://jqueryui.com/ -关于对话框的示例：http://jqueryui.com/dialog/#modal-confirmation

我举例说明了您在寻找什么。你可以在这里看到它： https://codepen.io/dknacht/pen/dKaONp 它使用对话框div中的图像，然后根据所单击图像的来源更改其来源。

  $("img").click(function (){
    $("#imageDialog").prop("src", $(this).prop("src"))
    $("#dialog").dialog("open");
  });

少于20行代码，因此不要期望太多功能。希望能帮助到你。我会保持任何怀疑。

点击放大图片

1 个答案: