如何在不同的图像中给出不同的标题？

Question

我有一个画廊，我想在图像下面添加标题，并根据图像的描述有不同的标题 在这里我的工作图片

此示例图片带有标题

  

的index.html

<div id="photos">
 <ul id="photo-gallery">
    <li>
       <a href="img/galery/a.jpg">
         <img src="img/galery/a.jpg">
       </a>
   </li>
</ul>

  

index.js

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");

//An image to overlay
$overlay.append($image);

//Add overlay
$("body").append($overlay);

  //click the image and a scaled version of the full size image will appear
  $("#photo-gallery a").click( function(event) {
    event.preventDefault();
    var imageLocation = $(this).attr("href");

    //update overlay with the image linked in the link
    $image.attr("src", imageLocation);

    //show the overlay
    $overlay.show();
  } );

  $("#overlay").click(function() {
    $( "#overlay" ).hide();
  });

  

的style.css

#photos {
  /*! opacity: .88; */
}

#photos img {
  width: 30%;
  float: left;
  display: block;
  margin: 2px;
}

ul {
  list-style: none;
  margin: 0px auto;
  padding: 10px;
  display: block;
  max-width: 780px;
  text-align: center;
}

#overlay {
  background: rgba(0,0,0, .8);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  text-align: center;
  z-index: 5000;
}

#overlay img {
  margin: 10% auto 0;
  width: 100%;
  border-radius: 5px;
  z-index: 5000;
  position: relative;
  padding-top: 166px;
}

#photos {
  width: 100%;
  overflow: scroll;
}

#photo-gallery {
  width: 100%;
}

此处在codepen中解决方法： https://codepen.io/mglissmann/pen/zxXvpq

谢天谢地，抱歉英语不好。

Answer 1

您可以为a标记添加标题，例如

<a href="" data-caption="sample caption">

和你的js一样

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");

//An image to overlay
$overlay.append($image);
$overlay.append("<h2></h2>");

//Add overlay
$("body").append($overlay);

  //click the image and a scaled version of the full size image will appear
  $("#photo-gallery a").click( function(event) {
    event.preventDefault();
    var imageLocation = $(this).attr("href");

    //update overlay with the image linked in the link
    $image.attr("src", imageLocation);
    $overlay.find("h2").html($(this).data("caption"))

    //show the overlay
    $overlay.show();
  } );

  $("#overlay").click(function() {
    $( "#overlay" ).hide();
  });

两个补充

1, `$overlay.append("<h2></h2>");`
2, `$overlay.find("h2").html($(this).data("caption"))`

Answer 2

请使用这个编码器......

我添加了数据描述属性，并仅显示前三个图像的图像...

`https://codepen.io/Sarvan4040/pen/VyReWW`

Answer 3

试试这个<a href="" data-descriptiom="your caption">