超軽量画像拡大スクリプトLuminousをFC2で使う方法
Lightbox2, Colorboxは共にjQueryプラグインなのでjQuery本体のファイルが必ず必要です。そしてjQuery依存の場合は常にバージョンとの互換性に注意する必要があります。LuminousはネイティブJSなのでその心配がありません。 Light〜, Color〜 はエフェクトが豪華ではありますが、ちょっと脂っこい気もします。Luminousはスッと出てスッと引っ込むという感じで無駄がありません。もちろんCSS transitionが効きますので動作は滑らかです。ただし動画のポップアップなど多機能を求める場合には向かないという面もあります。 SEOフレンドリーというのは、Colorboxを長く利用されている方は aタグ の rel属性 をトリガーに使っていることがあります。html5ではhtml4時代のようなrel属性の 独自拡張が認められていません (属性値に好き勝手
jQuery不要なLightbox代替スクリプトLuminousが本当に軽量
jQueryって…重いですよね。 各種ブラウザへの対応が面倒くさかった時代には本当にありがたかったのですが、モダンブラウザ全盛の今、jQueryの必要性を感じないことが多くなってきました。 いやホント、長年お世話になっておいてナンなんですがｗ 最近ではLightboxやLityのためだけにjQueryを入れている 画像をクリックしたときにふわりと浮かぶあのLightbox、便利ですよね。 特にブログなどの文章が多い場面では画面遷移せずに見られるLightboxの仕組みは必須だと感じています。 当ブログで使っているWordPressのテーマ、Simplicityでも軽量化されたLityというJSライブラリが使用可能なため使っていたのですが、いくらライブラリが軽量でもjQuery自体が重いのが気になっていました。 jQuery不要のLightbox代替スクリプトLuminousを知る 同じよう
jQuery 不要 Luminous Lightbox の使い方
ライトボックス Luminous Lightbox の使い方 Luminous はとても軽量でシンプルな jQuery に依存しない画像用ライトボックスプラグイン（JavaScript）です。 以下は Luminous Lightbox（v2.3.5/2021-08-03）の基本的な使い方や、ギャラリー表示やキャプションの表示方法、画像枚数と現在の画像位置（インデックス）の表示、webpack でのバンドル、WordPress で表示する方法などの解説（覚書）です。 Luminous Github：https://github.com/imgix/luminous ダウンロード https://github.com/imgix/luminous の右上の「Code」をクリックして「Download ZIP」をクリックするか、本文中（Installation > Manual） の Down
［複数画像対応］軽量な画像拡大スクリプト「Luminous.js」の使い方 | ma-ya's CREATE / WEB DESIGN
こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。 このサイトのGalleryコンテンツ内の画像それぞれをギャラリー風に拡大表示したいな、と思い見つけたスクリプト「Luminous.js」。 挙動がシンプルでファイルも軽量なので採用することにしました。 リリースは二年位前みたいなんですが、使い方を書いてある記事が少ないようなので記事にしてみます。 各ファイルのダウンロード githubよりファイル一式をダウンロードします。 サイト右上の「clone or download」→「downloadZIP」からですね。 Luminous 使うファイル 解答後の「dist」フォルダ内 Luminous.min.js luminous-basic.min.css を使います。（”min”は圧縮の有無。どちらを使用しても大丈夫） 各ファイルの読み込み <link rel="style
Luminous を使ってみる
1. はじめにウェブページ上の画像をポップアップ表示する JavaScript ライブラリである Luminous の使い方について説明します。 Luminous の最大の特徴は、「jQuery を必要としない」ことにあります。例えば、本サイトでも使っている有名な Lightbox は jQuery に依存しています。 2. 事前準備Luminous は npm モジュールとしてインストールすることもできますが、本記事ではダウンロードして使うことにします。 ということで、ダウンロード から ZIPファイルをダウンロードして展開（解凍）しておきます。 展開したうち、今回使用するのは以下の 2つのファイルになります。 dist/Luminous.min.jsdist/luminous-basic.min.css3. 1つの画像を単独でポップアップ表示する場合 以下にコード例を示します。 <ht
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://codepen.io/imgix/pen/wMgOEL
