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

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 href="" data-descriptiom="your caption">

Answer 2

您可以为您的a标记提供一个标题，如

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

对你来说就像

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 3

请用这个密码..。

我添加了数据描述属性，并且只为前三张图像显示了图像.

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