У нас есть строка var oldImg = $('#photo img'); , которая создает переменную, которая содержит все картинки, затем есть строка oldImg.fadeOut(1000, function(){$(this).remove();}); , которая удаляет все картнинки, но почему при клике на ссылку у нас появляется новая картинка??? Мы же сказали удалять все картинки.
Вот сам код
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Сменяемые изображения</title>
<link href="../_css/site.css" rel="stylesheet">
<style>
#gallery {
float: left;
width: 90px;
margin-right: 30px;
margin-left: 10px;
border-right: white 1px dotted;
}
#gallery img {
display: inline-block;
margin: 0 0 10px 0;
border: 1px solid rgb(0,0,0);
}
#photo {
margin-left: 150px;
position: relative;
}
#photo img {
position: absolute;
}
</style>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
/********************Change to colorful********************/
$('#gallery img').each(function(){
var imgFile = $(this).attr('src');
var imgExt = /(\.\w{3,4}$)/;
var preloadImage = new Image();
preloadImage.src = imgFile.replace(imgExt, '_h$1');
$(this).hover(
function(){
$(this).attr('src', preloadImage.src);
},
function(){
$(this).attr('src', imgFile);
});
});
/**********************************************************/
/********************Change to Big*************************/
$('#gallery a').click(function(evt){ //<b>ТУТ НАЧИНАЕТСЯ ЧТО-ТО НЕСОВСЕМ ПОНЯТНОЕ</b>
evt.preventDefault();
var imgPath = $(this).attr('href');
var oldImg = $('#photo img');
var newImage = $('<img src="' + imgPath + '">');
newImage.hide();
$('#photo').prepend(newImage);
newImage.fadeIn(1000);
oldImg.fadeOut(1000, function(){
$(this).remove();
});
});/*end click*/
$('#gallery a:first').click();
/**********************************************************/
});//end ready
</script>
</head>
<body>
<div class="wrapper">
<header>
JAVASCRIPT <span class="amp">и</span> jQUERY: НЕДОСТАЮЩЕЕ РУКОВОДСТВО
</header>
<div class="content">
<div class="main">
<h1>Сменяемые изображения</h1>
<p>Наведите указатель мыши на изображения</p>
<div id="gallery">
<a href="../_images/large/blue.jpg"><img src="../_images/small/blue.jpg" width="70" height="70" alt="blue"></a>
<a href="../_images/large/green.jpg"><img src="../_images/small/green.jpg" width="70" height="70" alt="green"></a>
<a href="../_images/large/orange.jpg"><img src="../_images/small/orange.jpg" width="70" height="70" alt="orange"></a>
<a href="../_images/large/purple.jpg"><img src="../_images/small/purple.jpg" width="70" height="70" alt="purple"></a>
<a href="../_images/large/red.jpg"><img src="../_images/small/red.jpg" width="70" height="70" alt="red"></a>
<a href="../_images/large/yellow.jpg"><img src="../_images/small/yellow.jpg" width="70" height="70" alt="yellow"></a></div>
</div>
<div id="photo"></div>
</div>
</div>
<footer>
<p>JavaScript и jQuery: Недостающее Руководство, Дэвид МакФарланд.</p>
</footer>
</div>
</body>
</html>
