Question

我有一个画廊，我放了一个灯箱，但我不知道如何在灯箱中显示图片的标题或描述。现在，“标题”仅显示在灯箱中的“mouseenter”上。我想在图片下面有一行文字。我该怎么办？

HTML：

        <a href="../img/animals/1_korytnacka.jpg" title="Turtle - 50 x 50 x 3,5 cm">
            <img src="../img/animals/1_thumb.jpg" alt="Korytnacka">
        </a>

JS：

var overlay = $('<div>', {
  id: 'overlay'
}).appendTo('body');
overlay.hide();

$('.gallery-set a').on('click', function(e) {
  e.preventDefault();
  overlay.empty().show();
  $('<img>', {
    src: $(this).attr('href'),
    alt: $(this).attr('alt'),
    title: $(this).attr('title')
  }).appendTo(overlay);
});

overlay.on('click', function() {
  $(this).hide();
});

$(document).on('keydown', function(e) {
  if(e.which == 27) {
    overlay.hide();
  }
});

Answer 1

在on click事件函数中的图像后面附加段落。

var overlay = $('<div>', {
  id: 'overlay'
}).appendTo('body');
overlay.hide();

$('.gallery-set a').on('click', function(e) {
  e.preventDefault();
  overlay.empty().show();
  $('<img>', {
    src: $(this).attr('href'),
    alt: $(this).attr('alt'),
    title: $(this).attr('title')
  }).appendTo(overlay);
  $('<p>', {
    text: $(this).attr('title')
  }).appendTo(overlay);
});

overlay.on('click', function() {
  $(this).hide();
});

$(document).on('keydown', function(e) {
  if (e.which == 27) {
    overlay.hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery-set">
  <a href="../img/animals/1_korytnacka.jpg" title="Turtle - 50 x 50 x 3,5 cm">
    <img src="../img/animals/1_thumb.jpg" alt="Korytnacka">
  </a>
</div>

如何在灯箱中添加标题或说明？

1 个答案: