Einrichten einer Bildergalerie mit Bildunterschriften mit onclick

Question

Ich versuche, Bilder in einer Galerie-Klasse Beschriftungen hinzuzufügen. Der Code, den ich verwendet habe, ist unten. Es funktioniert gut, wenn die Bilder angezeigt werden, aber ich kann nicht herausfinden, wie man Bildunterschriften in diesen Code einbaut. Welche Art von Beschriftungscode benötige ich?

<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

können Sie <div> verwenden und geben position wie folgt aus:

.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>

Aber der richtige Weg ist <figure> und <figcaption> zu verwenden:

.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

versuchen Sie <figure> und figcaption für Ihre Bilder zu verwenden.

Beispiel unten:

<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> 

können Sie mehr über Figur lernen und figcaption here