サムネイル画像をクリックしたら、ブラウザのサイズに合わせて大きな画像がポワッと出て来る機能が欲しいなと思った方におすすめしたいのが「Easy FancyBox」というプラグインです。
まずは、実際の動きをコチラでご確認ください。
▼▼ 画像をクリック ▼▼
いかがですか？
まさに、こういうことやりたかったという方は、下記を早速インストールしてみてください。
「Easy FancyBox」は基本的に有効化するだけで画像リンクをポワッと表示してくれるので、特に細かい設定は必要ありません。こういう画像リンクの表示の仕方のことをLightbox系と呼んだりするそうです。
HTML
<img src="https://cotodama.co/wp-content/uploads/2017/09/163062372-300x200.jpg" alt="" width="300" height="200" class="aligncenter size-medium wp-image-1140" /> |
</a> |
仕組みとしては、画像のURLをリンク先にした画像、つまり画像バナーを設置するだけです。
複数の画像をスライドショーのように表示させる方法
ちなみに複数枚の画像を表示させて、ひとつ画像をクリックすると次の画像、次の画像というように矢印で切り替えをすることもできます。下記の画像をどれでも良いのでクリックしてみてください。大きく表示された画像の左右にカーソルを合わせると次の画像にスライドすることができます。
HTML
<div class="gallery"> |
<img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo06-150x150.jpg" alt="" width="150" height="150" class="aligncenter size-thumbnail wp-image-10346" /> |
</a> |
<img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo05-150x150.jpg" alt="" width="150" height="150" class="aligncenter size-thumbnail wp-image-10345" /> |
</a> |
<img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo04-150x150.jpg" alt="" width="150" height="150" class="aligncenter size-thumbnail wp-image-10344" /> |
</a> |
<img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo03-150x150.jpg" alt="" width="150" height="150" class="aligncenter size-thumbnail wp-image-10343" /> |
</a> |
<img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo01-150x150.jpg" alt="" width="150" height="150" class="aligncenter size-thumbnail wp-image-10340" /> |
</a> |
<img src="https://cotodama.co/wp-content/uploads/2019/06/hover_switch-photo02-150x150.jpg" alt="" width="150" height="150" class="aligncenter size-thumbnail wp-image-10339" /> |
</a> |
</div> |
これは、複数の画像バナーをclass="gallery"でラップします。このようにすると、ラップされたバナー全体がスライドショーのようになります。
以上が、画像をクリックしたらフワッと画像が浮き出るプラグイン「Easy FancyBox」でした。
