モーダルウィンドウを考える | Accessible & Usable
公開日 : 2015年7月6日 (2024年2月12日 更新) カテゴリー : アクセシビリティ ウェブサイトのユーザーインターフェース (UI) に、「モーダルウィンドウ」と呼ばれるものがあります。ページ遷移を伴わずに、ページ上にウィンドウをオーバーレイ表示させるもので、このウィンドウが前面で開いている間は背景側にある元ページが操作対象外になることから「モーダル」という名称が付いています。実装例としては、フォーム、アラート、画像の拡大表示 (いわゆる Lightbox 系と呼ばれるもの) などが挙げられます。 モーダルウィンドウは、あるページを開いているというコンテキストを維持しつつ付加的にコンテンツの提示ができる利点がある反面、基本的なユーザビリティやアクセシビリティが欠落しているケースが多く見受けられます。以下の観点を意識しながらデザインや実装をすることで、基本的なユーザビリティやア
Bootstrap Lightbox
Lightbox for Bootstrap Utilizes Bootstraps modal plugin to implement a lightbox gallery - GitHub Install Grab the latest CSS / JS files from the CDN: https://cdnjs.com/libraries/ekko-lightbox. Or, with bower: bower install ekko-lightbox --save Or, download the files directly: https://github.com/ashleydw/lightbox/tree/master/dist Place this near on your page, probably near the end of the body secti
lightbox
prettyPhoto prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox. It is very easy to setup, yet very flexible if you want to customize it a bit. Plus the script is compatible in every major browser, even IE6. It also comes with useful APIs so prettyPhoto can be launched from nearly an
Lightboxes and keyboard accessibility | 456 Berea Street
The Lightbox effect is showing up pretty much everywhere on the web these days. There are approximately one million different implementations that basically do the same thing: when the user clicks on an image, the screen is dimmed and a larger version of the image is displayed until the user closes it by clicking a ”Close” link or icon. Many people love this effect, and it definitely can be very u
秋元@サイボウズラボ・プログラマー・ブログ: lightboxライブラリ37個の比較表
写真などをページ上で強調表示する、いわゆるlightbox効果を実現するJavascript+CSSライブラリを37個も集めて、ライブラリサイズやそれぞれの機能、どのJavascriptライブラリを使っているかなどで絞り込めるようにした比較表が発表されている。 このようなUI系のライブラリを使う際には、自分が普段使っているベースライブラリとの親和性などが重要だと思うので、このような形でまとまっているとdel.icio.usで”lightbox”タグで絞り込む、といった調べ方よりも楽にライブラリが選べていい。 via del.icio.us/popular この記事は移転前の古いURLで公開された時のものですブックマークが新旧で分散している場合があります。移転前は現在とは文体が違い「である」調です。(参考)記事の内容が古くて役に立たなくなっている、という場合にはコメントやツイッターでご指摘い
iBox - Lightweight inline popup
iBox is a lightweight script that lets you overlay images and documents in a small dialog without a page reload. It's built to be easy to install and use, while offering great flexibility. The quick start shows example code and explains how to use it. TopImages iBox easily supports the standard overlay of images, in many sizes, and will automatically scale down the window if the browser's viewpane
lightbox のキャプションにリンクを張る - Atelier
22/04/20 隠居の散策：春が来た(2) 蝶がとびだした 22/04/15 隠居の散策：春が来た(1) 22/04/14 隠居の散策：桜が咲いた(7) 22/04/13 隠居の散策：桜が咲いた(6) 22/04/11 隠居の散策：桜が咲いた(5) 22/04/10 隠居の散策：桜が咲いた(4) 22/04/08 隠居の散策：桜が咲いた(3) 22/04/05 隠居の散策：桜が咲いた(2) 22/04/02 隠居の散策：桜がさいた(1) 22/03/30 隠居の散策：初春点描(3) 22/03/21 隠居の散策：初春点描(2) 22/03/17 隠居の散策：初春点描(1) 22/02/19 隠居の散策：梅一輪一輪ほどの、 22/02/07 隠居の散策：立春 22/01/29 隠居の年始の仕事：e-Tax（インターネットで確定申告する） 21/12/30 隠居のお遊び：写真２枚 21/12
Deneme Bonusu Veren Bahis Siteleri - En iyi Bonus Veren Siteler Nelerdir?
Ücretsiz verilen bonusların free bet ve deneme bonusu adı altında sitelerde verildiği bilinmekte. Bu tür bonuslar küçük miktar olsa da, bazı oyuncular için önemli. Onlar risk almayı istemediklerinden bu bedava bonuslarla para kazanma şansı yakalıyorlar. Çoğu bahis sitesinde güncel deneme bonusları var. Fakat büyük sitelerde bu bonuslar daha büyük miktarlarda verilmekte. Deneme bonusu veren bahis s
複数のライブラリに対応したLightboxスクリプト -Shadowbox.js
Shadowbox.jsは、Prototype、jQuery、YUI、Extなど複数のJavaScriptのライブラリに対応した、画像や動画などを拡大表示できるLightbox風のスクリプトです。 Shadowbox.js Media Viewer デモ ダウンロード Shadowbox.jsは複数のライブラリに対応しているというだけでもすごいですが、画像や動画の拡大表示にもさまざまなオプションがあり、多数あるLightbox風スクリプトの中でも充実した機能を持っていると思います。 下記に主な特徴を挙げます。 拡大する際のコードは、簡易です。 <a href="image.jpg" rel="shadowbox">Image</a> 併用するJavaScriptのライブラリは、下記の中から好きなものを選べます。 jQuery Prototype + Scriptaculous YUI Ex
jQuery.lightBox を画像ファイル以外にも対応させる - dogmap.jp
素晴らしいです。動作がとても軽いのがGoodです。 ありがとうございました。 お礼かたがた、ずうずうしくも要望がありまして、コメントさせて頂きました。 できれば、pdfファイルにも対応していただけると、とても嬉しいです。 バージョンアップのときにご検討頂ければと思います。 ピンバック: LightBox風に iframe を表示 | メシウマ状態 飯の旨いおかずがてんこ盛り 自サイトのリンク(sjis)をlightpopで表示させた際文字化けしてしまいます。 ajaxでページデータを取得しているためかと思いますが、iframeも検討してみてはいかがでしょうか？？ うーん、iframe って好きじゃないんですよね。 どうしてもと言うことであれば、fileTypes 配列の一番最後を ,{ type: 'Contents' ,match: function(strUrl){return tru
【ハウツー】ゼロからはじめるLightbox 2.0 - 簡単にWebで写真アルバム機能を (1) Lightbox 2.0とは？ | パソコン | マイコミジャーナル
Lightbox 2.0とは？ Lightbox 2.0はAjaxを利用して画像を表示するライブラリです。画像は単独の表示だけでなく、複数画像をグループ化してスライドとして表示させることもできます。 Lightbox 2.0の大きな特長としてスクリプト(プログラム)を記述しなくてよいという点があります。つまり、全くプログラムが分からない人手も気軽に使う事ができます。Lightbox 2.0ではHTMLの<a>タグのrel属性にlightboxの文字を記述するだけでできてしまうという手軽さです。また、JavaScriptのコードが実行できるブログであればLightbox 2.0を利用することができます。 Lightbox 2.0は作者であるLokesh Dhakar氏のサイトからダウンロードすることができます(*1)。 「Lightbox2のダウンロードサイト」 「Lightbox v2.0
[JS]Lightboxのいい点・悪い点
37 signalsで、Lightboxの是非というか議論がありました。 Been lightboxed lately? 個人的には、スクリプト自体は好きですが、設置するのはどちらかというと否定的です。 もちろん、写真のギャラリーなどにはかっこいいと思います。 とはいえ、当サイトでも画像拡大系のスクリプト(Highslide JS)を使用しています。 例：Highslideの実装ページ 使用している理由は、サイトのレイアウトに依存せず大きい画像(関連画像)が掲載できるためです。 また、背景一面がブラックにならずに、コンテクストが失われにくいためです。 以下に、上記サイトで議論されているそれぞれのいい点・悪い点を列挙してみました。 今度、クライアントに設置の依頼を受けた際にでも、再考しようと思います。 ポップアップウインドウよりいい。 ギャラリーなどには適している。 別ウインドウや別ページに
Create a Lightbox effect only with CSS – no javascript needed | Emanuele Feronato
Get the most popular Phaser 3 book Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way. Get the book You may call it Lightbox, or Greybox, or Thickbox, but it’s always the same effect. When you are on a page, and click on a photo or trig some event, a Lightbox is an effect that fade
Lightbox.js のような写真のスライドショーするライブラリ沢山：Goodpic
This shop will be powered by Are you the store owner? Log in here
ThickBox 3.1
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal. Features: ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 20k, uncompressed it's 58k. The ThickBox JavaScript code and C
STUDIO NH | blog » Lightbox.jsのネタまとめ
いつも鷹野さん[誰]にネタを使われて（!?）います、CSS Niteに先日もいってきました。 そこであげられていたのも含め、今回のお題、Lightbox jsのネタをいくつかまとめてみました。 ちなみに、うちの倉庫[謎]には、当面ストックはありませんのであしからず。 Lightbox http://www.huddletogether.com/projects/lightbox/ 本家本元。すべてはこれがはじまり。 LightBox Plus http://serennz.cool.ne.jp/sb/sp/lightbox/ Lightbox 本家の改良版。拡大できたり閉じられたり。 Lightbox coolness http://mudabone.com/aietc/?p=383 Lightbox 1.0の亜流。 Leightbox http://www.e
Highslide JS - JavaScript thumbnail viewer
What is Highslide JS? Highslide JS is an image, media and gallery viewer written in JavaScript. These are some of its advantages: Tip! Use the visual Highslide Editor to set up your Highslide installation without writing code. Quick and elegant looking. No plugins like Flash or Java required. Popup blockers are no problem. The content opens within the active browser window. Single click. After ope
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3でライトボックスする際に使えるライブラリ10選 | Web活メモ帳