高機能で非依存のlightboxスクリプト・「lightgallery.js」
lightgallery.jsは高機能で非依存型のlightbox実装のためのスクリプトです。レスポンシブWebデザイン対応、タッチデバイス対応、自モジュール型、YoutubeやVimeo、HTML5 Video等のサポート、iframeやGoogle Mapのサポート、20種から選べるCSS3 transitionsによるアニメーションエフェクト、各SNSへのシェアボタン、ハッシュプラグイン対応、フルスクリーン化対応などなど、よくあるlightboxの機能を詰め込んだようなもので且つ、jQuery等のライブラリに依存せず単体で動作してくれるのが特徴です。モジュールはオートプレイ、動画、フルスクリーン化等がデフォルトでビルトインされているみたいです。ファイルサイズは非圧縮の状態で42KB、圧縮版で24KBほどです。なかなか良いのでは。ライセンスはApache 2.0。 lightgalle
レスポンシブで全画面やズーム表示に対応したLightBox実装「Chocolat」:phpspot開発日誌
Chocolat - jQuery responsive lightbox レスポンシブで全画面やズーム表示に対応したLightBox実装「Chocolat」 Lightboxは色々ありますが、ユニークなLightBoxクローンの１つで、全画面やズーム表示等は便利ですし、レスポンシブということで使いやすそうです。 関連エントリ レスポンシブで軽量なLightBox実装「Rebox」 シンプルで必要最低限だけどレスポンシブなLightBox実装「lighterbox」 ページサイドにカッコよく表示できるLightBox「Strip」
レスポンシブデザイン対応のlightbox系プラグイン＋コンテンツスライダー系プラグイン | バニデザノート
・シンプルイメージlightbox ・ギャラリーlightbox ・videoやmapのポップアップ ・Ajaxポップアップ など、使い勝手がよい基本機能が揃っています。 →Unslider 関連記事 きっと初心者でもわかる、HTMLの書き方の考え方。 2014/12/14 読んでもらえる、ファンになってもらえる、ブログの書き方とデザイン。 2014/11/20 web制作で気疲れしないようにする方法を考えてみました。 2014/10/17 最近気になったウェブ制作に関するキーワードを振り返ってみる 2013/06/30 レスポンシブデザイン対応のlightbox系プラグイン＋コンテンツスライダー系プラグイン 2013/05/31 自分でできる！Facebookページの活用方法 2013/04/11 Webで発信するすべてのWEBビギナーさんへ。突然犯罪や裁判に巻き込まれないようにするため
ブログやサイトで使う写真や画像を自動的にLightBoxで表示する方法
とある友人が、先日エントリーした「札幌の花火大会を見てきた：フォトアルバム」をみて、 「写真をクリックしたら、画面に綺麗に表示されるJavaScript、 それの導入方法が知りたい。！」 という様な連絡があった。 メールで書いて送ろうかとも思ったんだけど、 自分でも再度復習を兼ねて、ブログのエントリーにしてみた。 以前にもエントリーしたことがあるのですが、 今回もjQueryとそのプラグインを使って、 ブログとかサイトで写真や画像をLightboxを使って表示させる方法を説明します。 写真を張って、その写真へのリンクをつけるだけで、 自動的にLightboxで表示させる方法も書いておきます。 ちなみに以前のエントリーは関連エントリーを参照してください。 まずはjQueryを使えるようにする 今回もjQueryを使ってのものになります。 jQueryはサイトからダウンロードしたのをアップして
【Lightbox2】表示画像のサイズをブラウザに合わせて自動化する 知識Ｚ（ゼータ）
キレイで便利なlightbox2ですが、画像そのものが大きいとブラウザをはみ出てしまうのが盲点でした。 http://lokeshdhakar.com/projects/lightbox2/ lightbox.js: preloader.onload = function() { $image.attr('src', _this.album[_this.currentImageIndex].link); $image.width = preloader.width; $image.height = preloader.height; return _this.sizeContainer(preloader.width, preloader.height); }; preloader.onload = function() { $image.attr('src', _this.album[_
スワイプできるLightBox実装jQueryプラグイン「Swipebox」:phpspot開発日誌
Swipebox | A touchable jQuery lightbox スワイプできるLightBox実装jQueryプラグイン「Swipebox」。 LightBoxが最初に出た時はタッチデバイスがこんなにも流行っているとは思いませんでしたが、今やタッチデバイスの勢いは留まることを知りません。 というわけで、タッチデバイスでも画像をスワイプで送ることのできるjQueryプラグインが公開されています。 PCでも動作するように設計されており、これから実装するならスワイプが標準対応のものが便利そうです。 ５年後、１０年後はタブレットが主流となっていると仮定すると、こうしたプラグインの類もほとんどがスワイプ対応なんていうことになっていそうですね。 関連エントリ 今こそ知っておくLightbox風プラグイン20+
今こそ知っておくLightbox風プラグイン20+:phpspot開発日誌
20 Useful jQuery Lightbox Plugins 今こそ知っておくLightbox風プラグイン20+。 LightBoxが登場して7年ぐらい経つんでしょうかね。色々なところで見るようになったLightBoxのインタフェース。 新しいウィンドウを開く部分の軽量化、ポップアップブロック対策などとして広く使われるようになりました。 派生スクリプトも多数出てきていますので、定番からマイナーなものまで、まとまっていて選択の際に便利かも。 そんなこんなで、このブログも7年ぐらいほぼ毎日更新を続けていますが、LightBox登場あたりから7年も経つのかと時の流れの速さを感じています。 関連エントリ CSS3で出来たクールなLightBox実装チュートリアル
動画にも対応のLightbox風ポップアップ機能付きギャラリー系WordPressテーマ・Dione
ポートフォリオやギャラリーに良さそう なWordPressテーマ・Dioneのご紹介。 いくつも存在しますが、いくつ覚えて おいても損は無いですよね。こちらは 動画と画像をLightbox風にポップアップ させる事が出来ます。広告の管理も しやすいようになっています。 ギャラリー系テーマは沢山ありますが、こちらは縦長の画像に適しています。 シンプルデザインはギャラリーテーマで定番ですね。管理もしやすいように出来ています。 IETesterでのIE6です。フッターが崩れるのと、ヘッダが通常はfixされているのが効かないだけで表示は概ねOKです。フッタはcssを調整して直してください。 Dioneの使い方 Dioneはカスタムポストタイプでの投稿がメインとなります。テーマを有効化すると上記のように専用の投稿項目が出ます。 動画を表示させたい場合はTrailer video項目にURLを入れてく
AviaSlider - a unique jQuery Image slideshow plugin!
Features of the Avia Image Slider 8 unique transition effects Lots of easy to set options to create your own effects Included Image preloader Autoplay that stops on user interaction Valid HTML5 and CSS 3 Markup Packed version only weights 8kb Supports linked images already prepared to work with prettyPhoto Lightbox works with jQuery 1.32 and higher Browser Support Internet Explorer 6 and higher Sa
指定した要素を直接していしてLightBox風表示させられるjQueryプラグイン「Lightbox_me」:phpspot開発日誌
指定した要素を直接していしてLightBox風表示させられるjQueryプラグイン「Lightbox_me」 2010年05月31日- Lightbox_me - Stupidly Simple Lightboxing 指定した要素を直接していしてLightBox風表示させられるjQueryプラグイン「Lightbox_me」。 通常、LightBoxというと、画像や動画などをポップアップで表示する際に用いられます。別ページを開く場合にもiFrameを使ったりして実現されますが、このプラグインは少し違います。 <div id="hogehoge">hogehoge</div> という要素があったとすると、$("#hogehoge").lightbox_me(options) のようにすることで、指定した要素自体をLightBox風に表示させられます。 このプラグインを使うことで、予めHTM
stimuli.ca » Lightbox-2 plugin for Wordpress
Get the latest version here (last updated: 2010/02/10). See it in action below. Lightbox 2 allows you to present images in a slick window, while darkening the rest of the page. It makes your site look professional, and adds very little to page load times. It does not require any browser plugins to work, and works on just about every web browser out there! When a browser doesn’t support javascript,
Flash コンテンツが z-index を無視して覆い被さってしまう件
えー恥ずかしながら・・・Flash について全くの素人で全然詳しくありません。 最近 Amazon から来ていたメールでお買い得ウィジェットってのを知って、面白そうなので使っていたんですけど、どうも z-index を無視して一番上に表示されてしまいます。Lightbox での画像拡大と非常に相性が悪いです。 こうなっちゃいます。 拡大表示したい画像の上に Flash が永遠とぐるぐる表示されています。こりゃ堪らんわい。Flash と z-index の関係については過去にさんざん既出なので同じような解決方法は山ほど見つかると思いますけど、自分的メモとしてエントリしました。 Flash コンテンツで z-index を有効にする方法 Flash に wmode ってパラメータがあります。このパラメータで Flash の背景を透明化または不透明化の設定が可能です。この透明化の機能を利用するこ
画像ポップアップ_Slimbox（読込早い）
Introduction Slimbox is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the MooTools javascript framework. It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2. Note: Slimbox 2 is now also available. It is using the jQuery library instead of MooTools. Demo Visit the
Slimboxを使ってみる
LightboxコンパチブルのSlimboxを使ってみました。 Lightboxがたぶん元祖だと思います。 Lightboxが何か簡単に説明するとホームページやブログなどで画像をかっこよく表示する為のJavaScriptでできたプログラムです。とりあえずテストのページを作ってみたので見ればわかると思います。 https://blog.kumacchi.com/gagagagaga/index.html Lightboxには派生したLightboxもどきの色々な種類の似たようなプログラムが存在します。それぞれ特徴があり、扱えるコンテンツが画像以外もつかえたり、表示のエフェクトがかっこよかったりと色々です。 今回はSlimboxを使う機会があったので紹介したいと思います。 ▼Slimboxここからダウンロードする事ができます。詳しい説明もここで見ることができます。(英語) http://www
FC2ブログでLiteboxを使う
2024年2月1日 拙作プラグインの譲渡について 拙作のMovable Typeのプラグインを、株式会社ワールドイズマインに譲渡いたしました。 長きにわたり拙作のプラグインをご愛顧いただき、ありがとうございました。 拙著「FC2ブログスーパーカスタマイズテクニック」の中で、FC2ブログでLiteboxを使う方法を解説しています。 ただ、書籍が出てからFC2ブログの仕様が変わり、書籍に書いてある手順ではLiteboxを導入することができなくなりました。 そこで、現在の仕様にあわせた導入方法を解説します。 1.Liteboxをダウンロードする LiteboxはTyler Mulligan氏が作ったJavaScriptで、以下のページで配布されています。 http://www.doknowevil.net/litebox/ このページに接続し、ページを下の方にスクロールしていくと、「Downlo
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
Litebox- Same great taste, less calories
Litebox Check out the front page If you haven't been to the front page in some time, check it out. I've started blogging about some tips and tricks. Expect some full featured scripts some time soon. What is it? Litebox is a modified version of Lightbox v2.0 created with one thing in mind, size reduction. Litebox utilizes the 3kb javascript library moo.fx in association with prototype.lite, giving
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
open-arms.biz
unic.net.my
Slimboxをrel属性なしで動作させる: しまじぃにっき