Nedia What's up!

ネディアのエンジニアによるIT技術やサービスの紹介・検証などをお届け!

【jQuery】今度は成功!jQueryでサムネイル表示


img_jquery

前回、「object-fit: cover;でサムネイル表示」で、見事失敗してしまったサムネイルの表示方法についてですが、困ったときのjQueryと言うわけで、jQueryでサムネイル表示を行う方法に挑戦してみたいと思います。

前回と同様の目的

縦写真や横写真など縦横サイズがばらばらの画像をきっちりサイズを整えて表示させます。
CMSが導入されているサイトに組み込みますので、背景画像での実装ではなく、imgタグをHTMLに記述する方法を前提にします。

MyThumbnail.js が良さそう

いろいろ調べてみましたところ、「MyThumbnail.js」 と言うjQueryプラグインが良さそうでした。早速このプラグインを導入してみたいと思います。

MyThumbnail.jsの導入

ファイルのダウンロードとHTMLとCSSを設定

デモサイトからファイルをダウンロードします。

jquery.MyThumbnail.js

まずは『jquery.MyThumbnail.js』と『 MyThumbnail.css』をダウンロードしてみます。

demo22

HTML(※失敗してます)

CSS

失敗・・・

jQueryやscriptファイルも読み込んでいるのになぜか動きません。。。

なんとか解決!

demo23

ファイルの読み込む順番を変更してみる。

jQueryでありがちなのが、headで読むか下の方で読むかというところ。
他のscript系の処理とバッティングしたりして動かないことが稀にありますので、試しに下の方で読み込んだところ、無事動きました!
(jQueryあるあるです。)

HTML

CSS

成功!

4つとも縦横比率を維持した状態で中央揃えし、はみ出た部分がトリミングされています。
前回はIE11とEdgeで動作しませんでしたが、今回はきっちり想定通りの表示になっています。

まとめ

前回CSSでうまくいかなかったサムネイル表示を見事成功させました。
HTMLやCSSでうまくいかないことをjQueryで出来ないかと探すと大抵何かしら解決策が見つかったりします。
こういった困ったことを解決できるscriptを作ってくださる方々に日々感謝です。