如何重新為多個圖像創建模態？
[英]How do I re-approach creating modals for multiple images?
問題描述
我正在從事一個涉及一個頁面上的多個模式的輔助項目。 我遵循了 W3 學校模式教程，但它並沒有完全按照我想要的方式執行。 注意：我對 JS 非常陌生。
單擊模式后，如何使用不同的 SRC （ https://storage.googleapis.com/img.triggermail.io/hammacher/1839_HS_History.jpg ）提供相似但不同的圖像，而不是顯示放大的相同圖像在？
這是我的 codepen 項目的鏈接： 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>
1 個解決方案
解決方案1
1 已采納 2021-01-29 00:13:39
您可以做的是將“大”圖像添加為圖像的額外屬性，如下所示：
<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
如何通過下一個/上一個鏈接循環瀏覽多個Bootstrap3模態
[英]How do I cycle through multiple Bootstrap3 modals with next/prev links
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.