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

2016/07/07 サイト制作, 技術系 投稿者:竹内

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を作ってくださる方々に日々感謝です。

カレンダー

    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

PRODUCE ネディアプロデュース
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)