TopJavaScriptjQuery > 2011年9月
2011年9月16日

jQueryでスマホサイト向けに画像サイズを縮小する方法

September 16,2011 12:03 AM
Tag:[]
Permalink

jQueryでスマホサイト向けに画像サイズを縮小する方法を紹介します。

1.サンプル

次のようなPCサイト用のページがあります。この場合、Movable Typeでページを出力しています。ページで使っている記事内の画像サイズは幅470pxです。

PCサイト向けのページ

このページをスマホサイト向けに別のページを作り、画像サイズを縮小して表示します。画像サイズは幅280pxに縮小しています。

スマホサイト向けのページ

2.カスタマイズ

サイズを変更するには、下記のスクリプトをページ内にあるhead終了タグの直前に追加します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function(){
    $('img').each(function(){
        var max = 280; // 最大幅
        var w = $(this).width();
        var h = $(this).height();
        if (w > max) {
            $(this).width(max).height(Math.round((max/w)*h));
        }
    });
});
</script>

最大幅を示す変数max(ここでは赤色で示す280px)を超える画像について、最大幅に縮小します。maxの値は適宜変更してください。

3.ページをPCサイトと共用したい/ユーザーエージェント別に振り分けたい場合

ページをPCサイトと共用したい場合や、ユーザーエージェント別に振り分けて画像サイズを変更したい場合は、次のようにnavigator.userAgentの判定文を追加し、それぞれに最大値を設定します。

<script type="text/javascript">
jQuery(function(){
    $('img').each(function(){
        var max = 0;
        if (navigator.userAgent.indexOf('iPhone') > 0) {
            max = 280; // iPhoneの最大幅
        } else if (navigator.userAgent.indexOf('iPad') > 0 ) {
            max = 768; // iPadの最大幅
        } else if (navigator.userAgent.indexOf('iPod') > 0 ) {
            max = 280; // iPodの最大幅
        } else if (navigator.userAgent.indexOf('Android') > 0) {
            max = 280; // Androidの最大幅
        }
        var w = $(this).width();
        var h = $(this).height();
        if (max != 0 && w > max) {
            $(this).width(max).height(Math.round((max/w)*h));
        }
    });
});
</script>

2項と同様、maxの値は適宜修正してください。PCサイトでは画像サイズの縮小を行わないように制御しています。

Comments [0] | Trackbacks [0]
2011年9月 7日

jQueryのlive関数を使ってAjaxで取得したコンテンツにイベントハンドラを登録する

September 7,2011 3:33 AM
Tag:[]
Permalink

jQueryのlive関数について紹介します。

live関数の使用例として、コンテンツの折りたたみをサンプルに用います。

1.コンテンツの折りたたみ

h3要素をクリックしたときに、h3要素の次にあるul要素全体を折りたたむには、次のようなjQueryのコードを記述します。実際の動作は「サンプル1」のリンク先で確認できます。

サンプル1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function() {
    $("h3").click(function() {
        $(this).next().slideToggle(0);
    });
});
</script>
<h3>最近のブログ記事</h3>
<ul>
  <li>モバイルサイトオープン</li>
  <li>業務提携に関するお知らせ</li>
  <li>ソリューションセミナー</li>
  <li>Movable Type 入門セミナー</li>
  <li>オフィシャルサイトオープン</li>
</ul>

または次のようにbind関数を利用して、clickイベントに対応するイベントハンドラを登録します。

…前略…
<script>
$(function() {
    $("h3").bind('click',function() {
        $(this).next().slideToggle(0);
    });
});
</script>
…後略…

2.Ajax+コンテンツの折りたたみ(NG)

ところが、次のようにコンテンツ部分をAjaxで読み出すようにすると、clickイベントが効かなくなります。

サンプル2

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function() {
    $('#foo').load('data.txt');
    $("h3").click(function() {
        $(this).next().slideToggle(0);
    });
});
</script>
<div id="foo"></div>

Ajaxで読み出すデータ(data.txt)

<h3>最近のブログ記事</h3>
<ul>
  <li>モバイルサイトオープン</li>
  <li>業務提携に関するお知らせ</li>
  <li>ソリューションセミナー</li>
  <li>Movable Type 入門セミナー</li>
  <li>オフィシャルサイトオープン</li>
</ul>

これではAjaxで取得したデータに含まれる要素に対し、イベントハンドラ登録が行えません。このような事象を回避するためにlive関数を利用します。

3.Ajax+コンテンツの折りたたみ(OK)

live関数は、イベントハンドラ登録時に存在する要素(ここではh3要素)だけでなく、新たに発生する要素に対してもイベントが適用されます。

今回のサンプルで言えば、Ajaxで取得したデータにh3要素が含まれていれば、そのh3要素に対しても、clickイベントのイベントハンドラが有効になります。

サンプル3

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function() {
    $('#foo').load('data.txt');
    $("h3").live('click',function() {
        $(this).next().slideToggle(0);
    });
});
</script>
<div id="foo"></div>

live関数の第1パラメータに指定できるイベントは下記の10種類です。

  • click
  • dblclick
  • mousedown
  • mouseup
  • mousemove
  • mouseover
  • mouseout
  • keydown
  • keypress
  • keyup

live関数の使い方が理解できると、jQueryをさらに活用できそうです。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3