我希望显示图像的缩略图，然后点击显示不同的图像，似乎无法使其工作但我相信可能有一个简单的解决方案。目前它显示完整的图像然后放大点击。我只是想显示一个缩略图，然后点击显示这个完整的图像。
我的网站是http://www.creativewilderness.co.uk，代码低于......
<!DOCTYPE html>
<html>
<title>Creative Wilderness: Branding & Graphic Design for Independent Businesses. Stockport.</title>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Graphic Design & Brand Identity for Independent Businesses. We create strong brand identities for businesses providing web design, logo design, branding, social media design, marketing campaigns and more. Based in Stockport.">
<meta name="keywords" content="Graphic Design, Branding, Brand Identity, Logo Design, Stockport, Small business design, web design, independent design, ethical design, cheshire, indie design">
<meta name="author" content="Creative Wilderness LTD, Stockport">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abel">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Analytics creative wilderness.co.uk -->
<!--
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-', 'auto');
ga('send', 'pageview');
</script>
-->
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Abel", sans-serif}
h3 { letter-spacing: 5px;
font-size: large;
}
h2 {
letter-spacing: 5px;
}
body, html {
height: 100%;
color: #black;
line-height: 1.8;
max-width:;
}
xw {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
x
footer {
background-image: url('images/graphic-design-stockport.jpg');
}
/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4{
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* First image (Logo. Full height) */
.bgimg-1 {
background-image: url('images/graphic-design-stockport.jpg');
min-height: 100%;
}
/* Second image (Portfolio) */
.bgimg-2 {
background-image: url('images/ethical-branding-design.jpg');
min-height: 400px;
}
/* Third image (Contact) */
.bgimg-3 {
background-image: url("images/stockport-business-design-branding.jpg");
min-height: 400px;
}
/* Fourth image (Contact) */
.bgimg-4 {
background-image: url("images/design-small-business.jpg");
min-height: 400px;
}
.w3-wide {letter-spacing: 10px; padding: 50px;}
.w3-hover-opacity {cursor: pointer;}
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
.bgimg-1, .bgimg-2, .bgimg-3 {
background-attachment: scroll;
}
}
</style>
<body>
<!-- Navbar on small screens -->
<!-- First Parallax Image with Logo Text -->
<div class="bgimg-1 w3-display-container" id="home">
<!-- Navbar (sit on top) -->
<div class="w3-center">
<a href="#home" class="w3-bar-item w3-button">HOME</a>
<a href="#about" class="w3-bar-item w3-button"> ABOUT</a>
<a href="#portfolio" class="w3-bar-item w3-button w3-hide-small">OUR WORK</a>
<a href="#prices" class="w3-bar-item w3-button w3-hide-small">PRICES</a>
<a href="#contact" class="w3-bar-item w3-button w3-hide-small"> CONTACT</a>
</a>
</div>
<div class=style="white-space:nowrap;">
<span class="w3-padding-large w3-xlarge w3-wide w3-animate-opacity"><img src="images/creative-wilderness-design.png" alt="branding graphic design stockport" class="w3-display-middle" width="25%" w3-padding-large w3-animate-opacity")</span>
</div>
</div>
<!-- Container (About Section) -->
<div class="w3-content w3-#FFFDF1 w3-container w3-padding-64" id="about">
<h3 class="w3-center">INDEPENDENT DESIGN & BRANDING <br>FOR FREE THINKING BUSINESSES</h3>
<p class="w3-center">We are an indie design company who love working with free thinking businesses. We like to go a little wild with our initial ideas and concepts and delighting our clients with off-the-wall suggestions that get customers talking.
We can take hold of all your design and brand strategy from email marketing to print work. We can re-design your website to ensure it is responsive and hits all those user experience recommendations. We can tutor you on social media marketing and formulate a brand personality that works really hard to bring in new customers and make your business pop!
<br><br>
Being a small indie business means we have no constraints, no red tape, no unnecessary management jargon and the freedom to work with companies we believe in.
</div>
<!-- Second Parallax Image with Portfolio Text -->
<div class="bgimg-2 w3-display-container ">
<div class="w3-display-middle w3-center">
<h2><span class="w3-large w3-text-sand">CLEVER DESIGN</span></h2>
</div>
</div>
<!-- Container (Portfolio Section) -->
<div class="w3-content w3-container w3-padding-64" id="portfolio">
<p class="w3-center">Here is a selection of our latest branding, logo design and identity projects for independent businesses.<br> Click on the images to make them bigger.</p><br>
<!-- Responsive Grid. Four columns on tablets, laptops and desktops. Will stack on mobile devices/small screens (100% width) -->
<div class="w3-row-padding w3-center">
<div class="w3-col m3">
<img src="images/soul.jpg" class="portfolio" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Soul Cafe is an independent cafe in Congleton who wanted a new style to match their move into a larger premise. We created bespoke 60s inspired patterns and applied them to signage, menus and posters. We also created a clever poster and social campaign using soul song lyrics talking about the great food and drink the soul cafe serves.">
</div>
<div class="w3-col m3">
<img src="images/midnight.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Midnight Alchemy is a concept created for a Masquerade Ball at Tatton Park for THG. We art directed a bespoke photo shoot using employees from THG and created posters, emails, drinks menus and mood boards to inspire the theme of the event.">
</div>
<div class="w3-col m3">
<img src="images/fika.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Fika is a pop-up cafe based on a business park in Stockport. They wanted a scandi influenced design so we drew inspiration from our favourite Northern Quarter haunts and created a minimal menu and logo. We added breaks to to the font to tie in with the idea of taking a break and carried this through to bespoke eco friendly coffee cups">
</div>
<div class="w3-col m3">
<img src="images/ginspiration.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Ginspiration is a one-off gin tasting event celebrating local Gins around Cheshire. Using the natural Juniper berries found in Gin we produced a bespoke bottle box, menu, logo and social media assets">
</div>
</div>
<!-- Modal for full size images on click-->
<div id="modal01" class="w3-modal w3-white" onclick="this.style.display='none'">
<span class="w3-button w3-large w3-black w3-display-topright" title="Close Modal Image"><i class="fa fa-remove"></i></span>
<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
<img id="img01" class="w3-image">
<p id="caption" class="w3-opacity w3-large"></p>
</div>
</div>
<!-- <div class="w3-row-padding w3-center w3-section">
<div class="w3-col m3">
<img src="/w3images/p5.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="The mist">
</div>
<div class="w3-col m3">
<img src="/w3images/p6.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="My beloved typewriter">
</div>
<div class="w3-col m3">
<img src="/w3images/p7.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Empty ghost train">
</div>
<div class="w3-col m3">
<img src="/w3images/p8.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Sailing">
</div>
<button class="w3-button w3-padding-large w3-light-grey" style="margin-top:64px">LOAD MORE</button>
</div>
-->
</div>
<!-- Modal for full size images on click-->
</div>
<!-- Third Parallax Image with Portfolio Text -->
<div class="bgimg-3 w3-display-container">
<div class="w3-display-middle w3-center">
<h2><span class="w3-large w3-text-sand w3-center">STRONG & BRAVE BRANDING</span></h2>
</div>
</div>
<!-- Pricing Section -->
<div class="w3-padding-64 w3-center" id="prices">
<h3 class="w3-large"><b>OUR DESIGN PACKAGES</b></h3>
<p>We keep it simple with two starter packages for you to choose from. We also offer bespoke design services too so get in touch if you'd like a quote for this.</p>
</div>
<div class="w3-row-padding w3-center">
<div class="w3-quarter w3-section w3-center">
<ul class="w3-ul w3-card w3-center" >
<li class="w3-#FFFDF1 w3-large w3-padding-32">THE FOX</li>
<li class="w3-padding-16">Defining your brand ethos</li>
<li class="w3-padding-16">Logo Design</li>
<li class="w3-padding-16">Mood Board</li>
<li class="w3-padding-16">Brand Colours & Fonts</li>
<li class="w3-padding-16">2 marketing assets (flyer, email, poster, business card etc)</li>
<li class="w3-padding-16">
<h3 class="w3-opacity">£650</h3>
</li>
<li class="w3-light-grey w3-padding-24">
<a href="mailto:enquiry2018@creativewilderness.co.uk?Subject=I'm interested in THE FOX package" target="_top">
<button class="w3-button w3-black w3-padding-large" onclick="document.getElementById('download').style.display='block'"></i> BOOK NOW</button></a>
</li>
</ul>
</div>
<div class="w3-quarter w3-padding w3-section w3-center" >
<ul class="w3-ul w3-card">
<li class="w3-white w3-large w3-padding-32">THE BEAR</li>
<li class="w3-padding-16"><b>Full brand exploration</li>
<li class="w3-padding-16"><b>Mood Board</li>
<li class="w3-padding-16"><b>Logo Design</li>
<li class="w3-padding-16"><b>Copywriting & Tone of Voice</li>
<li class="w3-padding-16"><b>Social Media Assets</li>
<li class="w3-padding-16"><b>Poster Campaign</li>
<li class="w3-padding-16"><b>Business Stationary</li>
<li class="w3-padding-16"><b>Website</li>
<li class="w3-padding-16">
<h3 class="w3-opacity">£1,500</h3>
</li>
<li class="w3-light-grey w3-padding-24">
<a href="mailto:enquiry2018@creativewilderness.co.uk?Subject=I'm interested in THE BEAR package" target="_top"><button class="w3-button w3-black w3-padding-large" onclick="document.getElementById('download').style.display='block'"> BOOK NOW</button></a>
</li>
</ul>
</div>
</div>
<br>
</div></b>
<!-- Fourth Image with Portfolio Text -->
<div class="bgimg-4 w3-display-container">
<div class="w3-display-middle w3-center">
<h2><span class="w3-large w3-text-sand">LETS TALK DESIGN</span></h2>
</div>
</div>
<!-- Footer -->
<!-- Contact Topic -->
<div class="w3-container" id="contact">
<p class="w3-center" padding="15px" >Please get in touch to get the ball rolling on your surveying projects TODAY!<br><br>Ask us for advice or more information, book an online demonstration, or join our surveyors mailing list for ongoing information.</p>
<div class="w3-row-padding" xstyle="margin-top:64px">
<div class="w3-half w3-padding">
<h3>SEND MESSAGE</h3>
<!-- Form Start -->
<form name=contactform method="POST" action="/php/general-enquiry.php">
<input name="redirect" value="http://www.creativewilderness.co.uk/thanks.htm" type=hidden>
<input name="subject" value="Web Site Enquiry" type=hidden>
<input name="user" value="enquiries" type=hidden>
<input name="usercc" value="" type=hidden>
<input name="response" value="yes" type=hidden>
<p><input class="w3-input w3-border" type="text" placeholder="Name" required name="realname"></p>
<p><input class="w3-input w3-border" type="text" placeholder="Email" required name="email"></p>
<textarea class="w3-input w3-border" type="text" placeholder="Enquiry Details" required name="comments"></textarea>
<p><button class="w3-button w3-hover-opacity w3-black" type="submit"><i class="fa fa-paper-plane"></i> Make Enquiry</button>
</p>
</form>
</div>
</div>
</div>
</div>
<!-- Form End -->
<!-- Footer -->
<footer class="w3-container w3-padding-32 w3-center">
<a href="#home" class="w3-button w3-light-grey"><i class="fa fa-arrow-up w3-margin-right"></i>To the top</a>
<div class="w3-xlarge w3-section w3-text-sand " >
<a href='https://www.instagram.com/creativewilderness/'><i class="fa fa-instagram w3-hover-opacity"></i></a>  
<a href="https://twitter.com/CreativeWilder"><i class="fa fa-twitter w3-hover-opacity"></i></a> 
<a href='https://www.facebook.com/Creative-Wilderness-865983410234068/'><i class="fa fa-facebook-official w3-hover-opacity"></i></a>  
<a href="https://www.pinterest.co.uk/creativewilderness/"><i class="fa fa-pinterest-p w3-hover-opacity"></i></a>
</div>
<p class="w3-text-sand">Creative Wilderness: Creating strong brand identities for independent businesses</p>
</footer>
<!-- Add Google Maps -->
<script>
function myMap()
{
myCenter=new google.maps.LatLng(41.878114, -87.629798);
var mapOptions= {
center:myCenter,
zoom:12, scrollwheel: false, draggable: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
}
// Modal Image Gallery
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}
// Change style of navbar on scroll
window.onscroll = function() {myFunction()};
function myFunction() {
var navbar = document.getElementById("myNavbar");
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
navbar.className = "w3-bar" + " w3-card" + " w3-animate-top" + " w3-white";
} else {
navbar.className = navbar.className.replace(" w3-card w3-animate-top w3-white", "");
}
}
// Used to toggle the menu on small screens when clicking on the menu button
function toggleFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
<!--
To use this code on your website, get a free API key from Google.
Read more at: https://protect-eu.mimecast.com/s/zKR6BI0YwRAtW?domain=w3schools.com
-->
</body>
</html>
答案 0 :(得分：0)
将路径添加到您想要的替代图像作为数据属性：
<img src="images/soul.jpg" data-modal-image="images/modal-image.jpg" class="portfolio" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="">
并更改此javascript行：
document.getElementById("img01").src = element.src;
为：
document.getElementById("img01").src = element.dataset.modal-image;