CSS Modal - Modals built out of pure CSS
Modals built out of pure CSS Download v1.4.0 View Changelog Tweet Follow @drublic GitHub This project is on GitHub. Go fork it. Built with pure CSS CSS Modal is built out of pure CSS. JavaScript is only for sugar. This makes them perfectly accessible. Optimized for mobile The modals are designed using responsive web design methods. They work on all screen sizes from a small mobile phone up to high
画像も動画もGoogle Mapsもあらゆるコンテンツを拡大表示するスクリプト -iLightBox | コリス
画像をはじめ、画像ギャラリー、そして動画、HTMLコンテンツ、外部サイトなど、あらゆるコンテンツを拡大表示するjQueryのプラグインを紹介します。 あらゆるコンテンツをサポートします。 画像、画像ギャラリー、動画（HTML5, YouTube, Vimeoなど）、Flash/swf, Google Maps, iFrame, AJAX, Alert/Confirm/Promptなど 主要なブラウザ全てをサポートします。 IE7/8/9/10, Firefox, Chrome, Safari, Opera iOS4+, Android 主要なデバイスを全てサポートします。 デスクトップ・タブレット・スマートフォン スワイプ操作やRetinaディスプレイもサポートしています。 iLightBoxのデモ デモではあらゆるコンテンツをiLightBoxで拡大表示します。 まずは、画像一枚を拡大表
jQuery.lightpop.js - dogmap.jp
オプションの設定 オプションを設定することで、フレーム枠の見た目を変更したりできます。 オプションは、ざっと次の通り。 通常のオプション overlayBgColor: オーバーレイの背景色 overlayOpacity: オーバーレイの透明度 contentFrameType: 'border' (通常) or 'box' (画像を使用してフレームを表示) contentBgColor: コンテンツの背景色 containerBorderSize: コンテンツの脇に表示する空白の幅を px で指定 containerResizeSpeed: リサイズアニメーション時のスピードを数値で指定 imageLoading: 読み込み中に表示する画像ファイルのパス imageBtnClose: 「閉じる」ボタン用の画像ファイルのパス imageBtnPrev: 「前へ」ボタン用の画像ファイルのパス
個人的に気に入ってる10のLightbox系jQueryプラグイン及び、その特徴まとめ
個人的に気に入ってよく使っている、又は いつか役に立ちそう、いずれ使いたい的な Lightbox風に拡大実装出来るjQueryプラグ インのまとめです。使うときにいちいち引っ 張り出しているのが面倒なのでまとめにして ついでにシェアしようと思って記事にします。 オーソドックスなものから、やや特徴的なもの、Twitterで「こんなのない？」って聞かれて探したものなど10個厳選です。特徴も一緒にメモしておきます。 なお、画像を使うjQueryプラグインにご興味が有るようでしたら、以前書いた画像を使ったいろいろなjQueryプラグイン224個まとめも参考にして頂けるかと思います。 colorbox 一番よく使っているかもしれません。MITライセンスで、グループ化⇒スライドも可能。また、iPhone、iPadでも動いて表示も崩れません。エフェクトも変更可能で、YoutubeやIframe、Flas
わずか3STEP！誰でも簡単にjQueryを使ったLightboxギャラリーを作成出来るソフトウェア・Jquery Photo Viewer
なかなか面白い試みだったので 備忘録。現在数多くのjQueryを 使用したギャラリーが存在し、その 中には多くのLightbox風ギャラリー が存在します。今日、ご紹介する のはそんなギャラリーを作成する ソフトウェアです。 jQueryを使用したギャラリーを作成するジェネレーターになりますね。ちょっとこの発想はありませんでした。 オンラインのジェネレーターではなく、ローカル環境で動かすソフトウェアです。使い方も凄く簡単ですよ。 言語も日本語に対応しています。 わずか3STEPで作成出来ます。 STEP.1 使い方はDLページにも書いてありますが、簡単にご紹介。おそらく直感で作成出来ます。ソフトウェアをDLしてセットアップすると上記画面が立ち上がります。ここにギャラリーにしたい画像をドラッグ＆ドロップしていきます。 STEP.2 画像を決めたら、上部のPublishをクリックします。すると
Lightbox_me - Stupidly Simple Lightboxing - The jQuery lightbox plugin for people who know what they're doing.
What is it? Have you ever had a DOM element that you wanted lightboxed, but didn't want all the fanciness of all the lightbox-related plug-ins out there? Lightbox_me is for you. Lightbox_me is an essential tool for the jQuery developer's toolbox. Feed it a DOM element wrapped in a jQuery object and it will lightbox it for you, no muss no fuss. Features Lightbox_me handles all of those annoying edg
なぜみんなlightboxを使うの？
なぜみんなlightboxを使うのだろうか。 あれ、迷惑なだけだと思うのだ。 文章と比較しながら画像を見ることが出来ないし、視覚的には別ページっぽく見えるのに、ブラウザの戻るボタンを押すと前のページに移動してしまう。 Flashが叩かれていたときによく言われていたことをそのまま繰り返しているじゃないか。 lightboxって、何がいいの？ 何も便利になっていない。
つくるぶガイドブログ: Lightboxのデザインをカスタマイズしてみよう（前編）
こんにちは、HTML+CSS担当の小森です。 スライドショーやサムネイル画像の拡大でよく見かける「Lightbox」のライブラリ。 気軽に取り入れられるライブラリでもあって、すっかり定着した感がありますね。 今回はこのLightboxのデザインをカスタマイズしてみたいと思います。 Lightbox系のライブラリは本当にたくさんありますが、 ここでは、定番の元祖Lightboxを使用してみます。 Lightbox 2（デモあり） http://www.huddletogether.com/projects/lightbox2/ レイアウト構造 HTMLソースをのぞいてみると、クリックをしたときに 画面全体を覆う半透明レイヤー（id="overlay"） 拡大画像配置レイヤー（id="lightbox"） がJavaScriptによって描画されるしくみになっています。 また、拡大画像配
coolに画像を表示する。 | 我楽
という訳で、Lightbox JS なわけだが。（笑） 最近、コメント等のやり取りがないと言われてしまったので、とりあえず絡まないとなぁと言うわけでもないのだが、ここからひろってきましたよ。（爆） ■TB to Lightbox JS で画像を表示する by 小粋空間 サムネールをクリックすると、オーバーレイで画像を表示してくれるスクリプト。coolで良い感じだったので入れてみた。ただ、index ページでは機能するんだけど、個別エントリーアーカイブでは機能しないので、トップページからサムネイルをクリックしてみてくらさい。 ※エントリーアーカイブ等での対処方法を早速あげていただきました。loading.gif を読みに行く時に、パスが違うので引っかかってたようです。ありがとうございます。 設置方法は yujiro さんのところ参照いただければ書いてあるのでそっちを参照ください。一応、MTで
Lightbox JS の rel 属性を自動付与する
Lightbox JS を起動するには a 要素の rel 属性に "lightbox" を付与しなければならないという条件がありますが、手動で付与するのは結構面倒です。 ということでご質問を頂きましたので、rel 属性を自動付与する（あるいは rel 属性を付与せずに Lightbox を起動する）方法をいくつかご紹介します。 rel 属性なしで Lightbox JS を起動する Movable Type のアンカータグ挿入ボタンに rel 属性を自動付与する Movable Type のアップロード画面からのサムネール画像リンクに rel 属性を自動付与する Serene Bach の画像リンクに rel 属性を自動付与するプラグイン １．rel 属性なしで Lightbox JS を起動する ページ内にある全ての画像リンクに対し、Lightbox JS を起動する方法です。a 要素
Lightbox JS v2.0で画像をかっこよく拡大表示
Webデザインや配色に役立つ（かもしれない）テクニック、便利なツールを紹介しています。 /*無駄にエロいのは仕様です*/ 01 About 02 Blog 03 Color 04 Design 05 Love 06 etc かなり乗り遅れたようですが「Lightbox JS v2.0」を導入してみました。 とりあえず、上の画像をクリックして確認してみてください。 Lightboxは、サムネイルを同じページ内に拡大してくれるスクリプトです。 （JavaScriptが無効になっている場合は正しく表示されません） 設置は簡単なので、画像をかっこよく見せたいっという方はレッツ トライ！ Lightbox JS v2.0導入の手順 まず、"Lightbox JS v2.0"からファイルをダウンロード ダウンロードしたファイルを解凍 ファイルをアップロード HTMLにPart 1 を追加 あとは、次の
Lightbox JS での 背景画像 (overlay.png) の配置場所 - SmallStyle(2006-01-07)
_ Lightbox JS での 背景画像 (overlay.png) の配置場所 Lightbox JS を使って画像表示をかっこよくみせてみるで，Firefox だとポップアップした画像の周りが暗くなって見えるのですが，IE で表示させると画像のポップアップのみで，背景はそのままになってしまいました．Lightbox JS の配布元では IE でもちゃんと背景も表示されてるから，うちのサイトでの CSS 周りで何か問題があるのだろうと調べてみた結果，単純に背景画像の，overlay.png のPATHの指定が間違っていたのが問題でした． Lightbox JS の配布元でダウンロードできる CSS では，IE で透過 PNG を表示させるために以下のようなコードが書かれています． filter: progid:DXImageTransform.Microsoft.AlphaImageL
glayer.js - グレーアウト表示ライブラリ
Lightbox.jsや、Livedoor Readerのフィード追加画面のような、背景全体をグレーアウト表示させるためのライブラリです。(gray＋layerで、glayer.js) Lightbox JS livedoor Reader - RSSリーダー 下記のような機能を持っています。 背景全体を覆うレイヤの表示/非表示が簡単に出来ます。(レイヤを透過表示することにより、グレーアウトを実現) レイヤ自体は、透過PNGを使う方法と、opacityを使う方法の二種類をglayer.cssにスタイルとして定義しています。 フェードイン、フェードアウトしながらのレイヤ表示/非表示も行えます。(この場合は、opacityによるレイヤを透過表示) なお、Ver 2.0 にて、prototype.js、script.aculo.usを使用せずに、glayer.jsのみでフェードイン、フェードアウ
Lightbox JS
Overview Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers. Note: An new version of this script is available: Lightbox JS v2.0 Example To make sense of it all, check out these examples. Click on a thumbnail or text link below: Benefits Places images above your current page, not within. This frees you fr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://firespeed.org/diary2/read/read.php?diary=kenz-1309
leandrovieira.com – Só mais um site WordPress
TripTracker Blog - Slideshow