vex – Beautiful, functional, modal dialogs in JavascriptWhen opening a vex, you can assign your own class names to everything. This dialog is using the "Wireframe" theme by simply passing the option cssClass: "vex-theme-wireframe". Click the arrow to see the "Operating System" theme.
PhotoSwipe
What’s new in v5Code quality and rewrite in ES6The script is now distributed as an ES module and does not require a build step to use. The documentation is also updated and now includes more examples. Simpler initialization and dynamic import supportPhotoSwipe now supports dynamic import and does not block page rendering. <script type="module"> import Lightbox from './photoswipe-lightbox.esm.js';
PhotoSwipeの使い方！Light Boxの決定版を導入しよう！
アニメーション、スライド、ダブルクリックによるズームなど、機能盛り沢山のライトボックス系ライブラリ、Photoswipeの使い方を紹介します。
animatedModal.js
animatedModal.js is a jQuery plugin to create a fullscreen modal with CSS3 transitions. You can use the transitions from animate.css or create your own transitions. DOWNLOAD VERSION 1.0
必要な機能は全部入ったモダンなLightBox実装jQueryプラグイン「lightGallery」:phpspot開発日誌
jQuery lightGallery 必要な機能は全部入ったモダンなLightBox実装jQueryプラグイン「lightGallery」 軽量、カスタマイズ可能、レスポンシブ、全画面、ズーム、自動再生等、全機能そろったlightbox実装。 これからlightbox実装をするならこういった物が選択肢になってきそう 関連エントリ レスポンシブで軽量なLightBox実装「Rebox」 ページサイドにカッコよく表示できるLightBox「Strip」 レスポンシブで全画面やズーム表示に対応したLightBox実装「Chocolat」 シンプルで必要最低限だけどレスポンシブなLightBox実装「lighterbox」
[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js
デモのアニメーションGIF ここでは「Esc」キーを拡大画像から元画像に戻す際に使用していますが、スクロールしてコンテンツに戻る時のアニメーションも非常に軽快です。 Zoom.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 アニメーションのエフェクトはBootstrapのtransition.jsに依存しており、Bootstrapのjsファイルかtransition.jsを記述します。 <head> ... <link rel="stylesheet" type="text/css" href="css/zoom.css"> </head> <body> ... コンテンツ ... <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/j
![[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/d408ea9798d5866f690b92bcfb70e29e4a50a739/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015051309.png)
[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)
私がよく使っているjQueryプラグインまとめ（スライダー、モーダルウィンドウなど）
こんにちは、暑いですね。脇汗すごいですね。僕が。 さて今回はWebページ作成時に、私がよく使っているjQueryプラグインをまとめてみました。（たまにjQueryが必須でないものもあります。） ※紹介しているプラグインを使用する際、ライセンスは各自で再度確認してくださいませ。 Owl Carousel 個人・商用利用可能。レスポンシブでいい感じに動作してくれるカルーセルスライダーです。動作もシンプルで綺麗だし、マークアップも簡単。テキストもOK。お気に入りのプラグインです。 Owl Carousel bxSlider 個人・商用利用可能。シンプルなスライダープラグインです。レスポンシブで動作し、カスタマイズもしやすく重宝します。 jQuery Content Slider | Responsive jQuery Slider | bxSlider Glide.js デモページがカッコイイス
[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
スワイプできるLightBox実装jQueryプラグイン「Swipebox」:phpspot開発日誌
Swipebox | A touchable jQuery lightbox スワイプできるLightBox実装jQueryプラグイン「Swipebox」。 LightBoxが最初に出た時はタッチデバイスがこんなにも流行っているとは思いませんでしたが、今やタッチデバイスの勢いは留まることを知りません。 というわけで、タッチデバイスでも画像をスワイプで送ることのできるjQueryプラグインが公開されています。 PCでも動作するように設計されており、これから実装するならスワイプが標準対応のものが便利そうです。 ５年後、１０年後はタブレットが主流となっていると仮定すると、こうしたプラグインの類もほとんどがスワイプ対応なんていうことになっていそうですね。 関連エントリ 今こそ知っておくLightbox風プラグイン20+
jKit - jQuery based UI Toolkit - Index
A very easy to use, cross platform, jQuery based UI toolkit, that’s still small in size, has the features you need, and doesn’t get in your way of doing things! Put jQuery and jKit on all your pages and HTML becomes so much better. And the best thing? You really don’t have to be a programmer to create a trully amazing website! jKit has 99% of all the features you ever need. You don’t have to check
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
15 Cool jQuery Modal Plugins | Tripwire Magazine
15 Cool jQuery Modal Plugins by Lars | Last updated Nov 21, 2012 | jQuery Plugin Collections | 2 comments There are many situations where jQuery modal plugins can be useful for guiding the visitors focus to a specific piece of content. Basically a modal window is a kind of pop-up window that have been embedded into a web page and therefore appears without the need for a new browser window. The tec
ChillBox jQuery Plug-In - Lightbox Alternative | jQuery Lightbox Version
Inspired by Lokesh Dhakar's Lightbox, ChillBox is a simple, unobtrusive script used to overlay images on top of the current page. ChillBox has been developed using the jQuery Framework and is available to download from this page. Why use ChillBox ? Unlike other lightbox versions, ChillBox does not require the use of images for buttons and is fully rendered using jQuery. ChillBox is fully customisa
Lightview “Overlay anything width style”
Lightview allows you to easily create the most beautiful overlay windows using the jQuery Javascript library. By combining support for a wide range of media with gorgeous skins and a user-friendly API, Lightview aims to push the Lightbox concept as far as possible. Lightview uses HTML5 to help you deliver the best experience across every browser. Let it enhance your media automatically or create c
Lightbox内にサムネイルも表示出来るイメージギャラリー系jQueryプラグイン・ppGallery
ポップアップしたLightbox内にサムネイルも表示可能 なjQueryプラグイン・ppGalleryのご紹介です。Lightbox 系のjQueryプラグインの大半は1つずつ見ていくか、 一旦ポップアップを閉じてからもう一度開く必要があり ましたが、ppGalleryは一回開けばあとはサムネイルで 好きな画像に飛べるのでLightboxスクリプトの中でも イメージギャラリーに向いてそうです。 さて、今日は8月6日「ヒロシマ」の日ですね。1945年の今日の8時15分に原爆が投下されました。不幸にしてお亡くなりになられた方々のご冥福をお祈りすると共に、ご遺族の方々に対して心よりお悔やみを申し上げます。 現在、上記のようにGoogleストリートビューで原爆ドームの外と内を見ることが出来るようになっているようですのでチェックしてみてください。 では本題に戻ります。「Lightbox内にサムネイル
[JS]モーダルウインドウを設置するスーパーシンプルなスクリプト -leanModal
モーダルウインドウを設置する必要最小限のカスタマイズを備えた超軽量のjQueryのプラグインを紹介します。 デモページ：サインアップフォーム leanModalの主な特徴 モーダルウインドウが簡単に実装できます。 超軽量（780バイト）です。 幅と高さをカスタマイズできます。 画像は使用しません。 1ページに複数のモーダルボックスを設置できます。 ログインフォーム、サインアップフォーム、アラートパネルなども可能です。 オーバーレイはスタイルシートで簡単にカスタマイズできます。 非対応 スーパーシンプルなため、下記には対応していません。 ギャラリー機能 iframeコンテンツの表示 AJAXコンテンツの表示 IE6 leanModalの実装 Step 1 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dev7studios
ポップアップjqueryTinyBox2 - JavaScript Modal Windows