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

配列にjQueryオブジェクトを複数格納し、並べ替えるメモです。
配列操作にやや苦手意識があるので、思ったより簡単にできた、という感じで。

●HTML

<ul class="list">
  <li class="item" data-num="025">アイテム1</li>
  <li class="item" data-num="010">アイテム2</li>
  <li class="item" data-num="075">アイテム3</li>
  <li class="item" data-num="050">アイテム4</li>
</ul>

●JavaScript

const $list = $('.list'); // リスト要素
const $items = $list.find('.item'); // リスト内の全アイテム

// アイテムを格納する配列を宣言
const itemsArray = [];

// 各アイテムをjQueryオブジェクトとして配列に追加
$items.each(function() {
  itemsArray.push($(this));
});

// data-num属性の値で昇順ソート
itemsArray.sort((a, b) => {
  // 各アイテムのdata-num属性を取得し、数値に変換
  const numA = parseInt(a.attr('data-num'), 10);
  const numB = parseInt(b.attr('data-num'), 10);
  // 数値として比較(昇順)
  return numA - numB;
});

// リストを空にしてから、ソート済みアイテムを追加
$list.empty().append(itemsArray);

●ポイント
・a, b に比較対象となるjQueryオブジェクトが入るので、jQuery用のメソッドを使用して比較する値を取得する。
・配列はそのまま.append()／.prepend()することができる。
・サンプルは数値で比較しているが、比較したい内容に合わせて.sort()の内容を変更する。

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

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

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

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

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

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

});

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

画像を拡大してモーダルで表示させる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/

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();
});

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が最初から再生されます。



はじめから再生