jQueryでファイル選択時にプレビュー表示する方法
jQueryでファイル選択時にプレビュー表示する方法を紹介します。 １．はじめに フォームのファイル選択で画像を選択したときに画像のプレビューを表示したい場合があると思います。 ということで、jQueryを使って画像をプレビュー表示する方法を紹介します。 ２．ファイル選択時にプレビュー表示する まず、下記のファイル選択フォームを用意します。 <form> <input type="file" id="file" /> </form> <div id="result"></div> そして次のjQueryを追加します。 <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script> $(function(){ $('#file').change(function(){ $('img').remove()
Movable Typeのテンプレートで任意のページのプレビューができる「TemplatePreviewSelectorプラグイン」
Movable Typeのテンプレートで任意のページのプレビューができる「TemplatePreviewSelectorプラグイン」を公開します。 １．基本 Movable Typeのインデックステンプレートおよびアーカイブテンプレートには、テンプレートをプレビューする機能があります。 インデックステンプレートは、テンプレートで出力されるページが1ページしかないため、プレビューする内容と出力内容が一致しています。 が、アーカイブページは複数のページが存在するにもかかわらず、プレビューでは特定のページ（下記）しかプレビューすることができません。 カテゴリアーカイブ：一番古いカテゴリ 月別アーカイブ：最新の年月 ブログ記事アーカイブ：最新のブログ記事 ウェブページアーカイブ：最新のウェブページ 「TemplatePreviewSelectorプラグイン」を利用すれば、任意の年月・記事・カテゴリ
Webページの印刷プレビューを見やすく素早く表示させるjQueryプラグイン・Print Preview - かちびと.net
Webページの印刷プレビューを、 その場で見やすく素早く表示 させるjQueryプラグインです。 地味だけど結構良かったです。 IEには対応して無い様ですが、 印刷が必要なページに導入する と良いユーザービリティになるかも。 この手のライブラリは個人的に初見だったので備忘録的にご紹介します。 このようにその場で直ぐにプレビューを表示させる事が出来ます。プラグインを導入すると、プレビュー用のボタンが指定した箇所に表示されます。また、ショートカット（WinならCtrl+P）でも同じエフェクトでプレビューが表示されます。 通常のブラウザの機能の印刷プレビューでも確認したところ、確かに別途用意したprint.cssを読み込んでくれているようでした。 ご覧いただいたほうが早そうです。右サイドバーの最上部にプレビューボタンがあります。※IEは対応していませんでした Sample 【追記】 対応していな
3分LifeHacking：Windowsの右クリックメニューに画像のプレビューを追加する - ITmedia エンタープライズ
デスクトップ上に置かれた画像ファイル。中身を確認するためにはダブルクリックしてビュワーを起動する必要がある。縮小アイコンを表示する場合もあるが、サイズが小さすぎて内容を正確に判別できない場合も多い ネットで拾った画像やメール添付で送られてきた画像など、出どころ不明の画像を大量に抱えている人は多いだろう。すぐに見ようと思ってデスクトップ上やダウンロードフォルダに保存し、その後そのまま忘れ去ってしまったというパターンだ。 そうした画像を整理整頓するためには、1枚ずつビュワーで開けて内容を確認する必要があるわけだが、枚数が多いとかなりの手間だ。エクスプローラのアイコン表示を「特大」や「大」あたりにしておけば1枚ずつ開かなくても判別できるが、中途半端な枚数であれば、むしろ表示モードを切り替える方が煩わしかったりする。 こうした場合に便利なのが、今回紹介する「FastPreview」だ。このソフトを
サイト全体のプレビュー画像をサイトサイドに出力してくれるjQuery「jQuery.frace」
一枚に連なった、長いWEBページも最近増えてきていて、ユーザーにとっては全体像がよくわからなかったりするなんていうときが時にはあるかもしれません。そこで今回紹介するのは、サイト全体のプレビュー画像をサイトサイドに出力してくれるjQuery「jQuery.frace」。 上記のようにサイトのサイドバーに全体を縮小してどの範囲が見えているかを直感的に理解できるような機能を付加できます。 詳しくは以下 jQueryのプラグインとして制作されていますので、組込みも比較的簡単で、様々なオプションの値が予め準備されていて、どこに出現させるか、表示のスタイルなども簡単に制御可能です。 縮小画像からもビューワーのように移動することが可能で、ただ表示させるだけではなくユーザーインターフェースとしても利用できるようになっています。アイデアしだいで面白い使い方ができそうですね。ダウンロードや詳しいTIpsは公式
簡単なコードでリンク先をサムネイルプレビューできるjQueryプラグイン「jLinkPreview」:phpspot開発日誌
簡単なコードでリンク先をサムネイルプレビューできるjQueryプラグイン「jLinkPreview」 2011年06月15日- jLinkPreview 簡単なコードでリンク先をサムネイルプレビューできるjQueryプラグイン「jLinkPreview」のご紹介。 リンクを合わせたときにリンク先のイメージが分かるといいですが、それをjQueryプラグインの形で、簡単に実装できます。 サムネイル画像にはwimg.caというサービスが使われています。 サムネイル表示の例 使い方は以下のように初期化すればよいみたい。 画像のプレロードや、サムネイルサイズ（幅・高さ）、フェードや背景色など自在にカスタマイズできますね プラグインもそこまで大きくないため、サムネイルのプロバイダを変更するのもソースをちょこちょこっと変えれば対応できます。 関連エントリ テキストシャドウを自在にアニメーションさせられる
コメントプレビューでカスタムフィールドの値を表示する
Movable Typeのコメントプレビュー画面でコメントのカスタムフィールドの値を引き継いで表示するカスタマイズを紹介します。 １．問題点 コメントのカスタムフィールドをコメント投稿フォームに表示する方法は次のようになっています。 <input type="hidden" name="blog_id" value="<MTBlogID>" /> <input type="hidden" name="customfield_beacon" value="1" id="customfield_beacon" /> <mt:CommentCustomFields> <mt:SetVarBlock name="custom_field_name"><$mt:CustomFieldName$></mt:SetVarBlock> <mt:SetVarBlock name="field-content
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
