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

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>

気軽に実装できるので見出しなどに取り入れても良さそうです。

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

slickのスライド切り替えに合わせてCSSアニメーションさせる際、1枚目のアニメーションが動かない対策

2023.07.20

スライドショーを簡単に実装できる slick ですが、ある実装でハマったので対策をメモしておきます。

●やろうとしたこと
スライドの切り替わりに合わせて、スライド内の要素をCSSでアニメーションさせる

slickでは表示中のスライドに「slick-current」というクラスが付与されます。
そこで「slick-current」のありなしでスタイルを変更し、CSS の transition でアニメーションさせるという実装をしました。
しかし、この方法だと一番最初に表示されるスライドで初回のみアニメーションが行われませんでした。

●回避方法
最初に表示させるスライドを1枚目以外にし、スライドショーが準備できたタイミングで（少し遅らせて）1枚目に切り替える、という方法にしました。


// スライドショーが準備できたタイミングで、スライドを1枚目に変更
$(".your-slider").on("init", function(slick){
  setTimeout(function(){
    $(".your-slider").slick("slickGoTo", 0, true);
  }, 100);
});

// スライドショーの設定
$(".your-slider").slick({
  initialSlide: 1, // 開始時は1枚目以外のスライドに設定
  fade: true,
  autoplay: true
});

やや力技ですが、無事に1枚目のアニメーションが実行されました。

●ポイント
・setTimeout で少し送らせないと切り替わらない
・slickGoTo に true を設定すると slick の切り替えアニメーションなしでスライドが切り替わる
・init メソッドはスライドショーの設定よりも前に記述しないと動作しない

以上です。

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