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

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

ただいまの
回答率

87.93%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,586

実現させたいことは、写真のサムネイルをクリック後、ポップアップ時に任意のテキストを画像の下部に表示させたいです。
以下の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;
            }
        }
    });
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • thomas_maverick

    2016/07/08 18:28

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

    キャンセル

  • kei344

    2016/07/08 23:52

    「参考サイト」のリンク先にBASIC認証がかかっています。

    キャンセル

  • thomas_maverick

    2016/07/09 00:16

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

    キャンセル

回答 1

checkベストアンサー

0

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

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

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

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;
    return item.el.attr('title') + item.el.attr('data-caption') + $result;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/07/09 01:16

    ご回答いただきありがとうございます。
    >関数内で return すると、それ以降のスクリプトは動きません。

    無事imgのtitleを取得、表示されました。
    htmlで書いたテキストをポップアップ時のみ表示させる場合は、別の方法になりますでしょうか。

    キャンセル

  • 2016/07/09 01:40

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

    キャンセル

  • 2016/07/09 01:48

    imgタグ内のtitle、altからではなく、a.new-works-img内でpやdivで記述したテキストをポップアップ時に取得し、表示させることは可能でしょうか。

    type:inlineで表示するexampleは確認したのですが、現状のソースに導入する方法が分かりません。

    よろしくお願いします。

    キャンセル

  • 2016/07/09 02:07

    ソースをもう一度見ましたが、現在無い要素(pやdiv)について、取得したいというのは無理でしょう。

    質問文のコードはどこかからコピペで仕入れられたのでしょうか。前任者がおられるのでしょうか。冗長ではありますが、そのコード自体が「今開いている li(中に.new-works-imgがある) の情報」を探しているので、それを参照ください。

    キャンセル

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

  • ただいまの回答率 87.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る