[JS]Lightboxの進化形！操作性が快適でフラットなデザインにもぴったりなレスポンシブ対応のスクリプト -Strip
スマホなどの小さいスクリーンでは昔からあるLightbox風の体験を与え、より大きいスクリーンではページ上にインタラクションのスペースを残すよう設計された、画像や動画をアニメーションで拡大表示させるjQueryのプラグインを紹介します。 フラットなデザインにも相性が非常によく、操作も快適でエレガントです！ しかも、IE7+にも対応。 Strip Strip -GitHub Stripのデモ Stripの使い方 Stripのデモ デモはChrome, Safari, Firefox, Opera, IEは7+、iOS5+, Android3+でご覧ください。 各画像をクリック・タップすると、拡大画像がスライドして表示されます。 拡大時はそのまま他の画像も表示できるギャラリー機能にも対応しています。 デモ：幅780pxで表示 スライド表示させるのは画像だけでなく、YouTubeやVimeoなど
![[JS]Lightboxの進化形！操作性が快適でフラットなデザインにもぴったりなレスポンシブ対応のスクリプト -Strip](https://cdn-ak-scissors.b.st-hatena.com/image/square/b4b391a890221ac5696699ef145a5921c27e5824/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014100601-01.png)
[JS]Lightboxの進化形！クリックでもタップでも快適動作の画像を拡大表示させる超軽量スクリプト -Intense Images
サムネイル真ん中の風景写真は縦長 Intense Imagesの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 ※jQueryなど他のスクリプトは必要ありません。 <head> ... <script src='../intense.js'></script> </head> Step 2: HTML 画像は2種類の配置方法があります。 img要素はサムネイルと拡大時の画像を兼用し、data-image属性は拡大時に高解像度の画像を利用することができます。 <img src="./img/awesome-source.jpg" /> <!-- OR --> <div class="anything" data-image="./img/awesome-source.jpg" /> data-imageを使用する時は、サムネイルはCSSで背景画像として指定
lightBox系プラグイン「ColorBox」の超初歩的な設置方法を備忘録する « Tototo
ColorBoxは、所謂lightBox系のjQueryプラグインです。 先日使ったので、まず解説されない超初歩的な使い方をまとめます。主に私のためです。 但し今回は、ただの自分用備忘録だけというのもなんなので、「HTMLとCSSの知識は自分でサイトを作れる程度にはあり」「jQueryがとりあえずどんなものなのか漠然とは分かっている」くらいの初学者がとりあえず設置できるまで、というのを目指し解説仕立てにしてみました。応用編的な内容はありませんのでご容赦ください。 1：本体の入手 まず、ColorBox本体と、加えてjQuery本体を用意します。 1-1：jQueryのダウンロード jQueryの配布元はこちらです。 Downloadと書いてある大きいバナーをクリック、入手してください。 上部メニューの方の「Download」から辿ると過去バージョンもあります。 ちなみに「Minif
iPhoneに適したLightbox
iPhoneでLightboxが動作しなかったので、 代替のパッケージを調査してみた 発生する問題調べてみたところ、次の3つの問題がある事が分かった。 表示位置がずれる本来タップした位置ではなく、かなり上の方に表示される。 画面の暗転が起きるので動作しているのは分かるのだけれど、画像が表示されるように見えない。 ダウンロードが出来ない画像の表示は上手くいってもiPhoneでは画像をプレスすると「画像を保存」と「コピー」が表示されるのが、リンクとして認識され「開く」と「新規ページで開く」、「コピー」が表示されダウンロードできない。 これだと、壁紙画像とか作っても使えないので困る 動作が重いスマートフォンでも使うからこそ動作速度、容量ともに軽量なものが望ましい 調査したパッケージ元祖Lightbox 表示位置 × ダウンロード ○ 軽さ ○ Firespeedでも長く使用していたLightbo
つくるぶガイドブログ: Lightboxのデザインをカスタマイズしてみよう（前編）
こんにちは、HTML+CSS担当の小森です。 スライドショーやサムネイル画像の拡大でよく見かける「Lightbox」のライブラリ。 気軽に取り入れられるライブラリでもあって、すっかり定着した感がありますね。 今回はこのLightboxのデザインをカスタマイズしてみたいと思います。 Lightbox系のライブラリは本当にたくさんありますが、 ここでは、定番の元祖Lightboxを使用してみます。 Lightbox 2（デモあり） http://www.huddletogether.com/projects/lightbox2/ レイアウト構造 HTMLソースをのぞいてみると、クリックをしたときに 画面全体を覆う半透明レイヤー（id="overlay"） 拡大画像配置レイヤー（id="lightbox"） がJavaScriptによって描画されるしくみになっています。 また、拡大画像配
Lightbox
Getting started Download a zip of the latest release (or any previous one) from the Github Releases page. Or install using npm: npm install lightbox2 --save Open up the zip file and take a peek at the barebones, working example that is included in the /examples folder. Ready to set Lightbox up on your page? Start by including the Lightbox CSS and Javascript. You can grab both these files from the
CSS（CSS3）のみでLightbox風モーダルウィンドウを作成する方法｜BLACKFLAG
jQueryなどのJavaScriptライブラリでは定番のLightBoxやThickBoxといった、ポップアップ型モーダルウィンドウプラグインが様々あります。 ギャラリー要素などコンテンツの見せ方としてモーダルウィンドウは定着しつつありますが、そんなモーダルウィンドウをJavaScriptなどのSCRIPTを使用せずに、CSS（CSS3）のみで実装するサンプルを実験的に作ってみたので紹介してみます。 まずは動作サンプルから。 ※動作環境は基本的にはWebkitブラウザのSafariやChromeのみですが、今回はWebkit以外のブラウザFirefoxなどでもアニメーション以外の動作は実行されます。 CSS3 MODAL WINDOW【SAMPLE01】 ≫サンプル【01】画面はこちらから。（別枠で開きます。） リンクをクリック後に表示される、 ————————————————– ≫モー
フラットデザインが美しいレスポンシブなLightbox「Nivo Lightbox」:phpspot開発日誌
Nivo Lightbox - Dev7studios フラットデザインが美しいレスポンシブなLightbox「Nivo Lightbox」 次のようにシンプルなフラットデザインを採用したLightBoxが実装できます。 こういうところまでフラット化の波が押し寄せています。ざっぱ〜ん。 フラットなようで若干シャドウを使って立体的に見せているあたりもカッコいい。 iFrameやSWF,Youtube,Vimeoなどにも対応していてかなり使い勝手がよさそうです。 関連エントリ 動画/地図/画像のポップアップが可能でレスポンシブなLightBox実装jQueryプラグイン「MagnificPopup」 LightBoxはここまで進化したよ「VisualLightBox」 スワイプできるLightBox実装jQueryプラグイン「Swipebox」
IE8以上ならもうスクリプト無しでOKのモーダルウインドウを表示するスタイルシート -CSS Modal
テキストや画像などのリンクをクリックすると、画像をはじめあらゆるHTMLの要素が配置可能なモーダルウインドウを表示するスタイルシートを紹介します。 CSS Modal CSS Modal -GitHub CSS Modalのデモ CSS Modalの使い方 CSS Modalのデモ デモはIE9を含む、すべての最新のモダンブラウザでご覧ください。モバイル系は、iOS, Android2/3/4のMobile Safariで非常に機能し、Windows Phone8でも機能します。 IE7以下は非サポートで、IE8はエフェクトなしで機能します。 まずは、テキストを配置したモーダルウインドウから。 Modal Text モーダルウインドウ内にトリガーを設定することも可能で、「Open a new modal」をクリックすると別のウインドウが開きます。 ウインドウを閉じるには、右上のクローズをク
[jQueryプラグイン]iPhoneでタッチできるライトボックス「Swipebox」 | Web活メモ帳
ライトボックスは良く使われるプラグインですが、 スマホやタブレットでも同じような動きが出来るようにプラグインがありましたのでご紹介。 「Swipebox」はタッチイベントをサポートしたjQUeryプラグインです。 ギャラリーをスワイプしたりキーボードを押す事で次の写真を見る事が出来るようになります。 キャプションを表示させる事もオプションで出来ます。 興味のある方は下のリンクからどうぞ！ Swipebox.
![[jQueryプラグイン]iPhoneでタッチできるライトボックス「Swipebox」 | Web活メモ帳](https://cdn-ak-scissors.b.st-hatena.com/image/square/b541a2db39f94582381821bf063414672a497b0b/height=288;version=1;width=512/https%3A%2F%2Fblog.verygoodtown.com%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F03%2F20130326-01.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【2013年版】どれ使おう？モーダルウィンドウ（Lightbox 風スクリプト）を集めてみました その2 | バシャログ。
LightBoxの使い方とカスタマイズ方法 | CSS Lecture
Loading...