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

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

新規登録して質問してみよう
ただいま回答率
85.48%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

2508閲覧

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

iromaru

総合スコア12

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2019/06/16 07:29

前提・実現したいこと

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2019/07/01 07:04

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

2019/07/01 09:37

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問