kdoc - jQuery Plugin - iApp Cover

  • 作成日：2012-01-12 17:08:45
  • 修正日：2012-01-19 11:31:19

iApp Cover

↑ページトップへ

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>iApp Cover</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.iappcover.js"></script>
<script>
$(function(){
    $('img.app_cover').iappcover();
});
</script>
</head>
<body>

<p>

<img src="http://a3.mzstatic.com/us/r1000/109/Purple/02/63/bc/mzl.xuaraicf.175x175-75.jpg" width="175" height="175" class="app_cover">

<img src="http://a3.mzstatic.com/us/r1000/109/Purple/02/63/bc/mzl.xuaraicf.100x100-75.jpg" width="100" height="100" class="app_cover">

<img src="http://a3.mzstatic.com/us/r1000/109/Purple/02/63/bc/mzl.xuaraicf.75x75-65.jpg" width="75" height="75" class="app_cover">

</p>

<p><a href="http://itunes.apple.com/jp/app/echofon-for-twitter/id286756410"><img src="http://a3.mzstatic.com/us/r1000/109/Purple/02/63/bc/mzl.xuaraicf.175x175-75.jpg" width="175" height="175" class="app_cover"></a></p>

</body>
</html>

jquery.iappcover.js

$(function(){
    var name_space = 'iappcover';

    $.fn[name_space] = function(options){
        var elements = this;

        elements.each(function(){
            var img_src = $(this).attr('src');
            var img_w = $(this).attr('width');
            var img_h = $(this).attr('height');
            var img_radius = parseInt(img_w / 6) + 1;

            var div = $('<div/>').css({
                display: (jQuery.support.opacity) ? 'inline-block' : 'inline',
                width: img_w + 'px',
                height: img_h + 'px',
                '-moz-box-shadow': '0 1px 2px #333',
                '-webkit-box-shadow': '0 1px 2px #333',
                'border-radius': img_radius + 'px',
                '-moz-border-radius': img_radius + 'px',
                '-webkit-border-radius': img_radius + 'px',
                'background-image': 'url(' + img_src + ')',
                'background-position': '0 0',
                'background-repeat': 'no-repeat',
                'zoom': '1'
            });
            $(this).wrap(div).hide();
        });

        return this;
    };
});

メモ

  • 画像サイズは、175(175x175-75.jp)、100(100x100-75.jpg)、75(75x75-65.jpg)の3種？
  • 「リンク先」の「http://itunes.apple.com/jp/app/echofon-for-twitter/id286756410」は、「http://itunes.apple.com/jp/app//id286756410」でOK。
  • 「.jpg」を「.png」にすれば、角丸になるみたい(シャドーはつかないけど)。