jquery nailthumbを利用しようとしています。
表示方法にクロップを利用しようとしているのですが、うまく出来ません。
縦横比・サイズがまちまちな画像の短辺を自動取得し、そのサイズに縮小&トリミング・中心部分をサムネイル表示とさせたいのですが、現状は元となる写真サイズのまま左上を指定サイズでサムネイル化しているだけです。
html
1<!--nailthumb--> 2<script type="text/javascript" src="../../lib/jquery_nailthumb.1.1.min.js"></script> 3 4~ 5 6<div class="nc s-t"><a href="01.jpg" rel="g1" class="g1"><img src="01.jpg"></a></div> 7<div class="nc s-t"><a href="02.jpg" rel="g1" class="g1"><img src="02.jpg"></a></div> 8~ 9<script type="text/javascript"> 10 jQuery(document).ready(function() { 11 jQuery('.s-t').nailthumb({method:'crop',fitDirection:'center center'}); 12 }); 13</script> 14
css
1.nc { 2 float: left; 3 overflow: hidden; 4 margin:15px; 5 width: 190px; 6 height: 190px; 7 border-radius: 10px; 8 -webkit-border-radius: 10px; 9 -moz-border-radius: 10px; 10 display: inline-block; 11 box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); /*横方向 下方向 ぼかし 広がり 色 */ 12}
どこを修正したら良いでしょうか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/07/22 05:41
2015/07/22 06:00
2015/07/24 07:01