モーダル表示からタップで画像切り替え

Question

基本的な質問ですみませんが
ご教授いただけますと幸いです。

実現したいこと

1. ページを開いたらモーダル表示
2. モーダルで開いた要素内にある画像をタップで切り替え
3. 最後の画像をタップでモーダルを閉じる

発生している問題

モーダルを別々にしているのがそもそもダメなのでしょうか・・・
最後の画像判定のところでモーダルを閉じる処理をすればよいのかという
単純なものではなさそうでして。

ソースコード

<div id="change" class="modal">
<img alt="">
</div>

-----------------------------------------------------------------
<script>
$(function(){
window.onload = function(){
$('.modal').fadeIn();
return false;
}

$(function(){
  const imgs = ['01.png','02.png', '03.png', '04.png', '05.png'];  
  let index = 0; 

  $('.img').attr('src', 'images/' + imgs[index]);
  

  $('#change').click(function(){

    if(index == imgs.length - 1){
      index = 0;
    }else{
      index++;
    }

   $('.img').attr('src', 'images/' + imgs[index]);
  });
});
</script>

Answer 1

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const dlg=document.querySelector('dialog');
  const img=document.querySelector('dialog img');
  const imgs=[
    "https://placehold.jp/00ff00/00000/100x100.png?text=2",
    "https://placehold.jp/0000ff/00000/100x100.png?text=3",
    "https://placehold.jp/ffff00/00000/100x100.png?text=4",
    "https://placehold.jp/00ffff/00000/100x100.png?text=5",
    ];
  let count=0;
  img.addEventListener('click',()=>{
    if(count>=imgs.length) dlg.close();
    img.src=imgs[count];
    count++;
  });
  dlg.showModal();
});
</script>

<dialog>
<img src="https://placehold.jp/ff0000/00000/100x100.png?text=1"><br>
click image!
</dialog>

スクロールしてからモーダルを開く

<style>
.dummy{
height:150%;
  background-Color:gray;
}
#target{
background-Color:red;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', async()=>{
  const dlg=document.querySelector('dialog');
  const img=document.querySelector('dialog img');
  const imgs=[
    "https://placehold.jp/00ff00/00000/100x100.png?text=2",
    "https://placehold.jp/0000ff/00000/100x100.png?text=3",
    "https://placehold.jp/ffff00/00000/100x100.png?text=4",
    "https://placehold.jp/00ffff/00000/100x100.png?text=5",
    ];
  let count=0;
  img.addEventListener('click',()=>{
    if(count>=imgs.length){
      dlg.close();
      return;
    }
    img.src=imgs[count];
    count++;
  });
  let timerId;
  let onScroll = ()=>{
    clearTimeout(timerId);
    timerId = setTimeout(()=>{
      dlg.showModal();
      window.removeEventListener('scroll',onScroll);
    },100);
  };
  window.addEventListener('scroll',onScroll);
  window.scrollTo({
  top: document.body.scrollTop+target.getBoundingClientRect().top,
  behavior: "smooth",
  });
});
</script>
<dialog>
<img src="https://placehold.jp/ff0000/00000/100x100.png?text=1"><br>
click image!
</dialog>
<div class="dummy"></div>
<div id="target">target</div>
<div class="dummy"></div>

targetの75%以上が表示されたらモーダルをだす

<style>
.dummy{
height:150%;
  background-Color:gray;
}
#target{
background-Color:red;
height:50%;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', async()=>{
  const dlg=document.querySelector('dialog');
  const img=document.querySelector('dialog img');
  const imgs=[
    "https://placehold.jp/00ff00/00000/100x100.png?text=2",
    "https://placehold.jp/0000ff/00000/100x100.png?text=3",
    "https://placehold.jp/ffff00/00000/100x100.png?text=4",
    "https://placehold.jp/00ffff/00000/100x100.png?text=5",
    ];
  let count=0;
  img.addEventListener('click',()=>{
    if(count>=imgs.length){
      dlg.close();
      document.body.style.overflowY="auto";
      return;
    }
    img.src=imgs[count];
    count++;
  });
  const onScroll = ()=>{
    const observer = new IntersectionObserver(changes=>{
      for (let change of changes) {
        if(change.intersectionRatio >= 0.75){
          document.body.style.overflowY="hidden";
          dlg.showModal();
          window.removeEventListener('scroll',onScroll);
        }
      }
    });
    observer.observe(document.querySelector('#target'));
  };
  window.addEventListener('scroll',onScroll);
});
</script>
<dialog>
<img src="https://placehold.jp/ff0000/00000/100x100.png?text=1"><br>
click image!
</dialog>
<div class="dummy"></div>
<div id="target">target</div>
<div class="dummy"></div>

localStorageでページごとにチェックをする

// prev.html

<script>
const checked=new Set(JSON.parse(localStorage.getItem('checked')??"[]"));
window.addEventListener('DOMContentLoaded', ()=>{
  console.log(checked);
  btn_s.addEventListener('click',()=>{
    checked.add(location.href);
    localStorage.setItem('checked',JSON.stringify([...checked]));
    console.log(checked);
  });
  btn_r.addEventListener('click',()=>{
    checked.delete(location.href);
    localStorage.setItem('checked',JSON.stringify([...checked]));
    console.log(checked);
  });
});
</script>

<input type="button" id="btn_s" value="set">
<input type="button" id="btn_r" value="remove">
<a href="next.html">next.html</a>

// next.html

<script>
const checked=new Set(JSON.parse(localStorage.getItem('checked')??"[]"));
window.addEventListener('DOMContentLoaded', ()=>{
  console.log(checked);
  btn_s.addEventListener('click',()=>{
    checked.add(location.href);
    localStorage.setItem('checked',JSON.stringify([...checked]));
    console.log(checked);
  });
  btn_r.addEventListener('click',()=>{
    checked.delete(location.href);
    localStorage.setItem('checked',JSON.stringify([...checked]));
    console.log(checked);
  });
});
</script>

<input type="button" id="btn_s" value="set">
<input type="button" id="btn_r" value="remove">
<a href="prev.html">prev</a>

Comments

[yukoneko]

まさに、動き的に作りたいもので感謝しかありません。。
ありがとうございます！！
一つ、お伺いさせていただければなのですが
これがスクロール後、エリア指定で表示というようになると
最初の書き出しを変更で実現できますでしょうか？

[yambejp]

念のため流れを確認いたします。
ページ開く→どこかにスクロールする→モーダル開く→画像をクリック終わったら閉じる
ということでよろしいでしょうか？

[yukoneko]

返信ありがとうございますm(_ _)m
はい！おっしゃる通りで動きを付けたいのですが
エリア指定すると、ページに訪れるたびには出て大丈夫なのですが
設定の仕方が悪いのか、エリアを通過した後にもどると再び表示されてしまうという・・・

[yambejp]

私の追記したバージョンは想定と動作がちがいますか？

[yukoneko]

ありがとうございます！
すみません、ページを開いてスクロールをしていった先のエリアに入った場合に？
という動きなのですが
var windowH = $(window).height();
var scroll = $(window).scrollTop();

var contentsTop = Math.round($('#area').offset().top);
var contentsH = $('#area').outerHeight(true);
というようなスクロールしていった先で出現！というのを想定しておりますm(_ _)m

[yambejp]

特定のエリアが表示されたらという意味でしょうか？
IntersectionObserverなど交差処理が楽かもしれません。
いずれにしろ仕様がはっきりしないと回答がしづらいです

[yukoneko]

すみません！特定のエリアが表示されたらです。
IntersectionObserverは時差表示？というものでしょうか

[yambejp]

「特定のエリアが表示されたら」の定義次第です。
特定エリアの一部もしくは全部が表示される場合、どのくらいの割合でどうなったらどうしたい
という仕様を決める必要があります

IntersectionObserverは交差オブザーバーといってある要素の可視状態を検出する処理です
https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API

ちょっと深読みして追記しておきました。何か違うようなら指摘してください

[yukoneko]

返信が遅れてすみません！
おかげさまでご教授いただいた内容で思った形に実装ができました！！！
ありがとうございます！
ひとつ、エリアがスクロールで戻ってしまうのを制御するのには
「sessionStorage」を使うのかなと思い、チャレンジしてみているのですが
なかなか解決できないでいますm(_ _)m

[yambejp]

> エリアがスクロールで戻ってしまうのを制御する

状況がわかりません。なにがどうなっているのが想定と違うのでしょうか？

[yukoneko]

あ、エリアに戻ると再び表示が出てしまう・・・のを制御したいです。
localStorageだと、初回のみ？のようで。
ページ訪問ごとで最初の1回だけ表示したい・・・という感じです。

[yukoneko]

ページに訪問する
↓
ターゲットエリアに入る
↓
表示が出る、閉じる
↓
スクロールで上部に戻ると再び表示が出る

という感じです。
戻ることはあまり想定してないページの作りではあるのですが・・・。

[yukoneko]

たびたびすみません！

「スクロールしてからモーダルを開く」の方で
実装させていただきましたらターゲットに戻った場合に表示が出なくなりましたm(_ _)m
何度も色々と質問しまして、ご丁寧に回答いただきまして大変感謝いたします！

[yambejp]

複数ページで１回ずつ表示するということですか？
もう完全に元の質問から逸脱していますよね？
localStorageのサンプルだけつけておきますので理解を深めてください

[yukoneko]

本当に、何度も、お手数おかけして失礼しました。
誠にありがとうございます！
しっかり勉強いたします。