スライドショーで流れている画像をクリックするとモーダルウィンドウが開かれるようにしたいです。

実現したいこと

スライドショーに拡大機能を付けたいです。

やったこと

スライド機能はcssのみで実装させました。
拡大機能はcssにtransform: scale();を打ち込み、jsのeventlistener(click)で
画像をクリックした時に画像が拡大されるような処理をしようとしました。

html
1<div class="slide" id="makeImg">
2　<img src="img/app.png" alt="" onclick="zoom('img/app.png')"　class="zoom"/>
3　<img src="img/bus.png" alt="" onclick="zoom('img/bus.png')"　class="zoom"/>
4　<img src="img/casy.png" alt="" onclick="zoom('img/casy.png')" class="zoom"/>
5　<img src="img/rec.png" alt="" onclick="zoom('img/rec.png')" class="zoom"/>
6</div>

css
1.slide {
2    height: 50%;
3    margin: auto;
4    position: absolute;
5    top: 0;
6    bottom: 0;
7    left: 25%;
8}
9.slide img {
10    display: block;
11    position: absolute;
12    width: inherit;
13    height: inherit;
14    cursor: pointer;
15    opacity: 0;
16    animation: slideAnime 16s ease infinite;
17    box-shadow:
18    0 1.9px 2.5px rgba(0, 0, 0, 0.057),
19    0 5px 6.1px rgba(0, 0, 0, 0.076),
20    0 10.1px 11.4px rgba(0, 0, 0, 0.086),
21    0 19.2px 19.8px rgba(0, 0, 0, 0.092),
22    0 38.4px 34.8px rgba(0, 0, 0, 0.1),
23    0 101px 74px rgba(0, 0, 0, 0.13);
24  }
25.slide img:nth-of-type(1) { animation-delay: 0s }
26.slide img:nth-of-type(2) { animation-delay: 4s }
27.slide img:nth-of-type(3) { animation-delay: 8s }
28.slide img:nth-of-type(4) { animation-delay: 12s }
29@keyframes slideAnime{
30     0% { opacity: 0 }
31     3% { opacity: 1 }
32    22% { opacity: 1 }
33    25% { opacity: 0 }
34   100% { opacity: 0 }
35}
36@keyframes zoom{
37    0%{ transform: scale(0,0);}
38    100%{ transform: scale(1.5,1.5);}
39}

js
1document.querySelector(".slide").addEventListener("click" , function(){
2  document.querySelector(".zoom").style.animation='1.5s ease zoom'
3})

現状

画像スライドは実装出来ましたが、クリックしても拡大はされません。

---------------------------追記---------------------------

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓スライドショーのように切り替わります↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

↓↓↓↓↓↓↓↓↓↓↓画像をクリックすると....↓↓↓↓↓↓

---------------------------追記２（スクロールをcssからjsライブラリのswiperに変更いたしました。）---------------------------

html
1<!-- scrollpaper -->
2                        <div id="sp-box" ontouchstart="">
3                            <img src="img/s-c-p.png" alt="">
4
5                            <div class="swiper-container">
6                                <div class="swiper-wrapper">
7                                  <div class="swiper-slide"><img src="img/bus.png" alt="Swiper01"></div>
8                                  <div class="swiper-slide"><img src="img/casy.png" alt="Swiper02"></div>
9                                  <div class="swiper-slide"><img src="img/app.png" alt="Swiper03"></div>
10                                  <div class="swiper-slide"><img src="img/rec.png" alt="Swiper04"></div>
11                                </div>
12                                <div class="swiper-button-prev"></div>
13                                <div class="swiper-button-next"></div>
14                            </div>
15                        </div>

css
1/* sp-box */
2#sp-box{
3    height: 40%;
4    text-align: center;
5    position: relative;
6    top: 20%;
7    animation: fluffy 3s ease 1s infinite alternate;
8}
9#sp-box img{
10    object-fit: cover;
11    height: 100%;
12}
13.swiper-container{
14    width: 40vh;
15    height: 50%;
16    margin: auto;
17    position: absolute;
18    bottom: 75%;
19    left: 5%;
20}
21.swiper-button-next::after, .swiper-button-prev::after {
22    content: none !important;
23}

javascript
1var swiper = new Swiper('.swiper-container', {
2    navigation: {
3      nextEl: '.swiper-button-next',
4      prevEl: '.swiper-button-prev',
5    },
6    loop: true,
7    effect: 'fade',
8    autoplay: {
9      delay: 5000,
10      disableOnInteraction: true
11    },
12  });

Lhankor_Mhy

2021/01/29 02:54

とりあえず、目についたところは、・`1,5s`→`1.5s` ・`.zoom`がないなどですが、そもそも根本的に、animationを上書きしたらスライドしなくなるんじゃないかな、と思いました。

DrsriN

2021/01/29 03:53

コメントありがとうございます！・`1,5s`→`1.5s`＞＞＞こちら修正いたしました！・`.zoom`がない＞＞＞.zoomはcssに何か書くべきこととかありますでしょうか？なるほど、確かにcssでanimationでスライドさせているので、jsで上書きしてしまうとzoomっに上書きされてスライドしなくなりますね。これってidやclassが別の物でも言えることなのでしょうか？

Lhankor_Mhy

2021/01/29 04:29

> .zoomはcssに何か書くべきこととかありますでしょうか？ HTMLに.zoomに当たる要素がないですよね？

DrsriN

2021/01/29 05:12

ほんとですね... 試しにそのまま付けてみましたが意味ないようです。

Lhankor_Mhy

2021/01/29 05:15

そうでしょうね。この質問は、どういう回答をすればいいのでしょうか。「こんな感じにすればいいんじゃない？」という回答でいいでしょうか。

DrsriN

2021/01/29 05:20

そうですね。現在の私が書いたコードに足りないところ、もしくはもっといい方法があるとしたら教えていただきたいです。

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

回答2件

自己解決

swiper.jsとjQueryのライブラリを複合して制作することができました！

html
1<!-- scrollpaper -->
2                        <div id="sp-box" ontouchstart="">
3                            <img src="img/s-c-p.png" alt="">
4
5                            <div class="swiper-container">
6                                <div class="swiper-wrapper">
7                                    
8                                    <!---------------------------- コンテンツ1 ---------------------------->
9                                    <div class="swiper-slide">
10                                        <div class="slide-content">
11                                            <a class="js-modal-open1" href="">
12                                                <img src="img/bus.png" alt="Swiper01">
13                                            </a>
14                                        </div>
15                                    </div>
16                                    <!---------------------------- コンテンツ2 ---------------------------->
17                                    <div class="swiper-slide">
18                                        <div class="slide-content">
19                                            <a class="js-modal-open2" href="">
20                                                <img src="img/app.png" alt="Swiper02">
21                                            </a>
22                                        </div>
23                                    </div>
24                                    <!---------------------------- コンテンツ3 ---------------------------->
25                                    <div class="swiper-slide">
26                                        <div class="slide-content">
27                                            <a class="js-modal-open3" href="">
28                                                <img src="img/casy.png" alt="Swiper03">
29                                            </a>
30                                        </div>
31                                    </div>
32                                    <!---------------------------- コンテンツ4 ---------------------------->
33                                    <div class="swiper-slide">
34                                        <div class="slide-content">
35                                            <a class="js-modal-open4" href="">
36                                                <img src="img/rec.png" alt="Swiper04">
37                                            </a>
38                                        </div>
39                                    </div>
40
41                                </div> 
42                            </div> 
43                        </div>
44                    
45                        <!---------------------------- コンテンツ1-modal ---------------------------->
46                        <div class="modal js-modal1">
47                            <div class="modal__bg js-modal-close1"></div>
48                            <div class="modal__content">
49                                <img src="img/bus.png" alt="Swiper01">
50                                <a class="js-modal-close1" href="">閉じる</a>
51                            </div><!--modal__inner-->
52                        </div><!--modal--> 
53                        <!---------------------------- コンテンツ2-modal ---------------------------->
54                        <div class="modal js-modal2">
55                            <div class="modal__bg js-modal-close2"></div>
56                            <div class="modal__content">
57                                <img src="img/app.png" alt="Swiper02">
58                                <a class="js-modal-close2" href="">閉じる</a>
59                            </div><!--modal__inner-->
60                        </div><!--modal--> 
61                        <!---------------------------- コンテンツ3-modal ---------------------------->
62                        <div class="modal js-modal3">
63                            <div class="modal__bg js-modal-close3"></div>
64                            <div class="modal__content">
65                                <img src="img/casy.png" alt="Swiper03">
66                                <a class="js-modal-close3" href="">閉じる</a>
67                            </div><!--modal__inner-->
68                        </div><!--modal--> 
69                        <!---------------------------- コンテンツ4-modal ---------------------------->
70                        <div class="modal js-modal4">
71                            <div class="modal__bg js-modal-close4"></div>
72                            <div class="modal__content">
73                                <img src="img/rec.png" alt="Swiper04">
74                                <a class="js-modal-close4" href="">閉じる</a>
75                            </div><!--modal__inner-->
76                        </div><!--modal-->

css
1/* sp-box */
2#sp-box{
3    height: 40%;
4    text-align: center;
5    position: relative;
6    top: 20%;
7    animation: fluffy 3s ease 1s infinite alternate;
8}
9#sp-box img{
10    object-fit: cover;
11    height: 100%;
12}
13.swiper-container{
14    width: 40vh;
15    height: 50%;
16    margin: auto;
17    position: absolute;
18    bottom: 75%;
19    left: 5%;
20}
21.swiper-button-next::after, .swiper-button-prev::after {
22    content: none !important;
23}
24.swiper-slide img{
25    width: 70%;
26}
27.slide-content{
28    margin: 0 auto;
29    padding: 40px;
30
31    box-sizing: border-box;
32    margin: 0;
33    padding: 0;
34}
35.modal{
36    display: none;
37    height: 100vh;
38    position: fixed;
39    top: 0;
40    width: 100%;
41
42    box-sizing: border-box;
43    margin: 0;
44    padding: 0;
45}
46.modal__content img{
47    height: 80vh;
48}
49.modal__bg{
50    background: rgba(0,0,0,0.8);
51    opacity: 0.5;
52    height: 100vh;
53    position: absolute;
54    width: 100%;
55
56    box-sizing: border-box;
57    margin: 0;
58    padding: 0;
59}
60.modal__content{
61    left: 50%;
62    padding: 40px;
63    position: absolute;
64    top: 50%;
65    transform: translate(-50%,-50%);
66    width: 60%;
67
68    box-sizing: border-box;
69    margin: 0;
70    padding: 0;
71}
72.modal__content a{
73    color: #fff;
74    position: absolute;
75    right: -9%;
76}

javascript
1$(function(){
2    $('.js-modal-open1').on('click',function(){
3        $('.js-modal1').fadeIn();
4        return false;
5    });
6    $('.js-modal-close1').on('click',function(){
7        $('.js-modal1').fadeOut();
8        return false;
9    });
10});
11
12$(function(){
13    $('.js-modal-open2').on('click',function(){
14        $('.js-modal2').fadeIn();
15        return false;
16    });
17    $('.js-modal-close2').on('click',function(){
18        $('.js-modal2').fadeOut();
19        return false;
20});
21});
22
23$(function(){
24    $('.js-modal-open3').on('click',function(){
25        $('.js-modal3').fadeIn();
26        return false;
27    });
28    $('.js-modal-close3').on('click',function(){
29        $('.js-modal3').fadeOut();
30        return false;
31    });
32});
33
34$(function(){
35    $('.js-modal-open4').on('click',function(){
36        $('.js-modal4').fadeIn();
37        return false;
38    });
39    $('.js-modal-close4').on('click',function(){
40        $('.js-modal4').fadeOut();
41        return false;
42    });
43});

投稿2021/02/02 02:29

DrsriN

総合スコア11

transition でアニメーションをつければいいと思います。
transition - CSS: カスケーディングスタイルシート | MDN

投稿2021/01/29 05:30

Lhankor_Mhy

総合スコア36928

DrsriN

2021/01/29 05:45

スライドショーは動き続けている状態なのでイメージとしては http://mt-soft.sakura.ne.jp/web_dl/web-tool/popUpImage/index.html こういった感じにしたいです。

Lhankor_Mhy

2021/01/29 05:57

話が違う……つまり、モーダルウィンドウみたいなものが欲しかったのですね。

DrsriN

2021/01/29 06:03

すみません。。。モーダルウィンドウというのですね。言葉を知りませんでした。申し訳ないです。スライドの画像をクリックしたらモーダルウィンドウが開かれるようにしたいです。

Lhankor_Mhy

2021/01/29 06:14

ライブラリを使うのが手っ取り早いと思います。検索すればいろいろ出てくるのでは。または、dialog要素を使ってもいいかもです。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog

DrsriN

2021/01/29 06:30

ライブラリを使う...>>> もうここ二日検索してはライブラリを試してみてはいるのですが、スライドショー＋モーダルウィンドウを実現できるのはまだ見つけれてません。 slick.jsは下にサムネイルがついてしまうのと、ボタンを押さないとスライドしないのが難点でした。または、dialog...>>> なるほど、ありがとうございます。まだ試していないので試してみます！

Lhankor_Mhy

2021/01/29 06:39

ライブラリを使いこなすことができないから自製で、というのは「高尾山に登れなかったから富士山に行く」みたいな話だと思いますが、その方針で回答すればいいですか？

DrsriN

2021/01/29 06:46

すごくわかりやすい例えです。ですが、やりたいこと【スライドショーさせている画像をクリックするとモーダルウィンドウが開く（画像の拡大）】というのを実現できるライブラリーがありません。。。あれば使いたいのですが,,,

Lhankor_Mhy

2021/01/29 07:07

軽くググっただけですが、いくつか事例があるようです。 https://m-kenomemo.com/loop-slider-jquery/ https://www.webantena.net/javascriptjquery/jquery-plugin-pageslide/ https://blog.teorico.jp/%E3%80%90jquery%E3%80%91%E3%83%A2%E3%83%BC%E3%83%80%E3%83%AB%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6%E3%81%A8%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BC%E7%B3%BB%E3%83%97%E3%83%A9%E3%82%B0/ http://www.yabi-blog.xyz/jquery_bxslider_modal_popup/

DrsriN

2021/02/01 02:27

返信遅くなり大変申し訳ありません???? １つずつ試してみたのですが、私の力不足でスライドが何故だか起動しなかったり、画像がどこか行ってしまったりで実装することができません。フェードインフェードアウトするスライドショー、その画像をクリックするとモーダルウィンドウか何か画像を拡大させる機能、難しいです。。。

Lhankor_Mhy

2021/02/01 03:15

コードを見ないと何とも言えませんが、「スライドが何故だか起動しなかったり」とのことですから、とりあえずスライダーのライブラリを利用できるようになることを、短期的な目標にしてはどうですか？

DrsriN

2021/02/01 04:37

そうですね、そうしてみます！

DrsriN

2021/02/01 06:54

swiperを実行することができました！ここからモーダルウィンドウをつけてみようと思います。

Lhankor_Mhy

2021/02/01 07:00

がんばってください。