前提・実現したいこと
html,cssの基礎程度しかわからない初心者です。
izimodalを使用し、クリックして表示されたモーダルウィンドウから更にスライドで複数ページ表示させたいと考えています。
ページ内に表示された画像の中からクリックし、モーダルウィンドウ単体で開くものと、スライド式になるものとそれぞれ作成したいので、全ての画像をグループ化したいわけではありません。
しかし、class名を共通にし、jqueryもテンプレ通り記述(コピペ)しているのですが、グループ化しているコンテンツを認識してくれず、スライド自体は行えますが、最初に記述した画像が表示されてしまい困っています。
該当のソースコード
<a href="#modal" class="modal" data-iziModal-open=".iziModal"></a>
<div id="modal" class="modalbox iziModal"> <div class="overlay"></div> <div class="contents"> <img src=""" alt=""> </div> </div><a href="#modal" data-izimodal-open=".iziModalgroup" class="modalgroup">ボタン</a>
<div class="iziModalgroup"> <div class="overlay></div> <div class="contents> <img src="" alt=""> </div> </div> <div class="iziModalgroup"> <div class="overlay></div> <div class="contents> <img src="" alt=""> </div> </div>jquery↓
<script type="text/javascript"> $(function() { $(".iziModal").iziModal(); }) </script><script> $(function() { $(".iziModalgroup").iziModal({ group: "group01", }); }) </script>
試したこと
jqueryの設定をタグに直接してもみましたが、同様に.iziModalgroupを認識せず、
.iziModalの最初の画像が表示されてしまいます。loopも外すと矢印キーも左側にしか表示されません。
class名の付け方に問題があるのでしょうか。自分なりに調べて試してみましたが、変わらず行き詰っています。
そもそも根本的に記述に問題があるのか、他にベストな方法があればご教授お願いいたします。
補足情報(FW/ツールのバージョンなど)
HTML5
CSS3
Bracketsを使用しています。
あなたの回答
tips
プレビュー