JavaScript│グラビカ学習帳～ホームページ制作会社 gravity works（グラビティ・ワークス）の備忘録と知識の共有と蓄積

jQuery：.load()でのファイル読み込みが完了したときにイベントを発生させる

2024.08.27

jQuery の .load() を使って外部ファイルを読み込むとき、読み込み完了した時点で独自のイベントを発生させる方法です。
.load() が書かれているスコープの外でも読み込み完了を受け取ることができるので、読み込みを待ってから処理を行いたいときなどに便利です。

●ファイル読み込みのスクリプト


$(function(){
  $(".hoge").load("xxxxxx.html", function(){
    $("body").trigger("fileLoaded"); // イベント名は自由に設定できます
  });
});

●イベントを受け取って実行するスクリプト


$("body").on("fileLoaded", function() {

  // 読み込み完了時の処理

});

$("body")に対して "fileLoaded" というイベントを発生させています。
汎用的に使えるよう $("body") にしていますが、そのぶん被りづらいイベント名にするのが良いと思います。

個別ページ | コメント(0)

画像を表示させるJavaScriptライブラリ

2024.06.11

画像を拡大してモーダルで表示させるJavaScriptライブラリとしてはLightboxが有名ですね。
設置も簡単で使いやすいです。
https://lokeshdhakar.com/projects/lightbox2/
残念ながら現状Lightboxにはスマホで必須のフリック、スワイプ機能がついていません、、、
そこで探して良さそうだったのが下記2つのライブラリーです。
どちらも設置が簡単。
フリック、スワイプも使用でき、もちろん画像のグルーピング機能もあります。

▼martPhoto.js
https://appleple.github.io/SmartPhoto/
詳しい使い方は下記にわかりやすく書かれています。
https://www.appleple.com/blog/oss/smartphoto-js.html
こちらは画像をどのように拡大させるか設定するオプションがあります。

▼PhotoSwipe
https://photoswipe.com/

個別ページ | コメント(0)

ページに読み込んでいないJSライブラリやプラグインが実行されるのを回避する

2024.04.23

common.js などすべてのページで読み込まれるスクリプトに、特定のJSライブラリやプラグインの機能を実行する記述してしまうと、そのJSライブラリを読み込んでいないページではエラーが出てしまいます。

以下のように該当機能が使えない場合には処理を中断することで、エラーを回避することができます。

●グローバル変数やグローバル関数が提供される場合（例：splide.js など）


$(function() {
  if (typeof Splide === 'undefined') {
    return;
  }
  new Splide( '.target' ).mount();
});

●jQueryオブジェクトのプロパティとして提供される場合（例：slick.js など）


$(function() {
  if (typeof $.fn.slick === 'undefined') {
    return;
  }
  $(".target").slick();
});

個別ページ | コメント(0)

JS：Gifアニメを最初からリスタートする

2024.01.22

JavaScriptを使ってGifアニメを最初からリスタートする方法です。

●html

<img src="heart.gif" alt="" class="img">
<button class="btn">最初からリスタート</button>

●JS

var target_Img = $(".img");
target_Img.attr("rel", target_Img.attr("src"));

$(".btn").on("click",function(){
  target_Img.attr("src", "empty.gif").attr("src", target_Img.attr("rel"));
});

"empty.gif" は透明なダミー画像になります。
このEmpty.gifに一瞬差し替えてから元の画像に戻すことで、Gifが最初から再生されます。

個別ページ | コメント(0)

文節で改行してくれるJS「BudouX」

2023.12.18

先日当社で少し話題になった文章をいい感じのところで改行してくれるCSS「word-break: auto-phrase;」ですが、2023年12月現在では Google Chrome と Microsoft Edge のみ対応のようです。

しかし、まったく同じ仕様かはわかりませんが JavaScript を使って文章を改行する BudouX というライブラリを Google が公開してくれています。

BudouX: 読みやすい改行のための軽量な分かち書き器

使い方は簡単で、<head>内にJSを読み込み、
改行を適用させたい箇所をタグで囲むだけ。


<head>
<script src="https://unpkg.com/budoux/bundle/budoux-ja.min.js"></script>
</head>

<body>
<budoux-ja>文章の折返しのサンプルです。ここにテキストが入ります。</budoux-ja>
</body>