Question

我正在尝试为图库中的图片添加字幕。我使用的代码如下。它在显示图片时工作正常，但我无法弄清楚如何将图片标题合并到该代码中。我需要什么样的字幕代码？

<div class="gallery" align="center">
    <div class="thumbnails">
        <img onclick="preview.src=harlaxton.src" name="harlaxton" src="harlaxton.jpg"   alt="" />
        <img onclick="preview.src=harlaxton2.src" name="harlaxton2" src="harlaxton2.jpg" alt="" />
        <img onclick="preview.src=london.src" name="london" src="london.jpg" alt="" />
        <img onclick="preview.src=londonroad.src" name="londonroad" src="londonroad.jpg" alt="" />
        <img onclick="preview.src=mathbridge.src" name="mathbridge" src="mathbridge.jpg" alt="" />
        <img onclick="preview.src=ireland.src" name="ireland" src="ireland.jpg" alt="" />
        <img onclick="preview.src=cliffs.src" name="cliffs" src="cliffs.jpg" alt="" />
        <img onclick="preview.src=scotland.src" name="scotland" src="scotland.jpg" alt="" />
    </div>
    <div class="preview" align="center">
        <img name="preview" src="harlaxton.jpg" alt=""/>
    </div>

Answer 1

您可以使用<div>并像这样提供position：

.preview {position: relative; width: 150px;}
.preview img {display: block;}
.caption {position: absolute; bottom: 0; left: 0; right: 0; text-align: center; background-color: rgba(0,0,0,0.25); padding: 5px;}

<div class="gallery" align="center">
  <div class="thumbnails">
    <img onclick="preview.src='//placehold.it/150?text=Big-1'; caption.innerHTML=this.name;" name="Image 1" src="//placehold.it/50?text=1" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-2'; caption.innerHTML=this.name;" name="Image 2" src="//placehold.it/50?text=2" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-3'; caption.innerHTML=this.name;" name="Image 3" src="//placehold.it/50?text=3" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-4'; caption.innerHTML=this.name;" name="Image 4" src="//placehold.it/50?text=4" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-5'; caption.innerHTML=this.name;" name="Image 5" src="//placehold.it/50?text=5" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-6'; caption.innerHTML=this.name;" name="Image 6" src="//placehold.it/50?text=6" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-7'; caption.innerHTML=this.name;" name="Image 7" src="//placehold.it/50?text=7" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-8'; caption.innerHTML=this.name;" name="Image 8" src="//placehold.it/50?text=8" alt="" />
  </div>
  <div class="preview" align="center">
    <img name="preview" src="//placehold.it/150?text=Big-1" alt=""/>
    <div class="caption" id="caption">Image 1</div>
  </div>
</div>

但正确的方法是使用<figure>和<figcaption>：

.preview {position: relative; width: 150px;}
.preview img {display: block;}
.caption {position: absolute; bottom: 0; left: 0; right: 0; text-align: center; background-color: rgba(0,0,0,0.25); padding: 5px;}

<div class="gallery" align="center">
  <div class="thumbnails">
    <img onclick="preview.src='//placehold.it/150?text=Big-1'; caption.innerHTML=this.name;" name="Image 1" src="//placehold.it/50?text=1" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-2'; caption.innerHTML=this.name;" name="Image 2" src="//placehold.it/50?text=2" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-3'; caption.innerHTML=this.name;" name="Image 3" src="//placehold.it/50?text=3" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-4'; caption.innerHTML=this.name;" name="Image 4" src="//placehold.it/50?text=4" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-5'; caption.innerHTML=this.name;" name="Image 5" src="//placehold.it/50?text=5" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-6'; caption.innerHTML=this.name;" name="Image 6" src="//placehold.it/50?text=6" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-7'; caption.innerHTML=this.name;" name="Image 7" src="//placehold.it/50?text=7" alt="" />
    <img onclick="preview.src='//placehold.it/150?text=Big-8'; caption.innerHTML=this.name;" name="Image 8" src="//placehold.it/50?text=8" alt="" />
  </div>
  <figure class="preview" align="center">
    <img name="preview" src="//placehold.it/150?text=Big-1" alt=""/>
    <figcaption class="caption" id="caption">Image 1</figcaption>
  </figure>
</div>

Answer 2

尝试对您的图片使用<figure>和figcaption。

以下示例：

<figure>
<img src="/macaque.jpg" alt="Macaque in the trees">
<figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by   
<a href="http://www.flickr.com/photos/rclark/">Richard Clark</a>
</figcaption>
</figure>

您可以详细了解图形和图形here

使用onclick设置带有标题的图库

2 个答案: