サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
ReboxというjQueryプラグインを使えば、レスポンシブに対応した軽量のLightbox風の機能を実装することができます。jQueryの他にZeptoにも対応しているとのこと。実際のデモはとてもシンプルなデザインで、モバイルフレンドリーになっているところがいいですね。 [ads_center] Reboxの使い方 Rebox 使い方もすごくシンプルですね。以下は画像単体での場合です。画像を閉じる場合は画面右上にあるバツ印でクローズできます。 $('#sample a').rebox(); 複数の画像をギャラリーとしてグループ化させたい場合には、オプションのselectorを設定する必要があります。 $('#sample').rebox({ selector: 'a' }); オプションは他にも、prev・nextの設定、 loading、speedなど色々と用意されています。 レスポン
Rebox - jQuery or Zepto tiny smallsimple responsive lightbox Ever need a lean,simple, quick lightbox for images that is responsive, delegates, pretty, no required images, includes captions? That is exactly what Rebox does. Instead of using a rediculous amount ofjavascript to restrict image sizes within the window, Rebox usescss max-width. The design requires no images, although if you want to
Lightbox系の画像スライドショーとYouTubeのiframe版埋め込みプレイヤーが重なるのを回避するには » 雑記・その他 [編集] YouTube が iframe 形式の埋め込みコードの提供を先月から正式開始してから、このブログで使っている画像のスライドショーの jQuery プラグイン Colorbox の表示が、YouTube のプレイヤーと重なって表示されているのに今頃になって気付きました。(気付くの遅っｗ) ↓こんな感じで重なって表示されてしまいます 奥が jQuery プラグインの Colorbox、手前が iframe 版 YouTube object/embed タグで Flash を表示する古い形式では、object の param に wmode を追加して transparent を指定 (embed の属性にも追加)してやれば良いのは知っていて、Colo
Thickbox - One box to rule them all. Thickboxを使えば簡単に画像やHTMLファイルの中身をLightBox風にカッコよくページ内表示できます。 画像の場合 必要なCSSファイルとJavaScriptファイルをインクルードした上で、次のように画像タグを<a>タグで囲います。 <a>タグには class="thickbox" を指定し、title属性に画像の説明文を入れます。 <a href="images/image2.jpg" title="画像と一緒に表示させたい文字列" class="thickbox"><img src="images/image2_t.jpg" alt="Image 2"/></a> たったこれだけで、次のようにLightBox風に画像を開くことが出来ます。 titleで指定した説明文が画像の下に入ってます。 次にHTML
View Demos 1 2 3 4 5 Released under the MIT License, source onGithub (changelog) Download Install via NPM npm install jquery-colorbox Compatible with: jQuery 1.3.2+ in Firefox, Safari,Chrome, Opera, Internet Explorer 7+ Supports photos, grouping, slideshow, ajax, inline, and iframed content. Lightweight: 10KB ofJavaScript (less than 5KBs gzipped). Appearance is controlled throughCSS soit can
PHPソース１個で実現されるクールなWEBギャラリー実装プログラム「Pagemap ImageWall」 2010年08月11日- Pagemap ImageWall ? Freeware Web Photo Gallery with slideshow | Pagemap Premium PortfoliosPHPソース１個で実現されるクールなWEBギャラリー実装プログラム「Pagemap ImageWall」. アニメーションやLightBoxなどでモダンな感じに動くギャラリースクリプトです。１ファイルなので設置は簡単です。 動きを実際に見てみる 設置にするには、phpが動くサーバを用意した後、パッケージをダウンロードして「index.php」を開き、$config の変数を設定します。 ヘッダー画像や背景、文字色、カスタムCSSと、画像が入っているディレクトリの指定等をしてアップロ
画像をクリックすると、背景が暗くなって画面中央に画像がうにょ～んと開く透過レイヤー風効果を加えるのが、かの有名な「Lightbox」ですが、「Videobox」はそのムービー版です。対応しているのはYouTube、Google Video、Metacafe、iFilmなど。自分で作成したFlashも利用できます。 詳細とデモは以下から。 Videobox: Lightbox for videos, Youtube, Metacafe,Google Video, iFilm http://videobox-lb.sourceforge.net/ 上記ページにあるサムネイル画像をクリックすれば実際にどんな感じで表示されるかを確認できます。 YouTubeの場合 MetaCafeの場合Google Videoの場合 iFilmの場合 オリジナルのFlashの場合 最新版はムービーの縦横幅を指
Since the first thread showing you how to execute Lightbox scripts from Flash was such a big hit, I decided to write another showing you how to gain even more functionality in this regard. Tonight I will be showing you how to initiate a Lightbox containing a Flash movie from a Flash movie, and how to initiate Lightbox groups containing images as well as Flash movies. All of the following scripts c
LightWindow 2.0とは? LightWindow 2.0はAjax(非同期通信処理)を利用して画像を表示するライブラリです。同じ種類のライブラリとしてはLightBoxやThickBox、GreyBoxなどがあります。その中でLightWindowは最も高機能なライブラリに位置しています。ページや画像だけでなくQuickTimeムービーやFlashムービー、PDFや他のサイト表示など非常に多くのデータをページ内に表示させることが可能です。 LightWindow 2.0はこのURLにあるページからダウンロードすることができます。 LightWindow 2.0公式サイト ページの一番下の方にある「lightwindow.zip(v2.0)」と書かれた文字をクリックするとダウンロードが行われます。 lightwindow.zip(v2.0)をクリックする ダウンロードされたファイ
画像だけでなく、Flashや動画もかっこいいインターフェースで見せたい。 そんなあなたにおすすめなのが、『Shadowbox.js』。Flashや動画にもlightbox効果をあたえてくれるJavascriptだ。 『Shadowbox.js』では、画像やFlashや動画をクリックすることで、周りがグレーアウトするインターフェースを作ることができる。 周りがグレーアウトすると、Flashや動画が映えてとても綺麗だ。 以下のブラウザに対応しているほか、 ・Firefox 1.5+ ・Camino ・Safari 2+ ・Opera 9+ ・Internet Explorer 6+ ライセンスは GNU Lesser General Public License となっている。 かなり使えるJavascriptではないだろうか。 Flashや動画にもlightbox効果をあたえてくれるJava
ウィンドウサイズよりも大きな画像を表示した際に、画像の拡大ができます。 表示画像のサイズと表示位置がリアルタイムでウィンドウサイズに追従します。 効果画像を貼付けることができます。 マウスホイールで画像の拡大率を変更することができます。 拡大した画像はマウスでドラッグできます。 設置方法は Lightbox JS とほとんど同じです。html ヘッダに lightbox_plus.js を追記します。 <script type="text/javascript" src="lightbox_plus.js"></script> Lightbox を有効にする全てのリンクに rel="lightbox" 属性を追記します。 ver 20090707 より spica.js が不要になりました。lightbox_plus.js に全ての内容が記述されています。 "lightbox_plus.
Update: Version 1.1 released 2/8/08.Good bug fixes + Opera compatibility! ...so I fought back the charging Guanaco, immediately hopped on my paraglider, and basically caught the first flight out of Chile — but not without dealing with some cantankerous customs inspectors while drinking a cool glass of chicha. Really sorryit took so long! But hey, two years later,it's finally done! SmoothJavasc
通称『 Lightbox 』のまとめ記事ですね。 jQuery、prototypeの両方をカバーしている記事で、非常にボリュームのあるエントリーがあったのでご紹介。 使い易いLightbox Lightboxって何？っという人がいたらまぁ以下の画像をクリックしてもらえればわかります。 （携帯ユーザーのアクセスが最近多いですが、携帯では確認出来ません） とりあえずページを全て読み込んでからでないとJavaScript動かないようにしてるので、このブログのページを全て読み込んでからクリックしてみてくださいませ。 こんな感じでちょっとコジャレた味のある演出効果が得られるスクリプトですね。 興味のある人は試して見ると良いかもしれない。 １）Lightbox2 Lightbox系という一つのジャンルを生み出した最もオーソドックスなタイプ。 prototype.jsが必要になります。 ２）Lightb
こんなこともあるんだ、ってことで動物に餌をあげる時は注意しなきゃね。 ということで、ケープタウンのダチョウ農場で女性がダチョウに手のひらから餌をあげていたら、何かの拍子に指輪が抜け、そのままダチョウの胃の中に入っていく瞬間を捉えたビデオです。 これ、どうするんでしょうかね。やっぱり数日間ダチョウの糞を調査することになるんでしょうか。普通の指輪だったら諦めるんだろうけどねえ。 @bikearth_ FOLLOW USIT’S FUN Where did i lose my ring ? The truth in a video I took #lostring #southafrica #ostrich #ostrichegg #ostrichtiktok #prank #thug #capetown #ostrichfarm #funny #funnyanimals #autruche
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
