我如何重新为多个图像创建模态？
How do I re-approach creating modals for multiple images?
我正在做一个在一页上涉及多个模式的副项目。我遵循了 W3 schools modal tutorial，但它并没有完全按照我想要的方式执行。注意：我对 JS 非常陌生。
如何在单击模式后使用不同的 SRC (https://storage.googleapis.com/img.triggermail.io/hammacher/1839_HS_History.jpg) 提供相似但不同的图像，而不是放大显示相同的图像？
这是我的代码笔项目的 link：https://codepen.io/jkramer25/project/editor/AooxzJ
谢谢。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>document.getElementsByTagName("html")[0].className += " js";</script>
<link rel="stylesheet" href="assets/css/style.css">
<title>Horizontal Timeline</title>
</head>
<body>
<section class="cd-h-timeline js-cd-h-timeline margin-bottom-md">
<div class="cd-h-timeline__container container">
<div class="cd-h-timeline__dates">
<div class="cd-h-timeline__line">
<ol>
<li><a href="#0" data-date="01/01/1839" class="cd-h-timeline__date cd-h-timeline__date--selected">1839</a></li>
<li><a href="#0" data-date="28/02/1841" class="cd-h-timeline__date">1841</a></li>
<li><a href="#0" data-date="28/02/1902" class="cd-h-timeline__date">1902</a></li>
<li><a href="#0" data-date="28/02/1904" class="cd-h-timeline__date">1904</a></li>
<li><a href="#0" data-date="28/02/1912" class="cd-h-timeline__date">1912</a></li>
<li><a href="#0" data-date="28/02/1918" class="cd-h-timeline__date">1918</a></li>
</ol>
<span class="cd-h-timeline__filling-line" aria-hidden="true"></span>
</div> <!-- .cd-h-timeline__line -->
</div> <!-- .cd-h-timeline__dates -->
<ul>
<li><a href="#0" class="text-replace cd-h-timeline__navigation cd-h-timeline__navigation--prev cd-h-timeline__navigation--inactive">Prev</a></li>
<li><a href="#0" class="text-replace cd-h-timeline__navigation cd-h-timeline__navigation--next">Next</a></li>
</ul>
</div> <!-- .cd-h-timeline__container -->
<div class="timeline-indicators-flex container"><!--Previous, Next, Swipe tip-->
<div class="timeline-indication color-contrast-medium align-left">
<p>Previous</p>
</div>
<div class="timeline-indication color-contrast-medium align-center">
<p id="swipe-tip">Swipe or Use Arrows to Navigate</p>
</div>
<div class="timeline-indication color-contrast-medium align-right">
<p>Next</p>
</div>
</div>
<div class="cd-h-timeline__events">
<ol>
<!-- ------------------------SLIDE 1-1839----------------------- -->
<li class="cd-h-timeline__event cd-h-timeline__event--selected text-component">
<div class="cd-h-timeline__event-content container">
<!--
<div class="jumplinks-timeline">
<a href="#hammacher-history">
<div class="jumplinks-timeline-button">Hammacher History</div>
</a>
<a href="#us-history">
<div class="jumplinks-timeline-button">US History</div>
</a>
</div>
-->
<div id="#hammacher-history"></div>
<div class=timeline-image-flex>
<div>
<h2 class="cd-h-timeline__event-title">1839</h2>
<em class="cd-h-timeline__event-date">Hammacher History</em>
</div>
<div class="timeline-modal-instruct">
<p class="timeline-modal-tip">Click on images to enlarge</p>
<img class="myImg" src="https://storage.googleapis.com/img.triggermail.io/hammacher/1839_HS_History-100x100_1.jpg" style="width: 100%;max-width: 100px;">
</div>
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Albert Hammacher, the man who would eventually provide half of our company's name, is born on February 16, 1839 in Leichlingen, a town in the North Rhine-Westphalia region of Germany. Hammacher would come to be viewed as one of the leading figures in the hardware industry in the U.S. and Germany during the late 19th and early 20th centuries.
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">US History</em>
<img class="myImg"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1839_US_History-100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
United States Army officer George Armstrong Custer is born in Ohio. Custer developed a strong reputation leading Union
troops during the Civil War-despite graduating last in his class at West Point-and attained the rank of brigadier
general at age 23. After the Civil War, he was dispatched to the west to fight in the Indian Wars. Custer and all the
men with him (two of his brothers among them) were killed at the Battle of the Little Bighorn in 1876, in a battle that
has come to be known as "Custer's Last Stand."
</p>
</div>
</li>
<!-- ------------------------SLIDE 2-1841----------------------- -->
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<div id="#hammacher-history"></div>
<div class=timeline-image-flex>
<div>
<h2 class="cd-h-timeline__event-title">1841</h2>
<em class="cd-h-timeline__event-date">Hammacher History</em>
</div>
<div class="timeline-modal-instruct">
<p class="timeline-modal-tip">Click on images to enlarge</p>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1841_HS_History-100x100.jpg">
</div>
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
William Schlemmer, whose name will come to be associated with a landmark New York City store and America's
longest-running catalog, is born on April 20, 1841 in the Westphalia region of Germany.
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">US History</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1841_US_History-100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
William Henry Harrison served the shortest tenure of any U.S. president, just 32 days, and became the first to die in
office. Vice President John Tyler is sworn in as the nation's 10th president on April 4, 1841.
</p>
</div>
</li>
<!-- ------------------------SLIDE 3-1902----------------------- -->
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<div id="#hammacher-history"></div>
<div class=timeline-image-flex>
<div>
<h2 class="cd-h-timeline__event-title">1902</h2>
<em class="cd-h-timeline__event-date">Hammacher History</em>
</div>
<div class="timeline-modal-instruct">
<p class="timeline-modal-tip">Click on images to enlarge</p>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1902_HS_History-100x100.jpg">
</div>
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Despite the fact that there are fewer than 600 automobiles in New York City and no gas stations, Hammacher Schlemmer
introduces the first Auto Parts Department, selling parts and tools for the "horseless carriage" including a Motorist
Touring Kit, which allows drivers to fix a flat or blown gasket.As the automobile gains in popularity and begins to come
into more widespread use, Hammacher Schlemmer purchases their own automobile which they used to begin the first
home-delivery parcel service for customers-a novel idea in its day.
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">US History</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1902_US_History-100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Theodore Roosevelt becomes the first American President to ride in an automobile when he rides in a Columbia Electric
Victoria through Hartford, Connecticut.
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Extraordinary Items</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1902_Extraordinary-100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Weighing up to 750 lbs., the "Star" Screw-cutting Engine Lathe was operated via foot pedals. Chief among its many
virtues was its outstanding construction, described as "Heavy, rigid, accurate, correct in design and finish, combining
throughout the best material, with the highest class of workmanship."
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Media</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1902_Media-100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
To help motorists reduce their repair bills, Hammacher Schlemmer offers the tourist autokit, "the highest type of
repairing outfit procurable". The kit contains 38 tools for both permanent and emergency use, "conveniently packed in a
strong, leather-edged canvas roll."
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Catalogs</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1902_Catalog-100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Hammacher Schlemmer publishes catalog No. 115, a 300-page edition featuring tools for machinists and metal workers. The
opening page serves notice of the company's tradition for quality and innovation: "Since 1848 we have been selling tools
to the trade. We have always aimed to sell strictly high-grade goods, and to keep in advance of all improvements
introduced which bore evidence of real practical value."
</p>
</div>
</li>
<!-- ------------------------SLIDE 4-1904----------------------- -->
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<div id="#hammacher-history"></div>
<div class=timeline-image-flex>
<div>
<h2 class="cd-h-timeline__event-title">1904</h2>
<em class="cd-h-timeline__event-date">Hammacher History</em>
</div>
<div class="timeline-modal-instruct">
<p class="timeline-modal-tip">Click on images to enlarge</p>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1904_HS_History-100x100.jpg">
</div>
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Despite the fact that there are fewer than 600 automobiles in New York City and no gas stations, Hammacher
Schlemmer
introduces the first Auto Parts Department, selling parts and tools for the "horseless carriage" including a
Motorist
Touring Kit, which allows drivers to fix a flat or blown gasket.As the automobile gains in popularity and begins
to come
into more widespread use, Hammacher Schlemmer purchases their own automobile which they used to begin the first
home-delivery parcel service for customers-a novel idea in its day.
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">US History</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1904_US_History-100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Theodore Roosevelt becomes the first American President to ride in an automobile when he rides in a Columbia
Electric
Victoria through Hartford, Connecticut.
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Media</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1904_Media_100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
To help motorists reduce their repair bills, Hammacher Schlemmer offers the tourist autokit, "the highest type of
repairing outfit procurable". The kit contains 38 tools for both permanent and emergency use, "conveniently packed
in a
strong, leather-edged canvas roll."
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Catalogs</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1904_Catalog_100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Hammacher Schlemmer publishes catalog No. 115, a 300-page edition featuring tools for machinists and metal
workers. The
opening page serves notice of the company's tradition for quality and innovation: "Since 1848 we have been selling
tools
to the trade. We have always aimed to sell strictly high-grade goods, and to keep in advance of all improvements
introduced which bore evidence of real practical value."
</p>
</div>
</li>
<!-- ------------------------SLIDE 5-1912----------------------- -->
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<div class=timeline-image-flex>
<div>
<h2 class="cd-h-timeline__event-title">1912</h2>
<em class="cd-h-timeline__event-date">Hammacher History</em>
</div>
<div class="timeline-modal-instruct">
<p class="timeline-modal-tip">Click on images to enlarge</p>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1912_HS_History100x100.jpg">
</div>
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Despite the fact that there are fewer than 600 automobiles in New York City and no gas stations, Hammacher
Schlemmer
introduces the first Auto Parts Department, selling parts and tools for the "horseless carriage" including a
Motorist
Touring Kit, which allows drivers to fix a flat or blown gasket.As the automobile gains in popularity and begins
to come
into more widespread use, Hammacher Schlemmer purchases their own automobile which they used to begin the first
home-delivery parcel service for customers-a novel idea in its day.
</p>
<hr class="timeline-divider">
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">US History</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1912_US_History-100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Theodore Roosevelt becomes the first American President to ride in an automobile when he rides in a Columbia
Electric
Victoria through Hartford, Connecticut.
</p>
<hr class="timeline-divider">
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Extraordinary Items</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1912_Extraordinary100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Weighing up to 750 lbs., the "Star" Screw-cutting Engine Lathe was operated via foot pedals. Chief among its many
virtues was its outstanding construction, described as "Heavy, rigid, accurate, correct in design and finish,
combining
throughout the best material, with the highest class of workmanship."
</p>
<hr class="timeline-divider">
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Catalogs</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1912_Catalog100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Hammacher Schlemmer publishes catalog No. 115, a 300-page edition featuring tools for machinists and metal
workers. The
opening page serves notice of the company's tradition for quality and innovation: "Since 1848 we have been selling
tools
to the trade. We have always aimed to sell strictly high-grade goods, and to keep in advance of all improvements
introduced which bore evidence of real practical value."
</p>
</div>
</li>
<!-- ------------------------SLIDE 5-1918----------------------- -->
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<div class=timeline-image-flex>
<div>
<h2 class="cd-h-timeline__event-title">1918</h2>
<em class="cd-h-timeline__event-date">Hammacher History</em>
</div>
<div class="timeline-modal-instruct">
<p class="timeline-modal-tip">Click on images to enlarge</p>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1918_HS_History100x100.jpg">
</div>
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Despite the fact that there are fewer than 600 automobiles in New York City and no gas stations, Hammacher
Schlemmer
introduces the first Auto Parts Department, selling parts and tools for the "horseless carriage" including a
Motorist
Touring Kit, which allows drivers to fix a flat or blown gasket.As the automobile gains in popularity and begins
to come
into more widespread use, Hammacher Schlemmer purchases their own automobile which they used to begin the first
home-delivery parcel service for customers-a novel idea in its day.
</p>
<hr class="timeline-divider">
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">US History</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1918_US_History100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Theodore Roosevelt becomes the first American President to ride in an automobile when he rides in a Columbia
Electric
Victoria through Hartford, Connecticut.
</p>
<hr class="timeline-divider">
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Extraordinary Items</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1918_Extraordinary100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Weighing up to 750 lbs., the "Star" Screw-cutting Engine Lathe was operated via foot pedals. Chief among its many
virtues was its outstanding construction, described as "Heavy, rigid, accurate, correct in design and finish,
combining
throughout the best material, with the highest class of workmanship."
</p>
<hr class="timeline-divider">
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Media</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1918_Media100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
To help motorists reduce their repair bills, Hammacher Schlemmer offers the tourist autokit, "the highest type of
repairing outfit procurable". The kit contains 38 tools for both permanent and emergency use, "conveniently packed
in a
strong, leather-edged canvas roll."
</p>
</div>
</li>
</ol>
</div> <!-- .cd-h-timeline__events -->
</section>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
<!-- Scroll to top button -->
<footer class="timeline-scrollToTopBtn">
<button class="scrollToTopBtn">↑</button>
</footer>
<script src="assets/js/util.js"></script> <!-- util functions included in the CodyHouse framework -->
<script src="assets/js/swipe-content.js"></script> <!-- A Vanilla JavaScript plugin to detect touch interactions -->
<script src="assets/js/main.js"></script>
<script src="assets/js/timeline-scrollToTopBtn.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = $('.myImg');
var modalImg = $("#img01");
var captionText = document.getElementById("caption");
$('.myImg').click(function(){
modal.style.display = "block";
var newSrc = this.src;
modalImg.attr('src', newSrc);
captionText.innerHTML = this.alt;
});
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
您可以将“大”图像作为额外属性添加到图像中，如下所示：
<img class="myImg" src="https://storage.googleapis.com/img.triggermail.io/hammacher/1839_HS_History-100x100_1.jpg" style="width: 100%;max-width: 100px;" data-large-src="https://storage.googleapis.com/img.triggermail.io/hammacher/1839_HS_History.jpg">
并将var newSrc = this.src;替换为var newSrc = this.dataset.largeSrc;或var newSrc = this.getAttribute('data-large-src');
我没有对此进行测试，但这应该有效。
您可以在此处阅读有关 dataset 属性的更多信息：
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
我正在做一个在一页上涉及多个模式的副项目。我遵循了 W3 schools modal tutorial，但它并没有完全按照我想要的方式执行。注意：我对 JS 非常陌生。
如何在单击模式后使用不同的 SRC (https://storage.googleapis.com/img.triggermail.io/hammacher/1839_HS_History.jpg) 提供相似但不同的图像，而不是放大显示相同的图像？
这是我的代码笔项目的 link：https://codepen.io/jkramer25/project/editor/AooxzJ
谢谢。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>document.getElementsByTagName("html")[0].className += " js";</script>
<link rel="stylesheet" href="assets/css/style.css">
<title>Horizontal Timeline</title>
</head>
<body>
<section class="cd-h-timeline js-cd-h-timeline margin-bottom-md">
<div class="cd-h-timeline__container container">
<div class="cd-h-timeline__dates">
<div class="cd-h-timeline__line">
<ol>
<li><a href="#0" data-date="01/01/1839" class="cd-h-timeline__date cd-h-timeline__date--selected">1839</a></li>
<li><a href="#0" data-date="28/02/1841" class="cd-h-timeline__date">1841</a></li>
<li><a href="#0" data-date="28/02/1902" class="cd-h-timeline__date">1902</a></li>
<li><a href="#0" data-date="28/02/1904" class="cd-h-timeline__date">1904</a></li>
<li><a href="#0" data-date="28/02/1912" class="cd-h-timeline__date">1912</a></li>
<li><a href="#0" data-date="28/02/1918" class="cd-h-timeline__date">1918</a></li>
</ol>
<span class="cd-h-timeline__filling-line" aria-hidden="true"></span>
</div> <!-- .cd-h-timeline__line -->
</div> <!-- .cd-h-timeline__dates -->
<ul>
<li><a href="#0" class="text-replace cd-h-timeline__navigation cd-h-timeline__navigation--prev cd-h-timeline__navigation--inactive">Prev</a></li>
<li><a href="#0" class="text-replace cd-h-timeline__navigation cd-h-timeline__navigation--next">Next</a></li>
</ul>
</div> <!-- .cd-h-timeline__container -->
<div class="timeline-indicators-flex container"><!--Previous, Next, Swipe tip-->
<div class="timeline-indication color-contrast-medium align-left">
<p>Previous</p>
</div>
<div class="timeline-indication color-contrast-medium align-center">
<p id="swipe-tip">Swipe or Use Arrows to Navigate</p>
</div>
<div class="timeline-indication color-contrast-medium align-right">
<p>Next</p>
</div>
</div>
<div class="cd-h-timeline__events">
<ol>
<!-- ------------------------SLIDE 1-1839----------------------- -->
<li class="cd-h-timeline__event cd-h-timeline__event--selected text-component">
<div class="cd-h-timeline__event-content container">
<!--
<div class="jumplinks-timeline">
<a href="#hammacher-history">
<div class="jumplinks-timeline-button">Hammacher History</div>
</a>
<a href="#us-history">
<div class="jumplinks-timeline-button">US History</div>
</a>
</div>
-->
<div id="#hammacher-history"></div>
<div class=timeline-image-flex>
<div>
<h2 class="cd-h-timeline__event-title">1839</h2>
<em class="cd-h-timeline__event-date">Hammacher History</em>
</div>
<div class="timeline-modal-instruct">
<p class="timeline-modal-tip">Click on images to enlarge</p>
<img class="myImg" src="https://storage.googleapis.com/img.triggermail.io/hammacher/1839_HS_History-100x100_1.jpg" style="width: 100%;max-width: 100px;">
</div>
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Albert Hammacher, the man who would eventually provide half of our company's name, is born on February 16, 1839 in Leichlingen, a town in the North Rhine-Westphalia region of Germany. Hammacher would come to be viewed as one of the leading figures in the hardware industry in the U.S. and Germany during the late 19th and early 20th centuries.
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">US History</em>
<img class="myImg"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1839_US_History-100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
United States Army officer George Armstrong Custer is born in Ohio. Custer developed a strong reputation leading Union
troops during the Civil War-despite graduating last in his class at West Point-and attained the rank of brigadier
general at age 23. After the Civil War, he was dispatched to the west to fight in the Indian Wars. Custer and all the
men with him (two of his brothers among them) were killed at the Battle of the Little Bighorn in 1876, in a battle that
has come to be known as "Custer's Last Stand."
</p>
</div>
</li>
<!-- ------------------------SLIDE 2-1841----------------------- -->
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<div id="#hammacher-history"></div>
<div class=timeline-image-flex>
<div>
<h2 class="cd-h-timeline__event-title">1841</h2>
<em class="cd-h-timeline__event-date">Hammacher History</em>
</div>
<div class="timeline-modal-instruct">
<p class="timeline-modal-tip">Click on images to enlarge</p>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1841_HS_History-100x100.jpg">
</div>
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
William Schlemmer, whose name will come to be associated with a landmark New York City store and America's
longest-running catalog, is born on April 20, 1841 in the Westphalia region of Germany.
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">US History</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1841_US_History-100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
William Henry Harrison served the shortest tenure of any U.S. president, just 32 days, and became the first to die in
office. Vice President John Tyler is sworn in as the nation's 10th president on April 4, 1841.
</p>
</div>
</li>
<!-- ------------------------SLIDE 3-1902----------------------- -->
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<div id="#hammacher-history"></div>
<div class=timeline-image-flex>
<div>
<h2 class="cd-h-timeline__event-title">1902</h2>
<em class="cd-h-timeline__event-date">Hammacher History</em>
</div>
<div class="timeline-modal-instruct">
<p class="timeline-modal-tip">Click on images to enlarge</p>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1902_HS_History-100x100.jpg">
</div>
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Despite the fact that there are fewer than 600 automobiles in New York City and no gas stations, Hammacher Schlemmer
introduces the first Auto Parts Department, selling parts and tools for the "horseless carriage" including a Motorist
Touring Kit, which allows drivers to fix a flat or blown gasket.As the automobile gains in popularity and begins to come
into more widespread use, Hammacher Schlemmer purchases their own automobile which they used to begin the first
home-delivery parcel service for customers-a novel idea in its day.
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">US History</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1902_US_History-100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Theodore Roosevelt becomes the first American President to ride in an automobile when he rides in a Columbia Electric
Victoria through Hartford, Connecticut.
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Extraordinary Items</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1902_Extraordinary-100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Weighing up to 750 lbs., the "Star" Screw-cutting Engine Lathe was operated via foot pedals. Chief among its many
virtues was its outstanding construction, described as "Heavy, rigid, accurate, correct in design and finish, combining
throughout the best material, with the highest class of workmanship."
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Media</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1902_Media-100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
To help motorists reduce their repair bills, Hammacher Schlemmer offers the tourist autokit, "the highest type of
repairing outfit procurable". The kit contains 38 tools for both permanent and emergency use, "conveniently packed in a
strong, leather-edged canvas roll."
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Catalogs</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1902_Catalog-100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Hammacher Schlemmer publishes catalog No. 115, a 300-page edition featuring tools for machinists and metal workers. The
opening page serves notice of the company's tradition for quality and innovation: "Since 1848 we have been selling tools
to the trade. We have always aimed to sell strictly high-grade goods, and to keep in advance of all improvements
introduced which bore evidence of real practical value."
</p>
</div>
</li>
<!-- ------------------------SLIDE 4-1904----------------------- -->
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<div id="#hammacher-history"></div>
<div class=timeline-image-flex>
<div>
<h2 class="cd-h-timeline__event-title">1904</h2>
<em class="cd-h-timeline__event-date">Hammacher History</em>
</div>
<div class="timeline-modal-instruct">
<p class="timeline-modal-tip">Click on images to enlarge</p>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1904_HS_History-100x100.jpg">
</div>
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Despite the fact that there are fewer than 600 automobiles in New York City and no gas stations, Hammacher
Schlemmer
introduces the first Auto Parts Department, selling parts and tools for the "horseless carriage" including a
Motorist
Touring Kit, which allows drivers to fix a flat or blown gasket.As the automobile gains in popularity and begins
to come
into more widespread use, Hammacher Schlemmer purchases their own automobile which they used to begin the first
home-delivery parcel service for customers-a novel idea in its day.
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">US History</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1904_US_History-100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Theodore Roosevelt becomes the first American President to ride in an automobile when he rides in a Columbia
Electric
Victoria through Hartford, Connecticut.
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Media</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1904_Media_100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
To help motorists reduce their repair bills, Hammacher Schlemmer offers the tourist autokit, "the highest type of
repairing outfit procurable". The kit contains 38 tools for both permanent and emergency use, "conveniently packed
in a
strong, leather-edged canvas roll."
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Catalogs</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1904_Catalog_100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Hammacher Schlemmer publishes catalog No. 115, a 300-page edition featuring tools for machinists and metal
workers. The
opening page serves notice of the company's tradition for quality and innovation: "Since 1848 we have been selling
tools
to the trade. We have always aimed to sell strictly high-grade goods, and to keep in advance of all improvements
introduced which bore evidence of real practical value."
</p>
</div>
</li>
<!-- ------------------------SLIDE 5-1912----------------------- -->
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<div class=timeline-image-flex>
<div>
<h2 class="cd-h-timeline__event-title">1912</h2>
<em class="cd-h-timeline__event-date">Hammacher History</em>
</div>
<div class="timeline-modal-instruct">
<p class="timeline-modal-tip">Click on images to enlarge</p>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1912_HS_History100x100.jpg">
</div>
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Despite the fact that there are fewer than 600 automobiles in New York City and no gas stations, Hammacher
Schlemmer
introduces the first Auto Parts Department, selling parts and tools for the "horseless carriage" including a
Motorist
Touring Kit, which allows drivers to fix a flat or blown gasket.As the automobile gains in popularity and begins
to come
into more widespread use, Hammacher Schlemmer purchases their own automobile which they used to begin the first
home-delivery parcel service for customers-a novel idea in its day.
</p>
<hr class="timeline-divider">
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">US History</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1912_US_History-100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Theodore Roosevelt becomes the first American President to ride in an automobile when he rides in a Columbia
Electric
Victoria through Hartford, Connecticut.
</p>
<hr class="timeline-divider">
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Extraordinary Items</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1912_Extraordinary100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Weighing up to 750 lbs., the "Star" Screw-cutting Engine Lathe was operated via foot pedals. Chief among its many
virtues was its outstanding construction, described as "Heavy, rigid, accurate, correct in design and finish,
combining
throughout the best material, with the highest class of workmanship."
</p>
<hr class="timeline-divider">
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Catalogs</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1912_Catalog100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Hammacher Schlemmer publishes catalog No. 115, a 300-page edition featuring tools for machinists and metal
workers. The
opening page serves notice of the company's tradition for quality and innovation: "Since 1848 we have been selling
tools
to the trade. We have always aimed to sell strictly high-grade goods, and to keep in advance of all improvements
introduced which bore evidence of real practical value."
</p>
</div>
</li>
<!-- ------------------------SLIDE 5-1918----------------------- -->
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<div class=timeline-image-flex>
<div>
<h2 class="cd-h-timeline__event-title">1918</h2>
<em class="cd-h-timeline__event-date">Hammacher History</em>
</div>
<div class="timeline-modal-instruct">
<p class="timeline-modal-tip">Click on images to enlarge</p>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1918_HS_History100x100.jpg">
</div>
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Despite the fact that there are fewer than 600 automobiles in New York City and no gas stations, Hammacher
Schlemmer
introduces the first Auto Parts Department, selling parts and tools for the "horseless carriage" including a
Motorist
Touring Kit, which allows drivers to fix a flat or blown gasket.As the automobile gains in popularity and begins
to come
into more widespread use, Hammacher Schlemmer purchases their own automobile which they used to begin the first
home-delivery parcel service for customers-a novel idea in its day.
</p>
<hr class="timeline-divider">
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">US History</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1918_US_History100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Theodore Roosevelt becomes the first American President to ride in an automobile when he rides in a Columbia
Electric
Victoria through Hartford, Connecticut.
</p>
<hr class="timeline-divider">
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Extraordinary Items</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1918_Extraordinary100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Weighing up to 750 lbs., the "Star" Screw-cutting Engine Lathe was operated via foot pedals. Chief among its many
virtues was its outstanding construction, described as "Heavy, rigid, accurate, correct in design and finish,
combining
throughout the best material, with the highest class of workmanship."
</p>
<hr class="timeline-divider">
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Media</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1918_Media100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
To help motorists reduce their repair bills, Hammacher Schlemmer offers the tourist autokit, "the highest type of
repairing outfit procurable". The kit contains 38 tools for both permanent and emergency use, "conveniently packed
in a
strong, leather-edged canvas roll."
</p>
</div>
</li>
</ol>
</div> <!-- .cd-h-timeline__events -->
</section>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
<!-- Scroll to top button -->
<footer class="timeline-scrollToTopBtn">
<button class="scrollToTopBtn">↑</button>
</footer>
<script src="assets/js/util.js"></script> <!-- util functions included in the CodyHouse framework -->
<script src="assets/js/swipe-content.js"></script> <!-- A Vanilla JavaScript plugin to detect touch interactions -->
<script src="assets/js/main.js"></script>
<script src="assets/js/timeline-scrollToTopBtn.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = $('.myImg');
var modalImg = $("#img01");
var captionText = document.getElementById("caption");
$('.myImg').click(function(){
modal.style.display = "block";
var newSrc = this.src;
modalImg.attr('src', newSrc);
captionText.innerHTML = this.alt;
});
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
您可以将“大”图像作为额外属性添加到图像中，如下所示：
<img class="myImg" src="https://storage.googleapis.com/img.triggermail.io/hammacher/1839_HS_History-100x100_1.jpg" style="width: 100%;max-width: 100px;" data-large-src="https://storage.googleapis.com/img.triggermail.io/hammacher/1839_HS_History.jpg">
并将var newSrc = this.src;替换为var newSrc = this.dataset.largeSrc;或var newSrc = this.getAttribute('data-large-src');
我没有对此进行测试，但这应该有效。
您可以在此处阅读有关 dataset 属性的更多信息：
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes