実現させたいことは、写真のサムネイルをクリック後、ポップアップ時に任意のテキストを画像の下部に表示させたいです。
以下の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; } } });
回答1件
あなたの回答
tips
プレビュー