JQuery вступительное назначение.Осталось только загрузить изображения.Текущий код работает так, как задумано, за исключением того, что при нажатии на ссылку загружается изображение;он должен предварительно загрузить изображение и отобразить его заголовок.
Никогда раньше этого не делал, поэтому не уверен, где вызывать функцию предварительной загрузки.Я разместил страницу JS с JQuery и сопровождающим HTML.
$("#image_list a").each(function(){
var swappedGallery = new Gallery();
swappedGallery.src = $(this).attr("href");
});
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
$("#image_list a").click(function(evt){
var imageURL = $(this).attr("href");
$("#image_list a").attr("src", imageURL);
var caption = $("this").attr("title");
$("#caption").text(caption);
evt.preventDefault();
}); //end click
});
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Gallery</title>
<link rel="stylesheet" href="main.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="image_gallery.js"></script>
</head>
<body>
<main>
<h1>Image Gallery</h1>
<ul id="image_list">
<li><a href="images/casting1.jpg" title="Casting on the Upper Kings">Upper Kings</a></li>
<li><a href="images/casting2.jpg" title="Casting on the Lower Kings">Lower Kings</a></li>
<li><a href="images/catchrelease.jpg" title="Catch and Release on the Big Horn">Big Horn</a></li>
<li><a href="images/fish.jpg" title="Catching on the South Fork">South Fork</a></li>
<li><a href="images/lures.jpg" title="The Lures for Catching">Lures</a></li>
</ul>
<h2 id="caption">Casting on the Upper Kings</h2>
<p id="gallery">
<img src="images/casting1.jpg" alt="Image Gallery area" id="image">
</p>
</main>
</body>
</html>
Благодарим за помощь!