レスポンシブに対応して画像をポップアップ表示してくれる素敵なjQueryプラグイン「fancyBox」 – bl6.jp
とても有名なプラグインですが、今まで使ってみたことがなかったので試してみました。Lightbox風に画像をポップアップして表示するjQueryのプラグインです。以前紹介したColorBoxに似たような感じです。こちらのfancyBoxはバージョン2になってからレスポンシブになっているみたいです。その他にもヘルパーを使って拡張機能なんかも色々つけれるのでとてもバリエーション豊な印象を受けました。ということで適当なサンプルも作ってみましたので、以下使い方と合わせてどうぞ。 [ads_center] 使い方 以下のURLからファイルをダウンロードします。 fancyBox – Fancy jQuery Lightbox Alternative jQuery本体とCSS、JSファイルを読み込みます。 <link rel="stylesheet" type="text/css" href="jque
レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」:phpspot開発日誌
VenoBox - responsive jQuery modal window plugin レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 LightBox派生スクリプトは多々ありますが、レスポンシブでクールなフラットデザインで、地図、動画、画像、iframeなどなんでも埋め込めるので、今の時代にかなり使いやすそう。 関連エントリ フラットデザインが美しいレスポンシブなLightbox「Nivo Lightbox」 動画/地図/画像のポップアップが可能でレスポンシブなLightBox実装jQueryプラグイン「MagnificPopup」 スワイプできるLightBox実装jQueryプラグイン「Swipebox」 LightBoxはここまで進化したよ「VisualLightBox」
商用利用可のフリーjQuery Lightboxプラグインまとめ
写真の拡大やギャラリーページなどに良く利用される... / レスポンシブデザイン対応Lightboxプラグイ... / Swipebox | A touchable j...他...全12件 写真の拡大やギャラリーページなどに良く利用されるプラグイン。近年のサイト制作で使わないことがない最もポピュラーなプラグインです。 最近ではスマートフォン対応の有料プラグインも続々登場。さらに便利に使いやすく進化してはいますが、商用だと有料化が進んで、以前に比べると無料のプラグインを見つけ辛くなりました。 そこで、ここでは最近のフリーで使えて商用利用可能なLightboxプラグインをご紹介いたします。
lightbox2.5.1で閉じるボタンの位置（高さ）を変える方法 – creamu
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
LightBoxはここまで進化したよ「VisualLightBox」:phpspot開発日誌
jQuery Image Lightbox: Prime Time DEMO LightBoxはここまで進化したよ「VisualLightBox」 CSS3等を使ってかなりオシャレに進化したLightBoxが実装できます。LightBoxはもう８年ぐらいまえに登場して、今オリジナルをみるとなんか古い感じがするということで時の流れを感じます クリックするとオシャレに拡大。 テーマが大量にあって好みのデザインを選びたい放題 Windowsっぽいスキン。LightBoxが出たのってポップアップを禁止するツールが多く出てきたことが背景にありますが、ページ内ポップアップされていて面白い。 関連エントリ スワイプできるLightBox実装jQueryプラグイン「Swipebox」 今こそ知っておくLightbox風プラグイン20+
Google画像検索っぽい画像ギャラリーが作れるjQueryプラグイン「Superbox」:phpspot開発日誌
Superbox, the lightbox, reimagined Google画像検索っぽい画像ギャラリーが作れるjQueryプラグイン「Superbox」 オーバーレイではなく、その場でインラインに画像が拡大されるGoogle画像検索はなかなか使いやすいですが、それを実現するためのjQueryプラグイン。 LightBoxが出たのが2005年ですが、あれからもう８年も経つんですね。あれから色々なページ内で開ける画像ギャラリーが創造されましたが、このUIもその１つですね。 １０年後の画像ギャラリーはどういうインタフェースが主流になっているんでしょうね。 関連エントリ ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」 卓上に写真を置いたようなインタフェースのギャラリー作成用のjQueryプラグイン
[JS]lightboxの進化形、レスポンシブ対応で画像を拡大表示するスクリプト -SuperBox
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」プラグインを集めてみました - Webデザイン初心者向けのあれこれ
風邪引いてしんどい…僕です。 登場から数年、すっかりお馴染みとなった「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
縦にスワイプしようとした際にはイベントを仕込んだ要素にタッチしてもイベントを発生させない方法 | WebDelog
タイトルになんて書いたらわかりやすいだろうか… って悩んでたら一ヶ月経ってしまいました。嘘ですけど。 『縦にスワイプしようとした際にはイベントを仕込んだ要素にタッチしても何も起こさせない方法』 どういうこと…？ わかりにくくて申し訳ないです…。図に表してみました。 縦に長いレイアウトのサイトを見ています。 ページ下を見るために下から上へスワイプします アコーディオンのリスト部分にクリックイベントが仕組んであり、ユーザが予期しない動作をしてしまいました… つまり、スワイプ時に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がiPad / iPhoneのようなタッチデバイス向けのHTML5製フレームワーク・DHTMLX Touchを配布してた - かちびと.net
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向けがあるのが個人的に嬉しかったです。
さまざまな種類のメッセージをフロート表示できるJavaScript「jQuery.msgBox()」｜skuare.net
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
jQueryとVimeoのAPIでサムネイルを作成し、動画をLightbox風にポップアップさせる - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 VimeoのAPIとjQueryを使用したサンプル。 軽量なコードでLightbox風にポップアップ させる、という方法。Vimeo自体日本では 全然使ってる方を見かけませんが、徐々に 浸透すると嬉しいですね。便利だし。とい うか、僕が知らないだけで結構使ってる 方もいるのかもｗ 仕事じゃなくて個人で使いそうなのでメモ的に。VimeoのAPIを使って、リンクするだけでサムネを表示させてクリックするとLightbox風に表示される動画ギャラリー、みたいなものを簡単なコードで実装します。 Vimeo Gallery こんな風にサムネイルがギャラリー的に表示されて こんな風にLightbox風にポップアップさせます。 以下サンプル。 Sample IE7以下にも手抜きハッ
jQuery lightBoxプラグインで拡大画像の幅・高さを制限する方法
拡大画像を表示するJavaScriptライブラリ「jQuery lightBoxプラグイン」で、拡大画像の幅・高さを制限する方法を紹介します。 jQuery lightBoxプラグインの使い方は、下記の公式サイトやネットの情報をご覧ください。 jQuery lightBox plugin １．問題点 jQuery lightBoxプラグインは元画像である拡大画像の表示サイズを設定できないため、元画像のサイズによっては次のように期待通りの表示にならないケースがあります。 対処前の拡大画像（ブラウザの幅を超えて拡大） 本エントリーの対処を行うことで、拡大時のサイズを制限することができるようになります。 対処後の拡大画像 ２．jquery.lightbox-0.5.jsの修正 jQuery lightBoxプラグインに含まれる、jquery.lightbox-0.5.jsを任意のエディタで開き、
サイトを開いた際に、lightboxを開くような動作を行う方法を、教えて頂けますか？ - インデックスページにアクセスした際... - Yahoo!知恵袋
サイトを開いた際に、lightboxを開くような動作を行う方法を、教えて頂けますか？ インデックスページにアクセスした際 自動的にlightboxのような挙動で、少し告知を行いたいと思っております。 告知場所に 掲載する内容は、リンクや画像、ムービー等 何でも良いです。 方法としてはどのように行えばよいでしょうか？ lightboxのオプションで挙動を 操作する事は可能ですか？ ユーザビリティ的に良くないとは思いますが プロモーションの一環で 可能かどうか、試してみたいと考えております。 ご回答、宜しくお願いたします。 ついでにすいません。 CSSで上位レイヤーに告知を掲載し 閉じるボタンなどを作成する事は可能でしょうか？ 良ければ、お答えください。
Ajax - LITBox(Lightbox風ダイアログ表示ライブラリ)の一歩先行く使い方｜アークウェブのブログ
SEの竹村です。 Lightboxという画像のサムネイルをクリックすると同じ画面上で拡大画像を表示できるJavaScriptのライブラリがあります。Lightboxについては、以下の公式ページのほかに、様々なブログに評価や応用例が掲載されているので検索してみてください。 Lightbox JS http://www.huddletogether.com/projects/lightbox/ 同じように、リンクをクリックすると同一画面上でBOXが開き、HTMLを表示するライブラリがあります。それが今回取り上げる LITBox です。 Ryan J Lowe’s Dev Blog ? Blog Archive ? LITBox http://www.ryanjlowe.com/?p=9# これは、URLを与えると非同期でデータを取ってきて、BOX内に表示するものです。 その他の基本的な使い方に
Bridge Word
This shop will be powered by Are you the store owner? Log in here
LightBox風にスライドショーを行うブックマークレット:phpspot開発日誌
ブラウザ上で自由にデザインできるページ作成ツール『Noovo Communications... 次の記事 ≫：「PEARの使い方くらいは知っておきましょう」記事 TripTracker Blog Blog Archive Revamped Slideshow We recently updated the TripTracker photo slideshow interface. For a sample, click on the first thumbnail below and then the Play button: LightBox風にスライドショーを行うブックマークレット。 ブックマークレット内で外部スクリプトを読み込んでいるため、結構込み入ったスライドショー機能を実装できてます。 Flickr上でも動作すると書いてあったので試してみましたが、これはちゃんと動かないようで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jqueryを使ってみよう | lightboxのサンプル
Courses and Tutorials in UI Design | Envato Tuts+
