こんにちは、暑いですね。脇汗すごいですね。僕が。 さて今回はWebページ作成時に、私がよく使っているjQueryプラグインをまとめてみました。（たまにjQueryが必須でないものもあります。） ※紹介しているプラグインを使用する際、ライセンスは各自で再度確認してくださいませ。 Owl Carousel 個人・商用利用可能。レスポンシブでいい感じに動作してくれるカルーセルスライダーです。動作もシンプルで綺麗だし、マークアップも簡単。テキストもOK。お気に入りのプラグインです。 Owl Carousel bxSlider 個人・商用利用可能。シンプルなスライダープラグインです。レスポンシブで動作し、カスタマイズもしやすく重宝します。 jQuery Content Slider | Responsive jQuery Slider | bxSlider Glide.js デモページがカッコイイス
6KB以下の超軽量でフラットなLightBox実装jQueryプラグイン「Featherlight」 2014年05月20日- Featherlight ? The ultra slim jQuery lightbox. 6KB以下の超軽量でフラットなLightBox実装jQueryプラグイン「Featherlight」。 画像、iframe、ajaxでコンテンツをロードできて、余計な機能は除いて軽量なLightBoxを実装したい場合に使えそう アニメーションも比較的高速で、動きもサクサクしている感があります。 とりえあえず、軽いけど基本的な機能はそろってるLightBoxを使いたいという場合に使えそうです 関連エントリ レスポンシブでタッチフレンドリな軽量LightBox実装jQueryプラグイン「Image Lightbox」 レスポンシブで何でも埋め込めるLightBox実装jQue
Fluidbox, a jQuery plugin for beautiful lightboxes Medium風のシンプルなLightBoxが実装できるjQueryプラグイン「Fluidbox」。 ブログサイトMediumのようなLightBoxが実装できるそうです。 画像クリックでシンプルに画面上に最大化。レスポンシブ対応 関連エントリ タッチに最適化されたLightBox実装jQueryプラグイン レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 フラットデザインが美しいレスポンシブなLightbox「Nivo Lightbox」 動画/地図/画像のポップアップが可能でレスポンシブなLightBox実装jQueryプラグイン「MagnificPopup」 スワイプできるLightBox実装jQueryプラグイン「Swipebox」
とても有名なプラグインですが、今まで使ってみたことがなかったので試してみました。Lightbox風に画像をポップアップして表示するjQueryのプラグインです。以前紹介したColorBoxに似たような感じです。こちらのfancyBoxはバージョン2になってからレスポンシブになっているみたいです。その他にもヘルパーを使って拡張機能なんかも色々つけれるのでとてもバリエーション豊な印象を受けました。ということで適当なサンプルも作ってみましたので、以下使い方と合わせてどうぞ。 [ads_center] 使い方 以下のURLからファイルをダウンロードします。 fancyBox – Fancy jQuery Lightbox Alternative jQuery本体とCSS、JSファイルを読み込みます。 <link rel="stylesheet" type="text/css" href="jque
jQuery Lightbox alternative: Touch Optimized Sliders "R"Us タッチに最適化されたLightBox実装jQueryプラグイン。 スワイプで画像が横にずれ、画像をクリックで拡大されるようなUIが作れます。 タッチデバイス向けのギャラリーをサクッと実装したい場合に使えそうです 関連エントリ スライダーの背景もダイナミックに切り替えるクールなスライダ実装jQueryプラグイン「Immersive Slider」 HTML5＆CSS3なレスポンシブなスライダー実装jQueryプラグイン「Slippry」 3Dでグルグル回転するインパクト大なスライダー実装jQueryプラグイン「Impulse Slider」 レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」 クロス環境で動作するレスポンシブスライダー実装
VenoBox - responsive jQuery modal window plugin レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 LightBox派生スクリプトは多々ありますが、レスポンシブでクールなフラットデザインで、地図、動画、画像、iframeなどなんでも埋め込めるので、今の時代にかなり使いやすそう。 関連エントリ フラットデザインが美しいレスポンシブなLightbox「Nivo Lightbox」 動画/地図/画像のポップアップが可能でレスポンシブなLightBox実装jQueryプラグイン「MagnificPopup」 スワイプできるLightBox実装jQueryプラグイン「Swipebox」 LightBoxはここまで進化したよ「VisualLightBox」
写真の拡大やギャラリーページなどに良く利用される... / レスポンシブデザイン対応Lightboxプラグイ... / Swipebox | A touchable j...他...全12件 写真の拡大やギャラリーページなどに良く利用されるプラグイン。近年のサイト制作で使わないことがない最もポピュラーなプラグインです。 最近ではスマートフォン対応の有料プラグインも続々登場。さらに便利に使いやすく進化してはいますが、商用だと有料化が進んで、以前に比べると無料のプラグインを見つけ辛くなりました。 そこで、ここでは最近のフリーで使えて商用利用可能なLightboxプラグインをご紹介いたします。
lightboxする画像の高さが違う場合に、lightbox2.5.1で閉じるボタンの位置（高さ）を変更するには、以下のようにします。 lightbox.js 【変更前】 Lightbox.prototype.showImage = function() { var $lightbox; $lightbox = $(‘#lightbox’); $lightbox.find(‘.lb-loader’).hide(); $lightbox.find(‘.lb-image’).fadeIn(‘slow’); this.updateNav(); this.updateDetails(); this.preloadNeighboringImages(); this.enableKeyboardNav(); }; 【変更後】 Lightbox.prototype.showImage = functio
jQuery Image Lightbox: Prime Time DEMO LightBoxはここまで進化したよ「VisualLightBox」 CSS3等を使ってかなりオシャレに進化したLightBoxが実装できます。LightBoxはもう８年ぐらいまえに登場して、今オリジナルをみるとなんか古い感じがするということで時の流れを感じます クリックするとオシャレに拡大。 テーマが大量にあって好みのデザインを選びたい放題 Windowsっぽいスキン。LightBoxが出たのってポップアップを禁止するツールが多く出てきたことが背景にありますが、ページ内ポップアップされていて面白い。 関連エントリ スワイプできるLightBox実装jQueryプラグイン「Swipebox」 今こそ知っておくLightbox風プラグイン20+
Superbox, the lightbox, reimagined Google画像検索っぽい画像ギャラリーが作れるjQueryプラグイン「Superbox」 オーバーレイではなく、その場でインラインに画像が拡大されるGoogle画像検索はなかなか使いやすいですが、それを実現するためのjQueryプラグイン。 LightBoxが出たのが2005年ですが、あれからもう８年も経つんですね。あれから色々なページ内で開ける画像ギャラリーが創造されましたが、このUIもその１つですね。 １０年後の画像ギャラリーはどういうインタフェースが主流になっているんでしょうね。 関連エントリ ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」 卓上に写真を置いたようなインタフェースのギャラリー作成用のjQueryプラグイン
lightboxよりJavaScriptと画像ロードの依存を少なくした、レスポンシブ対応で画像を拡大表示するjQueryのプラグインを紹介します。 デモページ：幅780pxで表示 SuperBoxの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="css/style.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/superbox.js"></script> Step 2: HTML まずは、基本構造です。 HTML5のdata属性で拡大する画像を指定し、classに「superbox-im
風邪引いてしんどい…僕です。 登場から数年、すっかりお馴染みとなった「lightbox」。 この数年の間に様々な派生プラグインが出ました。 今回は、そのいくつかを紹介していきたいと思います。 1.ColorBox 2.fancyBox 3.prettyPhoto 4.jQuery.popeye 2.1 5.Shadowbox.js（商用利用は有料） http://www.tripwiremagazine.com/2012/07/jquery-lightbox-plugins.html 他にも、こちらのサイト（英語）で沢山のlightboxライブラリが紹介されていますので、気になった方はこちらもどうぞ。 それでは、体調がすぐれないのでこの辺で…m(_ _)m
タイトルになんて書いたらわかりやすいだろうか… って悩んでたら一ヶ月経ってしまいました。嘘ですけど。 『縦にスワイプしようとした際にはイベントを仕込んだ要素にタッチしても何も起こさせない方法』 どういうこと…？ わかりにくくて申し訳ないです…。図に表してみました。 縦に長いレイアウトのサイトを見ています。 ページ下を見るために下から上へスワイプします アコーディオンのリスト部分にクリックイベントが仕組んであり、ユーザが予期しない動作をしてしまいました… つまり、スワイプ時にtouchイベントが誤動作するのを防止します とは言ったもののどうすればいいのでしょうか。 少しづつ整理しつつ解決法を探してみましょう‥ 現状の問題点 問題解決フロー 結果、タッチした瞬間に発火するtouchstartイベントとtouchendイベントを使えばうまく動作させられそうです。 実際にどんなコードになるか書いて
rollover（jQuery）とlightbox（prototype.js）の競合を回避する
javascriptを複数設定すると、干渉しあってうまく作動しないことがある、と聞いてはいたのですが、実際ロールオーバーとライトボックスを設定した際、競合が起きてしまいました。 これは初心者的な言い方で言うと、jQueryのjsファイルとライトボックスのprototype.jsファイルの両方に「$」の指示があるので、うまく読み込めなくなってしまう・・・というようなことみたいですね。 なので、jQueryの方のjsファイル（ここではrollover.js）の指示出しの「$」を置き換えればOKらしいっす。 手順は 1.HTMLファイルでjQueryのjsファイルの「$」を別のもの（「jQuery」）にするという指示を書く 2.jQueryのjsファイルの「$」を「jQuery」に置換する ・・・と意外に簡単！ で、具体的な書き方はこんな感じ。 【HTML】・・・赤字の部分を追加 <!-- jQ
DHTMLXといえば、有名なライブラリの dhtmlxGridをイメージする方も多いかも しれませんが、そんなDHTMLXのサイト を覗いたら、タッチデバイス向けのフレー ムワークを商用もフリーのGPLライセンス で配布していましたので情報をシェア。 HTML5製なので後学用にDLするのも いいかもですね。 DHTMLX Touch library will be available under the terms of GNU GPL and Commercial License. Both – free! 商用もフリーのGPLライセンスだそうです。dhtmlxGridもGPLでしたけど、商用利用は非GPLを使うよう促してましたが、こちらはそういった記述はありませんでした。まだアルファ版だからですかね。なにか勘違いしてたらご指摘ください。 iPad向けがあるのが個人的に嬉しかったです。
twitter facebook hatena google pocket ボタンを押した時にメッセージをライトボックスのように閲覧者に知らせてあげると伝わりやすいと思います。 jQuery.msgBox()は、いろいろなパターンでこれを実現できます。 sponsors 使用方法 jQuery.msgBox()からファイル一式をダウンロード。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.msgBox.js"></script> <script> function msg() { $.msgBox({ title: "あーあー", //ボックスのタイトル content: "さわっちゃだめ！", //ボックスの内容 t
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 VimeoのAPIとjQueryを使用したサンプル。 軽量なコードでLightbox風にポップアップ させる、という方法。Vimeo自体日本では 全然使ってる方を見かけませんが、徐々に 浸透すると嬉しいですね。便利だし。とい うか、僕が知らないだけで結構使ってる 方もいるのかもｗ 仕事じゃなくて個人で使いそうなのでメモ的に。VimeoのAPIを使って、リンクするだけでサムネを表示させてクリックするとLightbox風に表示される動画ギャラリー、みたいなものを簡単なコードで実装します。 Vimeo Gallery こんな風にサムネイルがギャラリー的に表示されて こんな風にLightbox風にポップアップさせます。 以下サンプル。 Sample IE7以下にも手抜きハッ
拡大画像を表示するJavaScriptライブラリ「jQuery lightBoxプラグイン」で、拡大画像の幅・高さを制限する方法を紹介します。 jQuery lightBoxプラグインの使い方は、下記の公式サイトやネットの情報をご覧ください。 jQuery lightBox plugin １．問題点 jQuery lightBoxプラグインは元画像である拡大画像の表示サイズを設定できないため、元画像のサイズによっては次のように期待通りの表示にならないケースがあります。 対処前の拡大画像（ブラウザの幅を超えて拡大） 本エントリーの対処を行うことで、拡大時のサイズを制限することができるようになります。 対処後の拡大画像 ２．jquery.lightbox-0.5.jsの修正 jQuery lightBoxプラグインに含まれる、jquery.lightbox-0.5.jsを任意のエディタで開き、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
