質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.13%

izimodalを使用し、モーダルウィンドウ単体表示と、複数ページのスライド表示を行いたいです。

受付中

回答 0

投稿

  • 評価
  • クリップ 1
  • VIEW 1,127

iromaru

score 12

前提・実現したいこと

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を使用しています。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • x_x

    2019/07/01 16:04

    試してみましたがとくに問題は起こりませんでした。
    引用符「"」がいくつか抜けているので補ってもらったうえで、使っているバージョンを追記したもらえますか?

    キャンセル

  • iromaru

    2019/07/01 18:37

    その後、再度1から書き直し試してみたら作動しました・・・。
    初歩的な記述ミスだったのかもしれません。
    お手数おかげ致しました。ご回答ありがとうございました!

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • HTMLに関する質問
  • izimodalを使用し、モーダルウィンドウ単体表示と、複数ページのスライド表示を行いたいです。