JavaScriptを使用して、クリックした時に画像が出てくるようにしたいです。

表題の通りなのですが、画像を "クリック" したときに,
「ズームアップと同時に対象画像の説明文も同時に表示」をしたいです。

画像のクリックしたときに対象が拡大される所まではできました。
HTMLかCSSの　data-description　の位置がおかしいのでしょうか。

HTML
1<!DOCTYPE html>
2<html lang = 'ja'>
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7    <link rel="stylesheet" href="https://github.com/filipelinhares/ress/blob/master/ress.css">
8    <link rel="stylesheet" href="style.css">
9</head>
10
11<body>
12    <header>
13        <h1>表題</h1>
14    </header>
15
16    <main>
17        <ul class="contents">
18
19            <li class="animationTarget" data-description="説明1">
20                <img id="img1.JPG" src="img1.JPG" alt="">
21                <div class="contentsText">
22                    <h2>-画像名１-</h2>
23                </div>
24            </li>
25
26            <li class="animationTarget" data-description="説明2">
27                <img id = "img2.JPG" src="img2.JPG" alt="">
28                <div class="contentsText">
29                    <h2>-画像名２-</h2>
30                </div>
31            </li>
32
33            <li class="animationTarget" data-description="説明3">
34                <img id="img3.JPG"  src="img3.JPG" alt="">
35                <div class="contentsText">
36                    <h2>-画像名３-</h2>
37                 </div>
38             </li>
39
40             <li class="animationTarget" data-description="説明4">
41                <img id="img4.JPG" src="img4.JPG" alt="">
42                <div class="contentsText">
43                    <h2>-画像名４-</h2>
44                </div>
45            </li>
46
47        </ul>
48        <script src="first.js" defer></script>>
49    </main>     
50</body>
51</html>   
52
53
54
55

@charset "utf-8";

body {
    font-family: serif;
    background-color: #333333;
    color: bisque;
}

*, *::before, *::after{
    box-sizing: border-box;
}

header{
    padding: 50px;
}

@keyframes titleAnimation{
    0% {
        letter-spacing: .3em;
        opacity: 0;
    }
}


header h1{
    font-size: 80px;
    font-weight: bold;
    margin-bottom: 50px;
    white-space: nowrap;
    animation: titleAnimation 1.5s;
}

main{
    max-width: 1000px;
    width: 100%;
    margin: 50px auto;
}

.contents li{
    position: relative;
}

.contents li.show h2,
.contents li.show img {
    transform: none;
    opacity: 1;
}

.contents li.active img{
    width: 130%;
}

.contents li.active::before {
    content: attr(data-description);
}

.contents li:not(:first-of-type) {
    margin-top: 200px;
}

.contents li:nth-of-type(odd) .contentsText{
    right: 0;
}

.contents li:nth-of-type(even) .contentsText{
    align-items: flex-start;
}

.contents li:nth-of-type(odd) img{
    transform:translate(-20px, 20px);
}
.contents li:nth-of-type(even) img{
    margin-left: auto;
    transform:translate(20px, 20px);
}


.contentsText {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position:absolute;
    top: 40px;
}

.contents h2{
    font-size: 30px;
    font-weight: bold;
    white-space: nowrap;
    background-color:rgba(19, 4, 4, 0.8);
    padding: 20px 10px;
    line-height: 1.5;
    letter-spacing: 0.5em;
    border-radius: 5px;
    opacity: 0;
    transform: translateY(20px);
    transition: 2s;
}

.contents img{
    width: 80%; 
    display: block;
    border-radius: 5px;

    opacity: 0;
    transition: 1s .5s;
}

JS
1const targetElement = document.querySelectorAll(".animationTarget");
2
3document.addEventListener("scroll", function(){
4    for(let i = 0 ; i < targetElement.length; i++) {
5        const getElementDistance = targetElement[i].
6        getBoundingClientRect().top + targetElement[i].clientHeight * .6
7        if(window.innerHeight > getElementDistance) {
8           targetElement[i].classList.add("show");
9        }
10    } 
11})
12
13document.getElementById("img1.JPG").addEventListener("click",function(e){
14    e.target.parentElement.classList.add("active")
15});
16
17document.getElementById("img2.JPG").addEventListener("click",function(e){
18    e.target.parentElement.classList.add("active")
19});
20
21document.getElementById("img3.JPG").addEventListener("click",function(e){
22    e.target.parentElement.classList.add("active")
23});
24
25document.getElementById("img4.JPG").addEventListener("click",function(e){
26    e.target.parentElement.classList.add("active")
27});

クリックしたときの処理内容はJSで、実際の出力アニメーションはCSSを使うのかなと思ったのですが、詰まりました。

退会済みユーザー

2021/02/14 17:08

CSS,JSだけでなくHTMLも含めできたところまで一式載せてください。

falilv

2021/02/14 17:46

拙いの極みですが、現時点でできている所まで載せました。できているところに＋アルファとして動作を追加したいと考えています。宜しくお願いします。

行動規範の内容に同意します

回答1件

こんにちは。

１.対象の画像をズームアップ

まず、<script src="f.js" defer></script>がheader内にあるのが、動作しない根本的原因です。
↓ここに置いてください。

html
1    <script src="f.js" defer></script>
2</body>

次に、document.getElementById("画像")ですが、id="画像"が見当たりませんでした。
とりあえず、↓こうしてください。

html
1                <img id="画像" src="http://placehold.jp/24/eeeeee/cccccc/150x100.png?text=img1.JPG" alt="">

そして、スクリプトは↓こうしてください。
classList を使ってクラスを変更するのは基本なので覚えておくといいでしょう。
今回は、画像の親要素にクラスを加えています。

js
1document.getElementById("画像").addEventListener("click", function (e) {
2    e.target.parentElement.classList.add('active');
3});

最後に、スタイルは↓こうです。

css
1.contents li.active img {
2    width: 200%;
3}

２.ズームアップと同時に対象画像の説明文も同時に表示

まず、説明文をHTMLに仕込んでおきます。

html
1<li class="animationTarget" data-description="説明1">

そして、CSSで疑似要素に適用します。

css
1.contents li.active::before {
2    content: attr(data-description);
3}

ただ、この方法ですと、IDが一意的属性なのでひとつにしかイベントリスナをつけられません。
classで指定することを検討してみてください。

投稿2021/02/15 07:08

Lhankor_Mhy

総合スコア36960

falilv

2021/02/16 17:30

返信遅くまりすみません。疑問に対し、わかりやすい回答いただき、ありがとうございます。おかげでクリック→画像ズームアップ　できました！ただ、教えていただいた　attr(data-description)なのですが、位置がおかしいのか、他の書き方の部分で噛み合わないのか表示されません。再度ご指摘いただけると幸いです。宜しくお願いいたします。