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

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

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

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

HTML

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

Q&A

解決済

2回答

315閲覧

エラーの意味を教えてください

sobaopi_ti

総合スコア10

jQuery

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

HTML

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

0グッド

0クリップ

投稿2018/02/11 09:54

編集2018/02/12 14:49

サムネイルをクリックすると画像が大きく表示されるタイプのギャラリーを作っています。
色々調べてこちらのサイトを参考に試してみました。
ギャラリー表示を試したのですが、サムネイルをクリックしてもリンク先の画像が表示されるだけで次の画像に移るページャー?が出ませんでした。
chromeのデベロッパーツールで確かめたら画像のエラーが出ました。色々調べてみたのですが自分の力では分からなかったので、こちらにお聞きします。
エラーの意味と対処法を教えていただきたいです。
イメージ説明

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

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

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

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

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

x_x

2018/02/12 15:57

ソースコードは提示できないのでしょうか?
guest

回答2

0

ベストアンサー

magnificpopup() を magnificPopup() に変えてみてください。

投稿2018/02/12 14:58

Zuishin

総合スコア28656

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

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

sobaopi_ti

2018/02/13 03:09

こんにちは!その通りにしてみたらギャラリー表示になりました!本当にありがとうございました!
guest

0

初めまして。
サムネイルをクリックして画像をモーダル表示する方法はたくさんございます。
基本的なモーダルでしたらjqueryで実装するパターンとライブラリを使用するパターンがあります。
学校でwebページを作っていることのことですので、jqueryを使っての実装よりはライブラリを使用しての方がリッチで簡単に実装できるかと思います。
現場で使用されることが多いのが、MagnificPopupというライブラリです。(下記URL参照)
https://qiita.com/katsunory/items/cf0e0647204ada26ece0

サイト内で紹介されている通り、基本的なポイントは、
1.head内に指定のファイルを読み込むこと
2.aタグにclassを指定すること
3.jqueryを記述することです。

サイト内で詳しく掲載されているので上から順番に実装していけば問題ないかと思います。
実際にこちらのサイト内でMagnificPopupを使用しているので参考になれば良いかと思います。
https://ciao-iiasenagase.ssl-lolipop.jp/

投稿2018/02/11 12:59

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

sobaopi_ti

2018/02/12 09:46

回答をいただいてから試してみたのですがうまくいかなかったところが出てきました。質問に追記を加えましたので、よろしければ見ていただけると幸いです。
退会済みユーザー

退会済みユーザー

2018/02/12 10:05 編集

惜しいですね。 まずは、 functionは<script></script>で括ってあげましょう! cssファイルとjsファイルのパスはあってますか?
sobaopi_ti

2018/02/12 11:11

とりあえずfunctionは表示されなくなりました!ありがとうございます。 パスがあっているかどうかはどうやって確認するんでしょうか…?一応、ファイルの名前とファイルの場所?は同じでした。あと、質問を再編集しましたので、よろしくお願いします。
退会済みユーザー

退会済みユーザー

2018/02/12 15:00 編集

chromeのディベロッパーツール使ったことございますか?? パスなどが正常に通ってない等。。エラーがある場合はchromeのディベロッパーツールでコンソールエラーで何処で何がエラーが起きているのか表示されているので、正常に動かない時はこちらを確認すると良いですよ。 以下、私のローカル環境で実装したデータを共有いたしますね! もし動かなかったらまたご連絡ください!よろしくお願いします。 <!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta charset="utf-8"> <meta name="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="./css/magnific-popup.css"> </head> <body> <div class="l-section"> <section class="photos"> <p class="photos__item"><a href="./img/thumb01.jpg"><img src="./img/thumb01.jpg"></a></p> <p class="photos__item"><a href="./img/thumb02.jpg"><img src="./img/thumb02.jpg"></a></p> </section> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="./js/jquery.magnific-popup.js"></script> <script> $(function(){ $('.photos').magnificPopup({ delegate: 'a', type: 'image', gallery: { //ギャラリー表示にする enabled:true } }); }); </script> </body> </html>
sobaopi_ti

2018/02/12 14:57

こんばんは。重ね重ねすみません。chromeのデベロッパーツールで確認してみました。3個エラーが出ていて、そのうち2個は自分で対応できたのですが、あと1個がどうしても分からないのでお力添え頂ければと思います。 (共有していただいたデータですが、上手く扱えずエラー3個警告?1個も出てしまい対処法が分からなかったのでとりあえずエラーが少なかったほうで作業を続行しました。共有していただいたのにも関わらず、すみません。)
sobaopi_ti

2018/02/13 03:18

こんにちは、お返事前にすみません。 最初の質問のときからとても親身になって教えていただきありがとうございました。 エラーが出たので再度質問を編集しましたところ、別の回答者さまにエラーの対処法を教えていただいて、無事にギャラリーの形を作ることができました。 素早いお返事に何度も助けていただいたのですが、今の質問でのベストアンサーはエラーの対処法を教えていただいた回答者様になってしまうので、お詫びします。 たくさんの回答とコメント本当にありがとうございました、こんなに親身になっていただいたのに心苦しいですが、別の方をベストアンサーに選ばせていただきます。 本当にすみません、ありがとうございました。
退会済みユーザー

退会済みユーザー

2018/02/13 04:46

お気になさらないでください。 無事ギャラリーが表示されて良かったです!微力ながらですが、またの機会がございましたら助太刀できればと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問