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

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

新規登録して質問してみよう
ただいま回答率
85.46%
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

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

jQuery

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

Q&A

解決済

1回答

602閲覧

jQueryパッケージ の内容変更

mbaby__8

総合スコア66

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2020/09/04 03:45

編集2020/09/04 04:00

mini-previewでリンク先のコンテンツをホバーでプレビュー表示出来るようになったのですが、
イメージ説明

現在はページのすべてをプレビューされているのですが、
例えば、h2要素だけ表示したり、
ある特定のクラス要素の中のpタグ,imgのみ表示したい場合
下記jsファイルのどの箇所を変更すれば、そのように出来るようになるでしょうか?

また変更したらmini-preview自体が使えなくなるといったことはありますか?

教えて頂けると幸いです。

/* * MiniPreview v0.9 * * @author Will Boyd * @github http://github.com/lonekorean/mini-preview */ (function($) { var PREFIX = 'mini-preview'; // implemented as a jQuery plugin $.fn.miniPreview = function(options) { return this.each(function() { var $this = $(this); var miniPreview = $this.data(PREFIX); if (miniPreview) { miniPreview.destroy(); } miniPreview = new MiniPreview($this, options); miniPreview.generate(); $this.data(PREFIX, miniPreview); }); }; var MiniPreview = function($el, options) { this.$el = $el; this.$el.addClass(PREFIX + '-anchor'); this.options = $.extend({}, this.defaultOptions, options); this.counter = MiniPreview.prototype.sharedCounter++; }; MiniPreview.prototype = { sharedCounter: 0, defaultOptions: { width: 256, height: 144, scale: .25, prefetch: 'pageload' }, generate: function() { this.createElements(); this.setPrefetch(); }, createElements: function() { var $wrapper = $('<div>', { class: PREFIX + '-wrapper' }); var $loading = $('<div>', { class: PREFIX + '-loading' }); var $frame = $('<iframe>', { class: PREFIX + '-frame' }); var $cover = $('<div>', { class: PREFIX + '-cover' }); $wrapper.appendTo(this.$el).append($loading, $frame, $cover); // sizing $wrapper.css({ width: this.options.width + 'px', height: this.options.height + 'px' }); // scaling var inversePercent = 100 / this.options.scale; $frame.css({ width: inversePercent + '%', height: inversePercent + '%', transform: 'scale(' + this.options.scale + ')' }); // positioning var fontSize = parseInt(this.$el.css('font-size').replace('px', ''), 10) var top = (this.$el.height() + fontSize) / 2; var left = (this.$el.width() - $wrapper.outerWidth()) / 2; $wrapper.css({ top: top + 'px', left: left + 'px' }); }, setPrefetch: function() { switch (this.options.prefetch) { case 'pageload': this.loadPreview(); break; case 'parenthover': this.$el.parent().one(this.getNamespacedEvent('mouseenter'), this.loadPreview.bind(this)); break; case 'none': this.$el.one(this.getNamespacedEvent('mouseenter'), this.loadPreview.bind(this)); break; default: throw 'Prefetch setting not recognized: ' + this.options.prefetch; break; } }, loadPreview: function() { this.$el.find('.' + PREFIX + '-frame') .attr('src', this.$el.attr('href')) .on('load', function() { // some sites don't set their background color $(this).css('background-color', '#fff'); }); }, getNamespacedEvent: function(event) { return event + '.' + PREFIX + '_' + this.counter; }, destroy: function() { this.$el.removeClass(PREFIX + '-anchor'); this.$el.parent().off(this.getNamespacedEvent('mouseenter')); this.$el.off(this.getNamespacedEvent('mouseenter')); this.$el.find('.' + PREFIX + '-wrapper').remove(); } }; })(jQuery);

イメージとしてはwikipediaのプレビューくらいの感じです。
イメージ説明

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

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

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

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

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

guest

回答1

0

ベストアンサー

そのプラグインとWikipediaのポップアップとではやってることが全然ちがいます。

そのプラグインはリンク先をiframeで表示していますが、Wikipediaの場合、 リンク先の情報をAPI()から取得して、得られた情報を表示しています。

(蛇足ですがちなみにこのプラグインではiframeを使用しているため今時のX-Frame-Optionsで埋め込み拒否しているようなページ……たとえばGitHubなど……はプレビューできません)

同一オリジン内のページであればXHR(ajax)などでリンク先HTMLを直接よみこみ、パースすることで目的が達成できるでしょうが、例で示されているような場合はCORS制約のためそうはいかないでしょう。

サーバー側に動的な実装が可能なのであれば自前でAPIを用意してページの情報をとりにいっても構いません(節度のあるリクエストが求められます)が、embedlyのAPIなどが代替に使えるかもしれません。

このプラグインを書きかえてそれに対応する場合、loadPreviewの部分をはじめ、大部分を書きかえることになるので詳細は省略します。

投稿2020/09/04 04:54

hina

総合スコア132

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問