WordPressプラグインなしでLazy Loadを実装する方法
2015/07/14 (更新日: 2017/09/18) WordPressプラグインなしでLazy Loadを実装する方法 PROGRAMMING WordPress 画像読み込みを遅延させたほうがSEOに良いとのことで、遅延読み込みを実装しました。実装先は現在運営中のPhil Portalです。全記事に実装していますので、デモ変わりにご覧ください。 » デモ用記事：フィリピン留学で失敗する『ゆるふわ留学生』が続出している件【出合いに感謝！】 Lazy Loadプラグインを利用 Lazy Loadプラグインを利用します。数多くのサイトで紹介されており信頼できるプラグインです。 » Lazy Load Plugin for jQuery ダウンロードはgithubからどうぞ。ファイルがいっぱいありますが、使うのは「jquery.lazyload.min.js」だけです。 » tuupola
高機能ファイルアップロードjQueryプラグイン｜ドラッグ＆ドロップ、プログレスバー、オーディオ、ビデオ、各種ファイルサポート対応
高機能で美しい インターフェイスはやはり2015年度版という感じはしますが、UIはある程度設定で変更出来ます。インターフェイスデザインは5年たったらがらりと流行りが変わるので便利かもしれませんね。 ドラッグ&ドロップサポート もちろん普通にアップロードする事も可能ですが、それ以外にドロップアンドドロップにも対応しているという事です。 同時に複数のファイルをアップロード可能 幾つかのファイルを同時にアップすることが出来ます。先にアップロードするファイルを選び、一斉アップロードも出来ますし、一つ一つアップロードすることも可能です。 対応デスクトップブラウザ まさかのIE6から対応。 Google ChromeApple Safari 4.0+Mozilla Firefox 3.0+Opera 11.0+Microsoft Internet Explorer 6.0+ 対応モバイルブラウザ Ap
サイト内テキストの絵文字、動画、PDF、ソースコード、Tweet等の自動変換が行える「Embed.js」:phpspot開発日誌
Embed.js | Plugin to convert text into image-based emoticons,supports automatic embedding for media URL サイト内テキストの絵文字、動画、PDF、ソースコード、Tweet等の自動変換が行える「Embed.js」。 テキスト内にemoticon用テキストや、動画のURLが埋め込まれていた場合、こちらを使って変換すれば閲覧者が見やすい形式に自動変換してくれる便利なもののようです 絵文字の自動変換 PDF、絵文字、動画など一括で変換 ツイートもURLから自動で埋め込みが可能 シンプルにテキストを書くだけであとはこちらのライブラリが自動でリッチにしてくれるのでタグをいじったりする手間が省けてよいかもしれませんね。 関連エントリ HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆ
テーブルのセルをクリックしたときに編集できるようにする（Edit in Place） | GUNMA GIS GEEK
画面遷移を行わずに、その場でDOM要素を編集できる機能を「inplace editor」とか言うらしいです。 プラグインを使う方が簡単なのですが、作りたいものに合わせてカスタマイズするのが思うようにいかなかったので、自分で書いてみました。 <table id="edit-table"> <tr> <th>要素１</th> <th>要素２</th> <th>要素３</th> </tr> <tr> <td>1</td><td>hoge</td><td>hoge</td> </tr> <tr> <td>2</td><td>hello</td><td>world</td> </tr> <tr> <td>3</td><td></td><td></td> </tr> </table>
[JS]気持ちいいアニメーションを伴ったさまざまなスクロールエフェクトが簡単に実装できてしまうスクリプト -Space.js
スクロールすると、ページに配置されているあらゆる要素が3D空間にあるみたいに気持ちよくアニメーションするjQueryのプラグインを紹介します。 さまざまなエフェクトが驚くほど簡単に実装できるので、お試しあれ！ Demo 2: Out of Space Space.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="[jquery]"></script> </head> <body> ... コンテンツ ... <script type="text/javascript" src="space.min.js"></script> </body> Step 2: エフェクトの設定 まずは、コアとなるフレームを作成します。この中に
![[JS]気持ちいいアニメーションを伴ったさまざまなスクロールエフェクトが簡単に実装できてしまうスクリプト -Space.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/24728443d0a7001537016b0816df756534c67040/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015040301.png)
[JS]かっこいい！ブラウザや要素いっぱいに背景画像やスライドショーをアニメーションで表示するスクリプト -Vegas 2
画像をブラウザやDOM要素の背景いっぱいに表示し、フル表示の画像にかっこいいエフェクトを加えたり、スライドショーを設置できるjQuery/Zeptoのプラグインを紹介します。 アニメーションやオーバーレイが数多く用意されており、画像にスタイリッシュなエフェクトを加えることが簡単にできます。 Vegas 2 Vegas -GitHub Vegas 2は以前紹介した1の単なるバージョンアップではなく、大きく進化しました。 ※1との互換性はありません。 Vegas 2のデモ Vegas 2の使い方 Vegas 2のデモ デモでは写真画像をブラウザや要素の背景としてフル表示し、スライドショー機能を伴ったコンテンツを楽しめます。 Doc -Animations 表示方法にも多彩なエフェクトが用意されています。 Vegas 2の使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjQu
![[JS]かっこいい！ブラウザや要素いっぱいに背景画像やスライドショーをアニメーションで表示するスクリプト -Vegas 2](https://cdn-ak-scissors.b.st-hatena.com/image/square/df5d3a30b733e55f7a58d3fb89e38ff656272054/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015031901-00.png)
[JS]幅広いブラウザをサポート！表示サイズに最適な画像・背景画像を表示するレスポンシブ対応の軽量スクリプト -Rimg
ページが読み込まれた時にDOMを調査してimg要素を自動で探し、設定したブレイクポイントに応じて最適な画像ファイルを表示するスクリプトを紹介します。 SVGとPNGが混在しているページでも無問題、SVGはベクターなのでそのまま拡大、PNGはそのサイズ用の画像ファイルを表示する賢い仕様になっています。 Rimg -GitHub Rimgの特徴 Rimgのデモ Rimgの使い方 Rimgの特徴 100%フロントエンドのコード（バックエンドは一切無し）。 単独で利用できるスクリプト、jQueryなどは必要ありません。 しかも、超軽量（6.0KB）。 UA判定やクッキーなど、環境に依存して判定するものは使用していません。 画像や背景画像をレスポンシブ対応にし、最適な画像を表示します（Retinaディスプレイ、リサイズ対応）。 スクロールして画像が表示されたらロードするLazy Loadに対応。 ス
![[JS]幅広いブラウザをサポート！表示サイズに最適な画像・背景画像を表示するレスポンシブ対応の軽量スクリプト -Rimg](https://cdn-ak-scissors.b.st-hatena.com/image/square/7216083dac49099812cea7a817f39a5b9988bd38/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015021301.png)
semooh plugin sample site
Index of Semooh jQuery Sample Site 画像 1.画像を切り替える（フェード） 2.画像を切り替える（フェード2） 3.画像を切り替える（サイズ、フェード） 4.画像を切り替える（スライド） 5.画像を切り替える（奥行き） 6.画像を切り替える（サイコロ） 7.画像を切り替える（シャッター） 8.画像を切り替える（カルーセル） 9.画像を切り替える（色々） 10.画像の一部分を拡大する 11.縮小した全景で画像を見る 12.画像をパノラマ風に表示する 13.画像を反射する 14.LightBoxを表示する 15.画像にマスク処理を施す 16.マウスオーバーで画像を拡大表示する 17.透過PNGをIE6でも表示させる スタイル 1.マーキーを滑らかに実装する 2.クリックできる範囲を広げる 3.要素の高さを最大のものに揃える 4.グラデーションを作成する 5.文
[JS]単に縮小して表示するだけではない、レスポンシブ対応の画像ギャラリーのスクリプト -Gamma Gallery
単にウインドウのサイズに依存して縮小するのではなく、コンテナのサイズに応じてグリッドを最適化し、そのサイズに最適な画像を表示する画像ギャラリーを実装するスクリプトを紹介します。 Gamma Gallery: A Responsive Image Gallery Experiment デモページ Gamma Galleryのデモ Gamma Galleryの使い方 Gamma Galleryのデモ まずは、デスクトップで表示したデモからご紹介。 画像の配置にはMasonryを使用しており、高さが異なる画像を一定の隙間で配置します。また、無限スクロールにも対応しており、下部にスクロールするとローディングバーが表示されます。 デモページ：スマフォで表示 Gamma Galleryの使い方 Step 1: 外部ファイル Gamma Galleryのスクリプト自体はjQueryのプラグインではありま
レスポンシブWEBデザイン コーディングTIPS その2 | 株式会社フォーミックス
レスポンシブWebデザイン レスポンシブWEBデザイン コーディングTIPS その2 2013/06/13 : H.A media queries(CSS3)のみではレスポンシブWEBデザイン対応することが難しい場合があります。 そのようなときにjavascriptを併用することで対応可能な例をご紹介いたします。 htmlの要素の記述箇所をデバイス（ウィンドウ）幅で変更したい。 media queries(CSS3)では、フロート(float)やポジション(position)、ディスプレイ(display)等を調整することでブレークポイントに応じて、表示を変更させますが、html上の要素の記述位置は変更できません。 html上の要素の記述位置を変更しなければ、対応が難しい場合に、javascript(今回はjquery)を使用することで簡単に対応できることがあります。 たとえば、下記サン
dotdotdot, javascript plugin for multiple line content ellipsis.
Truncate multiple line content: Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. R
jQuery.dotdotdot·溢れるテキストの末尾処理はこれで！ MOONGIFT
システムでHTMLを出力する場合に良くあるのが想定よりも文字数が多くて溢れてしまうケースです。スタイルシートのオーバーフローで切り捨ててしまっても良いですが、突然文字が切れてしまうのは何となく違和感があります。 そこで用いるのが一定の文字数以上の場合、…で締めるというものですが、文字数と切れる場所が常にちょうど良いとは限りません（特に日本語、英語が混ざった場合）。そこで使ってみたいのがjQuery.dotdotdotです。 jQuery.dotdotdotは指定した行数で文字数を区切ってくれます。同様のライブラリとしてはtrunk8が知られています。 左側が溢れた場合。右側はjQuery.dotdotdotによる補正後です。 …だけでなく、Read moreのように文字を指定することもできます。 HTMLにも対応しており、マークアップが適切に反映されています。単純にちょん切る訳ではありませ
Facebook風の無限スクロールが作れるinfinite scroll｜こうめの“これから使える”jQueryプラグイン
圧倒的な人気を誇るJavaScriptのライブラリー「jQuery」。サイトに効果をあたえるプラグインが多数あることが魅力ですが、そのプラグインを探すことがWeb制作者の手間になっています。本連載では、「こうめ」さんこと大竹孔明さんがおすすめのプラグインと実装方法、実装例を紹介します。（編集部） 「infinite scroll」は、スクロールしてページ下部まで移動すると、次のページを自動的に読み込んで表示するjQueryプラグインです。 インフィニティスクロールという機能でTwitterのタイムラインや、Facebookのフィードでも採用されており、ユーザーが手動でページ送りする手間を軽減します。 WordPressのブログ記事や、ECサイトの商品ページ、またギャラリーサイトなどで効果的な表現になりそうですね。 step1 jQueryプラグインの読み込み jQuery本体をjQuery
【jQuery】フッターの位置で固定するページトップへ戻る
今回作成したページ 今回作成したページはこのようなページです。 demo download このような動きをしています。 ページをスクロールするとページトップへ戻るリンクがフェードイン・アウトする。 ページトップへ戻るリンクをクリックするとスムーズにスクロールする。 ページトップへ戻るリンクはコンテンツ部分の右下で固定表示される。 フッターのところまでスクロールするとページトップへ戻るリンクがフッターに貼り付く。 動作がややこしいですね…。私のようにjQueryが苦手な方のために1つずつ解説していきます。 1.jQuery本体を読み込む jQueryを使用するには以下のファイルを読み込みます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
[JS]異なる高さを単に揃えるだけでなく、グルーピングや列に応じて揃えることも可能な便利スクリプト -matchHeight
デモページ：幅1,200pxで表示 これは、ボーダー無しの状態。 jquery.matchHeight.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとしてhead内に記述します。 <head> ... <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.matchHeight.js"></script> </head> Step 2: HTML 適用するパネル全てに同じclassを付与します。 各パネルが横一列に配置された場合は、全て同じ高さに。複数の列に配置された場合は各列で一番高いも
jQueryAutoHeight.js - 複数のカラムの高さを最大値にそろえるjQueryプラグイン | かたつむりくんのWWW
Movable Type, Craft CMS, Drupal, HTML, CSS, JavaScript, jQuery etc. jQueryAutoHeight.js とは jQueryAutoHeight.js とは、複数のボックスの高さを自動的にそろえるシンプルな jQueryプラグインです。高さのそろえ方は、次の２通りです。 セレクタで指定したすべての要素を、その中の最大値にそろえる セレクタで指定した要素を、オプションで渡した数ごとに、その中の最大値にそろえる（1行ごとにそろえられる） サンプル 複数のボックスの高さを最大値にそろえるjQueryプラグイン ダウンロード Releases · tinybeans/jQueryAutoHeight ※jQuery 1.9 以降で利用する場合は v0.04 以降をお使いください。 使い方 ファイルの読み込み ダウンロードしたファ
ツールチップをレスポンシブに修正した - euphoLab
ツールチップ新しくした。 tiptipが死んでたので、Darktooltipに乗り換えました。 と書いたのにDarktooltip、モバイルでの挙動が希望と違ったので改めてレスポンシブ対応のツールチップ、Responsive and Mobile-Friendly Tooltipに変えました。 PCではホバー、モバイル・タブレットではタップがトリガーになってる。端の方だと勝手に吹き出しを寄せてくれて、設置が簡単で軽い。良いですね！ レシポンシブWebデザイン対応のツールチップを実装するjQueryコード - かちびと.net 設置方法 公式サイトにCSSとJavaScriptのコードがあるので、コピペして適当な名前つけて保存します。今回は仮に「tooltip.css」と「tooltip.js」とする。 jQueryなのでjQueryと一緒に<head>内に設置。Tumblrではテーマに使
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iframeの高さを中身のコンテンツにあわせて切り替えられる「setIframeHeight」:phpspot開発日誌
Facebookスタイルの画像アップロード＆位置調整サンプル:phpspot開発日誌
e-riverstyle.com
