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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

1回答

3712閲覧

Magnific PopupのjQueryで任意のテキストをポップアップ時のみ追加したい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2016/07/08 04:19

編集2016/12/17 01:41

実現させたいことは、写真のサムネイルをクリック後、ポップアップ時に任意のテキストを画像の下部に表示させたいです。
以下のreturn を挿入すると表示されるのですが、thumbnail images navigationが消えてしまいます。
// return item.el.attr('title') + item.el.attr('data-caption');

ご教授いただけますと幸いです。

参考サイトになります。
トップページの新着物件の写真5枚の箇所が実装場所になります。

//index news-works 5件 $('.news-works-container').magnificPopup({ delegate: 'a.new-works-img', // 子要素のセレクタ type: 'image', tLoading: 'Loading image #%curr%...', mainClass: 'mfp-img-mobile', gallery: { enabled: true, navigateByImgClick: true, preload: [0,1] // Will preload 0 - before current, and 1 after the current image }, image: { tError: '<a href="%url%">The image #%curr%</a> could not be loaded.', titleSrc: function(item) { // return item.el.attr('title'); var $gallery = $('.news-works-container'); var $result = ''; if ($gallery.find('li').length>0) { // return item.el.attr('title') + item.el.attr('data-caption'); $result = '<div class="mfp-pager">' + '<div class="dots">' + '<ul class="dots" style="display: inline-block;">'; for (var i=0; i<$gallery.find('li').length; i++) { var $cl_active = ''; if (item.index == i) $cl_active = ' class="active"'; else $cl_active = ''; var $thumb = $gallery.find('li:eq('+i+')').find('img').attr('src'); $result += '<li'+$cl_active+'>' + '<button type="button" onclick="javascript:$(\'.news-works-list\').magnificPopup(\'goTo\', '+i+');return false;"><img src="' + $thumb + '" width="100"></button>' + '</li>'; } $result += '</ul>' + '</div>' + '</div>'; } return $result; } } });

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

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

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

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

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

kei344

2016/07/08 04:54

URLにはリンクがはれます。また、Magnific Popupの配布元などの情報を追加するほうが回答を得やすいと思います。
Lhankor_Mhy

2016/07/08 08:20

補足願います。消えてしまうという「thumbnail images navigation」とはなんですか?
退会済みユーザー

退会済みユーザー

2016/07/08 08:34

'<div class="dots">' 内のul liにサムネイルギャラリーを表示させております。
退会済みユーザー

退会済みユーザー

2016/07/08 08:35

ページネーションをimgに差し替えしております。
退会済みユーザー

退会済みユーザー

2016/07/08 09:28

thumbnail images navigationは仮の名前になりますので、存在はしません。
kei344

2016/07/08 14:52

「参考サイト」のリンク先にBASIC認証がかかっています。
退会済みユーザー

退会済みユーザー

2016/07/08 15:16

すみません、ベーシック認証解除いたしました。 よろしくお願いします。
guest

回答1

0

ベストアンサー

HTMLの構造的におかしな所もありますが、多分調整中なのでしょう。

以下のreturn を挿入すると表示されるのですが、thumbnail images navigationが消えてしまいます。

関数内で return すると、それ以降のスクリプトは動きません。

JavaScript

1titleSrc: function(item) { 2 // return item.el.attr('title'); 3 var $gallery = $('.news-works-container'); 4 var $result = ''; 5 if ($gallery.find('li').length>0) { 6 // return item.el.attr('title') + item.el.attr('data-caption'); 7 $result = '<div class="mfp-pager">' + 8 '<div class="dots">' + 9 '<ul class="dots" style="display: inline-block;">'; 10 for (var i=0; i<$gallery.find('li').length; i++) { 11 var $cl_active = ''; 12 if (item.index == i) $cl_active = ' class="active"'; else $cl_active = ''; 13 var $thumb = $gallery.find('li:eq('+i+')').find('img').attr('src'); 14 $result += '<li'+$cl_active+'>' + 15 '<button type="button" onclick="javascript:$(\'.news-works-list\').magnificPopup(\'goTo\', '+i+');return false;"><img src="' + $thumb + '" width="100"></button>' + 16 '</li>'; 17 } 18 $result += '</ul>' + 19 '</div>' + 20 '</div>'; 21 } 22 // return $result; 23 return item.el.attr('title') + item.el.attr('data-caption') + $result; 24}

投稿2016/07/08 15:32

kei344

総合スコア69364

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

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

退会済みユーザー

退会済みユーザー

2016/07/08 16:16

ご回答いただきありがとうございます。 >関数内で return すると、それ以降のスクリプトは動きません。 無事imgのtitleを取得、表示されました。 htmlで書いたテキストをポップアップ時のみ表示させる場合は、別の方法になりますでしょうか。
kei344

2016/07/08 16:40

> htmlで書いたテキスト どういうものを想定しているかがわかりません。 「item.el.attr('title')」も「item.el.attr('data-caption')」もHTMLの要素の属性の値です。
退会済みユーザー

退会済みユーザー

2016/07/08 16:48

imgタグ内のtitle、altからではなく、a.new-works-img内でpやdivで記述したテキストをポップアップ時に取得し、表示させることは可能でしょうか。 type:inlineで表示するexampleは確認したのですが、現状のソースに導入する方法が分かりません。 よろしくお願いします。
kei344

2016/07/08 17:07

ソースをもう一度見ましたが、現在無い要素(pやdiv)について、取得したいというのは無理でしょう。 質問文のコードはどこかからコピペで仕入れられたのでしょうか。前任者がおられるのでしょうか。冗長ではありますが、そのコード自体が「今開いている li(中に.new-works-imgがある) の情報」を探しているので、それを参照ください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問