jQueryって…重いですよね。 各種ブラウザへの対応が面倒くさかった時代には本当にありがたかったのですが、モダンブラウザ全盛の今、jQueryの必要性を感じないことが多くなってきました。 いやホント、長年お世話になっておいてナンなんですがｗ 最近ではLightboxやLityのためだけにjQueryを入れている 画像をクリックしたときにふわりと浮かぶあのLightbox、便利ですよね。 特にブログなどの文章が多い場面では画面遷移せずに見られるLightboxの仕組みは必須だと感じています。 当ブログで使っているWordPressのテーマ、Simplicityでも軽量化されたLityというJSライブラリが使用可能なため使っていたのですが、いくらライブラリが軽量でもjQuery自体が重いのが気になっていました。 jQuery不要のLightbox代替スクリプトLuminousを知る 同じよう
サムネイル画像をクリックすると大きいサイズの画像がモーダルウィンドウ表示される、あの効果。従来、jQuery プラグインの Lightbox などを導入することが多いと思いますが、今回は CSSのみで実装してみましょう。 サンプルコード <!-- HTML --> <div id="sample"> <a href="#figure"><img src="//picsum.photos/100?image=0" alt=""></a> <figure id="figure"> <a id="overlay" href="#overlay"> <img src="//picsum.photos/600?image=0" alt=""> <figcaption>どこかをクリックするとモーダルウィンドウを閉じます</figcaption> </a> </figure> </div> /* CSS
GLightbox. Code name "Gie" A touchable Pure Javascript lightbox with mobile and video support. Images with Description You can add descriptions to your slides, the description position can be set globally for all slides or you can set a different position for each slide. options are: top, bottom, left or right. You can adjust the style the way you want with basic CSS. The description can display h
JQueryで拡大画像のモーダルウィンドが作れる「Lightbox」というプラグインはご存知でしょうか？ Lightboxはサイトにギャラリーを載せる際などに小さな画像を拡大して表示する時によく使われます。 ライセンスもMITなので無料でかつ、商用利用もできて入門者でも簡単に使えるので、JQueryで拡大画像のモーダルを作る際には一番おすすめのプラグインです。 そこで、今回はLightboxをJQueryで使う方法について詳しく解説していきます。 Lightboxとは何か LightboxはJavaScriptで、拡大画像が表示できるモーダルウィンドウが作れるJQueryのプラグインです。 サイトへの導入も簡単でJavaScriptとCSSのファイルをダウンロードするだけですぐに使うことができます。 また、JQueryは1.7以降が安定的に動作するので、別バージョンのものを用意のが面倒な場
WordPressで画像をクリックして拡大できるプラグイン「WP jQuery Lightbox」。手軽にポップアップ表示ができるスグレモノ。｜Dsuke Blog
どうも、Dスケです。 ブログを書くうえで、写真や図版を使って分かりやすく説明すると、読む人にも伝わりやすく、文字ばかりの記事よりも楽しく読んでもらえて良いですよね。 ただ、画像を挿入する際に、「アップする画像のサイズは調整した方がよいのか？」「このサイズで読む人はちゃんと画像が見えているのか？」など、悩むことはありませんか？ 数枚だけ使用する記事なら都度サイズ調整してもよいかもしれませんが、10枚以上になってくるとさすがにシンプルな作業で工数を減らしたい。。。 そんなときに使ってほしいWordPressのプラグイン、「WP jQuery Lightbox」をご紹介します！ WordPressで画像アップロードの際に気になること 「WP jQuery Lightbox」を紹介するその前に、日頃WordPressでブログに画像をアップロードする際に、個人的に気になっていることを書き出してみたい
JavaScriptライブラリ「Lightbox」を使って画像のポップアップを実装する | Free Style
Webサイトのデザインを構築していくうえで、画像に対してクリックアクションで表示に変化を加えることはよくあります。 画像ギャラリーや画像にフォーカスし画像を効率良く見せる方法として、ポップアップで拡大表示するなどを実装したいこともあるでしょう。 画像をクリックした時のアクションは、難しいプログラムを書かないといけないイメージがありますが、JavaScriptライブラリ「Lightbox」を利用することで、簡単に画像をポップアップで拡大表示させることができます。 Lightboxは必要なファイルを読み込んで実装するという、とてもシンプルな使い方です。 ここでは、JavaScriptライブラリ「Lightbox」の使い方をご紹介します。 Lightboxの利用 Lightboxは基本的にjQueryを利用して実装していきますが、jQueryを利用しなくても実装することも可能です。 詳しくは後述
はじめに Googleドライブの画像表示みたいなUIを作りたいと思っていたところ、vue-image-lightbox を使うと 簡単に実現できたので、最低限の実装方法を残したいと思います。 vue-image-lightboxとは？ サムネイルから、画像を拡大表示したり、スライドショーにしたりするための機能を提供しているライブラリです。 参考情報 vue-image-lightbox https://www.npmjs.com/package/vue-image-lightbox ソースコード https://github.com/ryuckel/vue-playground/tree/vue-image-lightbox 今回の記事で実現した内容 以下の画像のようになるところをゴールとします。 記事中は主にライブラリに関係した部分を書いてます。ソースは参考情報から見てみてください。 環
CSSのみでクリックで画像を拡大する（Lightboxもどき）
画像をクリックするとポップアップで拡大表示するプラグインを、HTMLとCSSのみで再現してみます。いわゆるLightboxやfancyboxのようなものです。 この記事で紹介する内容に実用性は全くありません。遊び半分でご覧ください。 デモ画像拡大下の画像をクリックしてみてください。 テキストにも拡大リンクを貼れます。 スイセンの写真を見る 弱点記事に表示する画像と、拡大に使用する画像の2つを読み込む必要があります。SEO的にはあまり良くないと思います。 フィルター（黒い部分）は、画像を開いていない状態のときはpointer-eventsを用いてクリックイベントをオフにしていますが、開いていない状態でも常にフィルターは被さっているので、ちょっとキモいです。 また、pointer-eventsをサポートしていないブラウザで閲覧したときは、ページ全体のリンクがクリックできない状態に陥る可能性があ
【備忘録】LightBox2の設置方法と使い方
LightBox2のついて ホームページ上で画像やギャラリーをクリックした際に、ポップアップウィンドウで画像が拡大されて表示されるスクリプトです。 LightBox2の設置方法 – cdnより google で検索 『 lightbox2 cdn 』 または、 lightbox2 - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers Lightbox is small javascript library used to overlay images on top of the current page. It's a snap to setup and works o... 上のサイトよりコピペしたものが以下になります。 Lightbox2 の css
【脱jQuery】シンプルなlightbox系スクリプト”Luminous”をwebpackで使う方法。ギャラリーも。 | 上間ウェブ店
こんにちは。上間ウェブ店の上間です。 今回は最近よく使うlightbox系のスクリプト、”Luminous”をwebpackで使う方法の紹介です。 シンプルでサクッと実装できます。
tobiiは画像でもiframでも対応できるシンプルで使いやすく汎用的な非依存のlightboxスクリプトです。 任意のHTML要素や画像だけでなく、YoutubeやVimeoなどの動画や任意のWebページなども可能で、グループ化も出来ます。グループ化した際はスワイプにも対応しています。 以下動作サンプルを作りました。 一応貼りますけど、動かないみたい？なのでお手数ですがCodepenで直接ご確認下さい。 設定も非常にシンプルです。 <script src="tobii.min.js"></script>スクリプトを読み込んで const tobii = new Tobii()初期化。あとはマークアップでセッティングします。 <a href="https://www.youtube.com/embed/Yds5jgqmYpE?autoplay=1" data-type="iframe" c
Lightbox Viewerは、異なる照明条件下でのシェーダマテリアル設定の変化を同時に可視化することができます。 V1.0.1: UI Text は、Play モードが入力されていなくても、最初のアクティベーションの後、メッシュの上にレンダリングされません。 V1.0.2: Play modeの修正 Unityの実験的なオプションがなくても、「Play mode」に入ることができるようになりました。 Documentation: https://docs.hai-vr.dev/docs/products/lightbox-viewer GitHub: https://github.com/hai-vr/lightbox-viewer pixivFANBOXで応援しよう!https://hai-vr.fanbox.cc/ Discordでヘルプを提供するようにします。https://di
WooCommerceのLightBoxとWordPressのFancyBoxにおける競合を回避する 更新日: 2019/10/18 公開日: 2016/07/19カテゴリー: WordPress WooCommerceには画像を綺麗に魅せるLightBox系のプログラムが同梱されており、商品詳細ページでの商品画像にデフォルトで適用されております。 しかし、他の固定ページや投稿でも同様にLightBox系の動作をさせようとプラグイン（有名所では「Easy FancyBox」など）を有効化すると、WooCommerceのプログラムと競合してしまいます。画像がオーバーレイで二重に表示されてしまうんですね。 これを回避し共存させる方法が日本語の記事で見当たらなかったのでメモしておきます。 用意されているフックで簡単に対応する以下のコードをfunctions.phpに貼り付けて下さい。これだけ解決
Result こういうベーシックなもの最近は全く見かけなくなりましたけど・・案件になると割と要望は頂くんですよね。というわけで、重めなライブラリを読み込みたくない、でもLightboxでその場に何か表示したい、みたいな用途に便利そうだったのでメモ。 2kb以下でバニラ、且つiframeだろうがHTMLだろうが画像だどうが何でも対応できる、みたいなの。軽量にするためエフェクトも加えられていないので必要なら加えてください javascript4年前から更新されてないので書き方がちょっと古めです。使う時は直して使うと良いんじゃないでしょうか /*|--uglipop.js--| |--(A Minimalistic Pure JavaScript Modal )--| |--Author : argunner (gunnerar7@gmail.com)(http://github.com/arg
WEBサイトでよく使われるLightboxの表現ですが、プラグインによってはレスポンシブ対応されているものとされていないものがあります。 本日は、レスポンシブサイトでも簡単に実装できて、かつオシャレで高機能なLightboxプラグイン「Lightcase.js」をご紹介いたします。 Lightcase.jsについて 「Lightcase.js」は、美しくて柔軟かつ反応の良いLightboxプラグインです。画像の拡大表示だけでなく、Youtube、videoなどの動画、自由なコンテンツをLightbox表現にすることができます。 実装方法（lightcase-2.5.0） 実装方法は他のプラグインと同様で比較的簡単に実装ができますので、簡単な流れをご紹介します。 またこの記事は、2017年7月29日時点で作成しており、Lightcase.jsのバージョンは「lightcase-2.5.0」に
vue-image-lightboxとは vue-image-lightboxは、Vue.jsで作られたLightboxライブラリです。 キャプションの設定はもちろん、自動スクロール機能も内蔵されています。 他にも気の利いた機能がたくさんあります。 インストール 以下のnpm、yarn、CDNを使ってインストールします。 npm npm install vue-image-lightbox vue-lazyload yarn yarn add vue-image-lightbox vue-lazyload CDN <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-image-lightbox.min.css"> <script src="https://cdn.jsdel
Lightboxはよく使われますか？ 別ウィンドウを開かずにモーダルウィンドウで画像の拡大表示ができ、便利ですよね。 今回ご紹介する「Lightbox2」は WordPressでもプラグインとしても存在します。 ですが、以前の記事でも書きましたが、アップデートの際の互換性などの心配があるのでプラグインの多用はなるべく避けたいと思っているので、今回もプラグインを使わない方法で対応しました。 Lightbox2のサンプル まずはサンプルです。 試してみたほうが、どんなものかわかりやすいですよね。 下記のAXISのHPのサムネイルをクリックまたはタップをすると、別ウィンドウを開かずにモーダルウィンドウで画像の拡大表示ができます。拡大表示後は右下の[ ✖ ]、または黒いエリアをクリックまたはタップで元に戻ります。 この機能がLightboxです。 サムネイルのクリックまたはタップでLightbox
コピペでできるlightbox2を使ったギャラリーの表示
</head> の前に置く外部ファイル lightboxはGoogleにホスティングされているものを外部ファイルとして読み込む場合は、以下のコードを <head>〜</head>の中 に記述します。 外部ファイル<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/jav
画像やテキストをクリックするとポップアップ風に拡大画像を表示できる「Lightbox」の実装方法を解説します。 jQueryプラグインLightboxを実装する手順 Lightboxをダウンロードする GitHubからLightboxをダウンロードします。 下記のダウンロードページで「Source code(zip)」をクリックするとダウンロードできます。 Lightboxのダウンロードページはこちら Lightboxの必要ファイルを移動する ダウンロードしたzipファイルを解凍します。 distフォルダ内に「css」と「js」と「images」というフォルダがあるので、Lightboxを実装するプロジェクトフォルダに移動します。 すでにプロジェクトフォルダ内に「css」などのフォルダが存在する場合は、フォルダ内のファイルを移動しても大丈夫です。 実際に使用しないファイルも含まれていますが
Lightbox のような高級感を CSS のみで実現
サンプルコード 使い方 CSS部分(スタイルシート)は流用可能． 複数の画像を置くときは HTML部分の pop1 となっている部分を pop2 など画像毎に名前を変えていく． これでより簡単に LightBox 風に画像を設定することが出来る． <style type="text/css" media="screen"> .overlay { position: fixed; /* 背景 */ background: rgba(0, 0, 0, 0.2); visibility: hidden; opacity: 0; top: 0; left: 0; bottom: 0; right: 0; } .pop-up { display: none; } .pop-up:checked + .overlay { visibility: visible; opacity: 1; z-index
React.js ライブラリ「react-awesome-lightbox」をインストールして画像ビューワーを実装する 作成日 2020.08.14 React React.js, ライブラリ ライブラリ「react-awesome-lightbox」をインストールすると、画像ビューワーを実装することが可能です。ここでは、react.jsでreact-awesome-lightboxを利用するための手順と簡単な使い方を記述してます。
【freo】【freoTips】【その他TIPS】freoのcolorboxで表示される画像に自動的にrel="lightbox"を付与する方法｜虹色ミツバチ
【freo】【freoTips】【その他TIPS】freoのcolorboxで表示される画像に自動的にrel="lightbox"を付与する方法 2014/01/19 18:43 colorboxサムネイル画像javascript 58 freoで投稿する画像のうち、エントリー、ページ、メディアの設定で「自動でサムネイルを作成する」と、設定されている場合、サイズが大きい画像はサムネイルが自動作成され、サイト上にはサムネイルが表示され、元のファイルにリンクが貼られて、クリックするとcolorboxというjQueryを利用して拡大表示されます。 colorboxには様々な機能があります。 そのひとつに、「aタグ（リンクタグ）内に『rel="任意の名前"』を設定すると、同じ名前の属性を持つ画像がグループ化される」というのがあります。
Bootstrapライブラリは便利だけど、CSSファイルが200kbくらいあって結構重いです。 なので、サイトに様々な効果を加えるために別途プラグインを導入して、JSやCSSを増やしていくのは避けたいところ。 そして件のlightbox。 これはおなじみのギャラリー機能ですが、Bootstrapにはそのものズバリなコンポーネントはありませんが、 カルーセル ：コンテンツスライダーモーダル ：ポップアップウィンドウを使えば、行けるのではないかと。 Carousel https://getbootstrap.com/docs/4.1/components/carousel/ カルーセルのような要素の画像やスライドを循環させるためのスライドショーコンポーネント。 Modal https://getbootstrap.com/docs/4.1/components/modal/ Bootstrap
イケてる！レスポンシブ、タッチフレンドリーのライトボックス系jQueryプラグイン「Image Lightbox」
As for the image lightboxes, I have always lacked simplicity for them. I mean not only the visual design, but... 画像読み込み中のローディングデザインがイケメンです。実際の動きはDEMOページをどうぞ。 基本的な使い方このライトボックスは以下3つの手順で実装出来ます。 表示したいimg要素を用意するImage Lightbox用のCSSを貼り付ける（ソースファイルをダウンロードして）プラグインの読み込み、実行公式の説明を参考に、デフォルト設定での使い方について記述しておきます。 しかし冒頭で述べたように、公式の説明のままでは動かなかったので僕が実装出来たときのソースコードを書きます。もし動かない方は参考にしてみて下さい。 表示したいimg要素を用意するimg要素を用意し、そのim
こんにちは！ フリーランスWebディレクター兼エンジニアののせっち@nosecchi01です。 Web制作案件で画像や動画を簡単にモーダル表示できるjQueryプラグイン「lity.js」の便利な使い方を解説します。 サムネイル付きのよく見るYouTube埋め込みを使いつつ、クリックでポップアップ再生したい！ というご要望の方のための記事です。 本記事は下記を前提として解説します。 lity.jsの基本的な使い方は知っている。YouTubeの動画を埋め込む方法も知っている。その上で、YouTubeの埋め込みコード(iframe)をクリックした際にポップアップ表示される方法を知りたい。 それではいってみましょう！ 目標物を確認する codepenで実際の動きを見ていきます。 See the Pen How to Use lity.js by Yuki Nose (@yukinouz1) on
軽量jQuery Lightboxプラグイン「Featherlight」を使ってギャラリーを作る方法 | Single Life Tokyo
ギャラリー（オプションあり） 導入方法 ダウンロードの場合 「Featherlight.js」のページに行き、「Download」ボタンを押すことで書庫ファイルをダウンロードできます。 Featherlight.js 今回は「（ウェブルート）/assets/featherlight-v.1.7.14/」に展開しました。 適時配置ください。 コーディング方法 CSSファイルインクルード <link href="/assets/featherlight-v.1.7.14/release/featherlight.min.css" type="text/css" rel="stylesheet" /> <link href="/assets/featherlight-v.1.7.14/release/featherlight.gallery.min.css" type="text/css" re
WP jQuery Lightboxは、投稿や固定ページに挿入した画像をふわっと拡大表示することができるようになるWordPressプラグインです。 WP jQuery Lightboxのインストール インストール手順は以下の通りです。 WP jQuery Lightboxをダウンロードします。 ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。 管理画面の[プラグイン]ページで、wp-jquery-lightboxを有効化します。 WP jQuery Lightboxの設定 WordPress管理画面の[設定] – [jQuery Lightbox]で設定を行います。
fancybox.jsを使ってタッチやレスポンシブ対応可能なlightboxモーダル表示方法【jQueryプラグイン】｜DAD UNION – エンジニア同盟
タッチやレスポンシブ対応可能なlightboxモーダル表示のCSS記述 ※jquery.fancybox.cssファイルを読み込みます。ギャラリー画像（a[data-fancybox] img）、モーダル表示時のcaption（.fancybox__caption）のCSS記述です。必要に応じて変更して下さい。 <style> body { margin: 20px 10px; padding: 0; font-size: 14px; text-align: center; } h1{ text-align: center; font-size: 22px; line-height: 2em; padding-bottom: 20px; } a[data-fancybox] img { cursor: zoom-in; width: 150px; } .fancybox__caption
今回は、画像のポップアップ表示で有名な JavaScript ライブラリ「Lightbox 2」を使用する際に自分がハマった点を紹介します。といっても、たいしたことは書けませんが、笑 概要 キャプションとして data-titleで設定した内容がデフォルトでサニタライズされない。HTML 出力時にはエスケープされていたとしても。 <!-- 開くと、javascript が実行されます --> <a href="https://image.example.com/path/to/image.jpeg" data-lightbox="group1" data-title="<script>alert('xss');</script>"> Open Image </a>
【たぶん解決】Foo Gallery がプレビューでは LightBox 表示できているのにログアウトして確認すると表示されない
昭和生まれな管理人Osakana の、Web漫画/動画と、デジタルガジェット情報がメインのブログページです。 ヘンテコなお話を描いていきたいです。 詳細プロフィールはこちら Twitter：@OFishbowl 気がつくとiPadとChromeでFooGalleryが機能していない…いつものFireFoxでなく、他ブラウザでも確認しようと Chromeを立ち上げて色々見ると、FooGalleryを使ったギャラリーページでサムネイルをクリックしてもLightBox表示されません。 Chromeだけじゃなく iPad で見ても駄目です。 LightBox表示というのは、下図のようなポップアップで左右遷移できる画像表示ですね。 これがなされず、真っ黒な画面に画像がポンと置いてあるページに飛んでしまいます。 色々ググってみても解法が出ず。 先日、プラグイン開発元からFooGalleryのアップデー
baguetteBox.js実践ガイド: Lightbox風ギャラリーの簡単設置手順｜DAD UNION – エンジニア同盟
baguetteBox.jsは、Lightbox風のギャラリー表示を簡単に実装できるJavaScriptライブラリです。 この記事では、baguetteBox.jsを使用して、魅力的なギャラリーページを手軽に実装する方法について詳しく解説します。 はじめに:baguetteBox.jsとは？ baguetteBox.jsは、レスポンシブでタッチフレンドリーなLightboxギャラリーを簡単に実装できるライブラリです。 オリジナルのLightboxと比較して、軽量でありながら多機能で、モダンなブラウザに対応しています。 CSSの設定:ギャラリーの見た目を整える まず、baguetteBox.jsを適切に表示するためのCSSを設定します。baguetteBox.cssファイルを読み込みます。 ここでは基本的なスタイリングの例として、.gallery クラスをターゲットにしたスタイルを示します。
LightBoxのレスポンシブ
ポップアップで拡大画像をエフェクト表示させるLightBox系ライブラリは多々ありますが、非常に人気があり、個人/商用はもちろん通販サイトなど多目的なサイトで利用されています。 しかし、継続利用（jQuery等の干渉が毎度めんどいから継続）している 元祖Prototype系LightBox(v2.05)だとレスポンシブ非対応 スマホやブラウザを縮小した際にも拡大画像が原寸大のままハミ出してしまい、美しくありません。 「簡単にレスポンシブに出来るだろう」 と思いましてゴニョってみましたら ３時間も掛かりました・・・ 画像サイズのCSSがstyle属性として直接指定されてしまう。 CSSファイルから上書きできない。 値を消すよう.jsファイルを編集しても外枠の縦高が元画像の値になるか、デフォルトの250pxが最低値として適用される。 height: auto !important;で上書き解除
目標 開発環境 ・Ruby: 2.5.7 ・Rails: 5.2.4 ・Vagrant: 2.2.7 ・VirtualBox: 6.1 ・OS: macOS Catalina 前提 下記実装済み。 ・Slim導入 ・投稿機能実装 doctype html html head title | Bookers2 = csrf_meta_tags = csp_meta_tag = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' / 追記 link href='https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css' rel='stylesheet' = javascript_include_t
Simple Lightbox（シンプル・ライトボックス）は、シンプル機能の「Lightbox」のWordPressプラグインです。シンプルで尚且つカスタマイズ性に優れているのが特徴です。 記事のサムネイル画像をクリックした際に、拡大画面を別ウィンドウ風にふわっと浮いた感じで表示します。 「Lightbox」はリンク先をメディアファイルに指定すると適用されます。 プラグインをインストールして有効化するだけで利用できます。 プラグインの管理画面は日本語化されているので分かりやすいです。 導入が簡単で、役立つプラグインなので活用しましょう。 はじめに このプラグインが優れていること 記事のサムネイル画像をクリックした際に、別ウィンドウ風にふわっと浮いた感じで拡大表示できる。 プラグインは初期設定のままでも運用できる。 ギャラリーで複数画像をスライド表示できる。 プラグインの管理画面が日本語化さ
通常、画像を拡大表示させるには、別ページに移動して画像を表示するか、別タブを開いて表示することになるかと思います。 Lightboxの機能とは、クリックするとこんな感じで、同一ページ内で拡大画像を表示できるものです。 今回は、Lightboxのプラグインは多数ありますが、プラグインは入れたくない場合について書いていきます。 ＊こちらは、wordpressのテーマ「stinger plus2」「twenty twelve」でしか確認していませんので、ご了解願います。 ＊子テーマ利用を前提にしています。 ＊「cocoon」など、既に標準装備されているテーマもあります。これらに導入すると機能が被ってしまってエラーが出ることもありますので、ご確認ください。 ファイル導入公式サイトからファイルをダウンロードします。 解凍した中に、フォルダ「dist」と言うのがあって、この中の「css」「js」「im
WordPress:WP Lightbox 2でエラーUncaught TypeError: $(…).live is not a function
This post is also available in: English-US (英語) Wordpressを5.5にアップグレードすると、以下のようなエラーに遭遇したので、メモを備忘録的に残しています。 Uncaught TypeError: $(...).live is not a function Chrome開発者ツールのConsoleで確認したら、WP Lightbox 2 関連のファイルがエラーを吐いていたので、調べたところ、WordPress 5.5 からは旧バージョンの jQuery migrate は無効になったことが原因ぽいです。 記事を書いている時点での対処方法としては、以下のような感じかと思います。 対処方法その1.別のLightbox系プラグインを探す 旧バージョンの jQuery migrate をなんとかして使い続けるという選択肢は無かったので、WP L
lightBox風画像表示プラグインが数ある中で、私はこのjQuery Colorboxを使っていました。(←現在は別のプラグインを使用しています) サイト上で画像をクリックすると、ページ変遷やブランクウインドウで開いたりせずに、リンク先の画像をその画面上にlightBox風に表示してくれます。1つのページ内の画像は、自動的でグループ化され最初の画像を表示させると、続けてスライドショーの形で2枚目～3枚目の画像も表示してくれます。インストールして有効化し、さらに設定画面から11ある背景デザインから好みの物を選びます。あとは記事内に画像をアップロード/挿入するだけ。スマホでも同様の効果で、リンク先の画像がスマホの画面より大きい画像でもストレスなく閲覧できます。 インストール方法 他のプラグイン同様、WordPress管理画面 ＞ プラグイン ＞ 新規追加 ＞「jQuery Colorbox」
WordPressのデフォルトだと ブログ記事にYouTube動画を埋め込むことができて大きく表示できないですよね。 どうせなら拡大表示で再生できるようにしたい。 そこで動画をクリックすると浮き上がって拡大表示する プラグイン「Video Lightbox for YouTube/Vimeo」の紹介です。 初期状態のサイズも指定できるので使いやすいですよ。 ここでは画像付きで設定、使い方を説明してるので参考にしてみてください。 Video Lightbox for YouTube/VimeoとはWordPressで作成したブログ記事に YouTube動画を埋め込み クリックで拡大表示ができるプラグインです。 動画の埋め込みは事前にURLをショートコードに作成してから 貼り付ける形になっています。 ＊Vimeoも使用できます。 プラグイン「Video Lightbox for YouTube
こんな要望のある方に、必見の情報をご紹介します！ 動的なUIであればjQueryを使うのがカンタンですが、サイト全体のファイルサイズや保守・メンテナンスのことを考えると、脱jQueryしたいなあと思っている方も多いのではないでしょうか？ そこでオススメなのが当記事で紹介する「Luminous」。LuminousはLightboxをカンタンに実装できるJavaScriptライブラリです。 jQueryは使いませんが仕組みが理解できればカンタンにカスタマイズできますので、特にWebサイト制作に使えるかと思います。 フロントエンドエンジニアでもある筆者が実際のコードとともに解説していきますので、最後までお付き合いいただけると幸いです！ Lightboxとは？ Lightboxとは、選択した要素をポップアップで拡大表示できる機能のこと。 一般的なWebサイトやサービスであれば、画像を拡大表示させる
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery不要なLightbox代替スクリプトLuminousが本当に軽量
Lightbox ぽいモーダルウィンドウをCSSだけで | UNICO LABO
GLightbox | A touchable pure Javascript lightbox
JQueryプラグインLightbox2の使い方【商用利用OK】
【Vue.js】vue-image-lightbox で画像ギャラリーを作成！ - Qiita
画像でもiframでも対応できるシンプルで使いやすく汎用的な非依存のlightboxスクリプト・「tobii」
Lightbox Viewer (VCC) - hai-vr - BOOTH
WooCommerceのLightBoxとWordPressのFancyBoxにおける競合を回避する
iframeでもHTMLでも対応できる超軽量で非依存のLightboxスクリプト
レスポンシブ対応のオシャレなLightboxプラグイン「Lightcase.js」
Vue.jsのLightboxは「vue-image-lightbox」で簡単に実装できる | カバの樹
プラグインを使わずにLightbox2をWordPressに設定する方法 | 株式会社アクシス
【jQuery】画像を拡大表示できる「Lightbox」の使い方
React.js ライブラリ「react-awesome-lightbox」をインストールして画像ビューワーを実装する
とにかく軽いLightbox系スクリプト「Luminous」の使用方法
BootstrapでLightbox実装する際は、別途プラグイン導入の必要無し
lity.jsを使ってYouTube埋め込み動画(iframe)をポップアップ再生する【lightbox】
画像の拡大表示にLightbox効果を与えてくれるWordPressプラグイン「WP jQuery Lightbox」
【注意】ポップアップ JS ライブラリ「Lightbox 2」での XSS 対策について - Qiita
【Rails】lightbox2を用いて画像拡大機能の実装 - Qiita
Simple Lightbox: シンプル画像拡大のWordPressプラグイン
プラグインなしでLightbox機能を導入する－wordpress
jQuery Colorbox: lightBox風画像表示とスライドショー
YouTube動画を拡大表示できる「Video Lightbox for YouTube/Vimeo」の使い方
「Luminous」の使い方解説！Lightboxをカンタン実装 （jQuery非依存） - PENGIN BLOG