見出し画像

【Alpine.js】クリックで画像を拡大表示させる方法 | アダルトアフィリエイト

ふわり

noteで公開した自作テーマのWordPressサイトにサンプル画像をクリックで拡大表示させる機能を追加したので、今回は画像拡大の実装方法を解説します。

CodePenでのデモは👇️になります。

(noteでだと見づらいのでCodePen直で見てもらえればと＆面倒なのでスマホに対応してないのでPCで見てください)


背景

たいていのエログだとサンプル画像を何枚か表示させることが多いかと思います。

画像にそのままリンクでFANZAなどに飛ばすようにしても良いかと思いますが、今回はサイトの回遊率？が上がればいいな〜と思いましてサンプル画像の拡大表示の実装を行いました。

拡大表示させるにはJavaScriptを使って実装しますが、今回は使ってみたかったJavaScriptフレームワークのAlpine.jsを使ってみます。

Alpine.jsとは

Alpine.jsは、JavaScriptフレームワークの一つで、VueやReactのようなフレームワークの機能を、より軽量で直感的な形で提供しています。

HTML内に直接JavaScriptロジックを書くことができるのと覚えることも多くないので初心者でも簡単に既存のプロジェクトに組み込むことができるかと思います。

今回は所謂モーダルの実装を作ったのですが、他にも色々なUIの実装で生のJavaScriptを書かずに簡単に実装できるので例など見てみてください。

CDNの読み込み

今回はCDNを利用しますので以下のコードを<header>の中とかに書いてみてください。

 <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

これだけでAlpine.jsを使えるようになります！
それでは実装方法を見てみましょう！

モーダル用HTML

上記のCodePenを例にAlpine.jsを使ってモーダル用のHTMLを↓のように書きます

<div x-data="{ isOpen: false }">
  <div class="img" @click="isOpen = true">
    <img src="https://picsum.photos/400/400?random=0" alt="">
  </div>
  
  <div class="modal" x-show="isOpen" x-transition>
    <div class="modal-close" @click="isOpen = false">とじる</div>
    <div class="modal-img" @click.away="isOpen = false"><img src="https://picsum.photos/400/400?random=0" alt=""></div>
  </div>
</div>

ここでは画像をクリックするとisOpenがtrueになり.modalクラスが表示されます。とじるをクリックするか、モーダル外をクリックするとisOpenがfalseになりモーダルが非表示になります。

使っているAlpine.jsのディレクティブの説明

ここで使っているAlpine.jsのディレクティブを説明します。

  • x-data：コンポーネントの状態を定義

  • x-on：特定のイベント（今回の場合はクリック）に反応して実行します。また省略して@clickと書くことができます。

  • x-show：要素の表示・非表示を切り替えることができます。

  • x-transition：要素の表示のアニメーション時間などを調整できます

初学者の方の場合はもしかしたら何をやっているか分からないかと思いますが、書いていくうちに慣れるかと思いますので大丈夫です。

それではモーダルのCSSを見てみましょう！

モーダルのCSS

モーダルのCSSは↓になります。
画像をクリックすると黒背景にクリックした画像が真ん中にくるかと思います。

.img {
  cursor: zoom-in;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  width: 100vw;
  height: 100vh;
}

.modal-close {
  display: inline-block;
  background: #eee;
  padding: 8px 16px;
  border-radius: 8px;
  color: #333;
  font-weight: 700;
  position: absolute;
  top: 5%;
  right: 10%;
  cursor: pointer;
}

.modal-img {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}

ここで.imgクラスにcursor: zoom-in;を設定することでマウスホバー時に拡大？アイコンが表示されます。
詳しく↓のMDNを見てください！

これだけで簡単にCodePenの例のような画像モーダルはできるかと思います！

最後に実際にWordPressに実装するコードを見てみましょう！

WordPress(single.php)に画像モーダルを組み込む

サンプル画像を表示する箇所は記事の詳細ページだと思うのでsingle.phpに書いてみましょう。

今回、自分のサイトを例に出すのでサンプル画像の出力方法などは↓の記事を見てみてください！

それではsingle.phpに画像モーダルを実装します！

<div>
  <?php if($imageGroup) : ?>
    <?php foreach ($imageGroup as $image): ?>
    <div class="p-post__group-image-wrap" x-data="{ isOpen: false }">
      <div class="p-post__group-image" @click="isOpen = true">
        <img src="<?=esc_url($image) ?>" alt="<?=$post->getTitle()?>">
      </div>
      <div class="p-post__group-image-modal"
        x-show="isOpen"
        x-transiton
        x-cloak
      >
        <div class="p-post__group-image-modalClose" @click="isOpen = false">とじる</div>
        <div class="p-post__group-image-modalImg" @click.away="isOpen = false">
          <img src="<?=esc_url($image) ?>" alt="<?=$post->getTitle()?>">
        </div>
      </div>
    </div>
    <?php endforeach; ?>
  <?php endif; ?>
</div>

特に先ほどのCodePenのコードと代わり映えがないかと思います！

リロード時のちらつき対策

Alpine.jsやVueなどで何も対策をしないと、リロード時にちらつきが発生するかと思います。これはHTMLがAlpine.jsなどよりも先に読み込まれることにより、x-showの要素が表示されてしまうことが原因です。

対策としてはx-cloakを使います

x-showのHTMLにx-cloakを付けましょう

<div class="p-post__group-image-modal"
  x-show="isOpen"
  x-transiton
  x-cloak
>

またCSSに以下を追加することでちらつきが無くなります！

[x-cloak] {
  display: none !important;
}

まとめ

Alpine.jsを使ってサンプル画像を拡大表示させる方法を解説しました！
Alpine.jsは簡単にJavaScriptを実装することができるので、画像拡大の他にもいろいろ試してみてください！

この記事が何か参考になれば幸いです☘️

それでは良いアダアフィライフを！


いいなと思ったら応援しよう！