TAG : Lightbox

jquery jQuery lightGallery (Version 1.2.x) の使い方や設定

2016年1月16日

jQuery LightBox 系プラグイン lightGallery の基本的な使い方や設定に関する個人的なメモ。この時点での lightGallery のバージョンは「Version 1.2.13」。以前「Version 1.1.4」の時にも調べたけれど、最近使おうと思ったらバージョンが上がっていました。Version 1.2.0 で全面的に書き換えたとなっています。(Completely re-written the plugin..) lightGallery ホーム(デモ) lightGallery GitHub 目次 jQuery light…

続きを読む

jquery jQuery lightGallery の使い方や設定

2014年12月30日

追加情報 Version 1.2.x については「 jQuery lightGallery (Version 1.2.x) の使い方や設定」をご覧ください。 jQuery LightBox 系プラグイン lightGallery の基本的な使い方や設定に関する個人的なメモ。この時点での lightGallery のバージョンは「Version 1.1.4」。 ライセンス:MIT License レスポンシブ対応 Youtube Vimeo Video and html5 videos 対応 Slide and Fade アニメーション iframe 対応…

続きを読む

jquery jQuery fancyBox v1.3.4 の使い方や設定

2014年12月29日

jQuery fancyBox v1.3.4 の使い方や設定に関する個人的なメモ。 fancyBox は v2.x からライセンスが変わり、商用(営利目的)の場合は有料となっているため、古いバージョンを探したら以下のサイトにあった。このサイトと本家(?)の fancyBox との関係は不明。 http://fancybox.net v1.3.4 のライセンスは MIT and GPL licenses。 MIT and GPL licenses(以下は概要であり、正確でない可能性あり) 無償(無保証) 利用/改造/再配布可能 著作権表示義務あり 商用利用…

続きを読む

jquery jQuery fancyBox v2 の使い方や設定

2014年12月29日

jQuery プラグイン fancyBox の基本的な使い方や設定に関する個人的なメモ。この時点での fancyBox のバージョンは「v2.1.5」。 関連ページ:「jQuery fancyBox v1.3.4 の使い方や設定」 目次 jQuery プラグイン fancyBox のダウンロード fancyBox のページの「license & download」をクリックし、「Download v2.1.5」をクリックしてダウンロード。 ライセンス:Attribution-NonCommercial 3.0 Unported(表示 &#821…

続きを読む

wordpress WordPress で Magnific Popup を使ってみる

2014年6月5日

Magnific Popup を WordPress で使う際のメモ。 現時点ではまだ WordPress 用のプラグインはできていないが、いずれはプラグイン化されるとのこと。 目次 基本的な使い方等については、よろしければ以下をご覧ください。 関連ページ:Magnific Popup を使って見る Magnific Popup のダウンロードと読み込み Magnific Popup を「配布ページ」からダウンロード(ページ右側の「Download ZIP」から) ダウンロードすると「dist」というフォルダがあるのでその中の「jquery.magnif…

続きを読む

jquery Magnific Popup を使ってみる

2014年2月7日

Youtube の動画を Lightbox のようなモーダルウィンドウで表示できるプラグインを探していたところ見つけた「Magnific Popup」。レスポンシブ・デザインに対応している上に機能も豊富で Goole map なども表示可能。使い方などに関するメモ。 目次 Magnific Popup のダウンロードと読み込み Magnific Popup を「配布ページ」からダウンロード(ページ右側の「Download ZIP」から) ダウンロードすると「dist」というフォルダがあるのでその中の「jquery.magnific-popup.min.j…

続きを読む

jquery Youtube を Lightbox のようなモーダルウィンドウで表示

2014年2月7日

Youtube の映像をプラグインを使わずに Lightbox のようなモーダルウィンドウで表示しようと試した際の失敗例。結果的にはプラグインを使用することにしたが、後日何か別の方法が見つかればその際の参考にするためのメモ。 概要 Firefox では問題なく表示・再生できたが、それ以外のブラウザでは以下のような問題が発生。 「停止ボタン」を押さずにモーダルウィンドウを閉じてしまうと音がそのまま鳴り続ける(IEなど) 「停止ボタン」をクリックしても映像は止まるが音が止まらない(Chromeなど) IE の Safari ではモーダルウィンドウを閉じても、…

続きを読む

wordpress WordPress 投稿に挿入した画像を Lightbox のように表示(2)

2014年1月8日

注意 10/12/2014 つい先日気が付いたのですが、この方法を使った場合ページによっては、読み込みが非常に遅くなる場合があることがわかりました。今までは問題がなかったのですが、ある程度投稿の数やアップロードした画像の数が増えるとそうなるのか、WP のバージョンアップに伴いどれかの関数がうまく機能しなくなったのか、原因は今のところ不明です。 よって、この方法は使わないほうが良いと思います。 もし原因がわかれば、追加情報を掲載する予定です。 取りあえずこのサイトでは、「Magnific Popup」という jQuery プラグインを使用することにしました…

続きを読む

wordpress 投稿コンテンツに挿入した画像(メディア)のリンクを抽出する

2014年1月8日

投稿に挿入した画像のリンクをクリックすると Lightbox のような感じで表示するようにしていたが、画像によってはサイズや位置が正しく表示されないことがあったので調べてみた際のメモ。 画像(メディア)の挿入 「メディアを追加」で「添付ファイルの表示設定」の「リンク先」を「メディアファイル」に指定すると画像(メディア)にその画像へのリンクが設定される。 get_posts で画像の情報(URL、高さ、幅)の取得 get_posts のパラメータを以下のように指定すると画像の情報を取得できる。 しかしここに問題があった。 「’post_pare…

続きを読む

jquery テキストをモーダルウィンドウに表示する

2013年11月16日

画像ではなく、テキスト要素をライトボックス風に表示する方法のメモ。 モーダルウィンドウなどを予め HTML に記述しておく場合 a 要素(class=”detail_btn”)をクリックすると、詳細情報(class=”detail_info”)をライトボックス風に表示 半透明のモーダルウィンドウの領域:id=”graylayer” の div 要素 テキスト要素を表示する領域:id=”overlayer” の div 要素 「閉じる」ボタンなども予め HTML…

続きを読む