щелкните обработчик, чтобы увеличить изображение - PullRequest
Новая
       27

щелкните обработчик, чтобы увеличить изображение

0 голосов
/ 17 мая 2018

Я не могу изменить html или css файлы.Моя задача - установить обработчик клика для моих миниатюр, чтобы увеличить изображение в img внутри элемента.При этом также устанавливая текст figcaption на рисунке для атрибута заголовка thumbs.Мне нужно прикрепить к div id = thumbnails.Мой сценарий не увеличивает мои миниатюры или названия.

Это то, что у меня есть до сих пор. 

<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="utf-8">
<title>Chapter 9 - Share Your Travels</title>

<link rel="stylesheet" href="css/styles.css" />

<script type="text/javascript" src="js/chapter09-project02.js">

document.getElementById("thumbnails").addEventListener("click", function(e) {

if(e.target && e.target.nodeName.toLowerCase == "img") {

    // Taking the image src and converting it to medium image.
   var srcValue = e.target.src.replace("small","medium");

    // Taking title and storing it for later.
   var titleValue = e.target.title;

   document.getElementById("featured").src = srcValue;
   document.getElementById("featured").title = titleValue;
   document.getElementById("figcaption").innerHTML = titleValue;
}
});

document.getElementById("figcaption").addEventListener("onmouseover", function(e) {
var figcaption = e.target.style.opacity = .8;
});

document.getElementById("figcaption").addEventListener("onmouseout", function(e) {
var figcaption = e.target.style.opacity = 0;
});
</script>


</head>
<body>
<header>
<h2>Share Your Travels</h2>
<nav><img src="images/menu.png"></nav>
</header>
<main>
<figure id="featured">
    <img src="images/medium/5855774224.jpg" title="Battle" />
    <figcaption>Battle</figcaption>
</figure>
<div id="thumbnails">
    <img src="images/small/5855774224.jpg" title="Battle" />
    <img src="images/small/5856697109.jpg" title="Luneburg" />
    <img src="images/small/6119130918.jpg" title="Bermuda" />
    <img src="images/small/8711645510.jpg" title="Athens" />
    <img src="images/small/9504449928.jpg" title="Florence" />
</div>

</main>
</body>
</html>

1 Ответ

0 голосов
/ 17 мая 2018

Это что-то вроде того, что вы преследовали? 

var caption = document.getElementsByTagName("FIGCAPTION")[0];
var images = document.getElementsByTagName("IMG");

for (val of images) {
  if(images[0] !== val){
    val.addEventListener("click", function(e) {
      caption.innerHTML = this.title;
      images[0].title = this.title;
      images[0].src = this.src.replace("small","medium");
    });
  }
}
img {
  width: 100px;
  height: 100px;
  }
<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="utf-8">
<title>Chapter 9 - Share Your Travels</title>

<link rel="stylesheet" href="css/styles.css" />

</head>
<body>
<header>
<h2>Share Your Travels</h2>
</header>
<main>
<figure id="featured">
    <img src="https://cdn.pixabay.com/photo/2018/01/20/14/26/panorama-3094696__340.jpg" title="Battle" />
    <figcaption>Battle</figcaption>
</figure>
<div id="thumbnails">
    <img src="https://cdn.pixabay.com/photo/2018/05/15/09/23/raindrop-3402550__340.jpg" title="Battle" />
    <img src="https://cdn.pixabay.com/photo/2018/04/23/14/23/giraffe-3344366__340.jpg" title="Luneburg" />
    <img src="https://cdn.pixabay.com/photo/2018/04/20/18/19/grass-3336700__340.jpg" title="Bermuda" />
    <img src="https://cdn.pixabay.com/photo/2018/05/12/12/48/mountain-crumpled-3393209__340.jpg" title="Athens" />
    <img src="https://cdn.pixabay.com/photo/2018/04/24/19/14/hai-3347787__340.jpg" title="Florence" />
</div>

</main>
</body>
</html>
...