ブログ|静的志向

言語言語切替
日本語 English
サイト内検索

札幌在住のTakaによる静的htmlで作成したブログです。

素早く表示されるブログを作ることを目的として書いています。

jqueryを使ってcssの読み込みを切り替える方法

ミミズク

特定のエリアやボタンをクリックした時に画像の大きさを変えてみませんか?例えば一覧で見せている画像たちを「良い写真だから大きい画像でも見てほしい!」という要望を叶えるときに役立ちます。やり方はjqueryを使えば単純なコードで完成します。

百聞は一見にしかず、まずは実物を見てみよう

※現在この方法はボツとなっています。そのかわりギャラリーのページを新しく作成しました。

Beach Comber(ビーチコンバー)」の写真一覧はとくにおすすめです。

「大きい画像」をクリックすると画像が拡大され、「元の大きさ」を」クリックすると一覧表示に戻ります。ちなみに画像はすべて札幌の円山動物園で撮影したものです。

「大きい画像」「小さい画像」それぞれにclassを指定して、それぞれの文字がクリックされると画像を読み込んでいるスタイルシートのsrc=""の中が切り替わる使用です。

cssの中を切り替えるのにはjqueryを使用しています。そのjqueryの中は

$(function(){
$(".large-img").click(function(){ //.large-imgは「大きい画像」の領域
var lg = $("#side-by-side"); //#side-by-sideは画像を読み込む用のcss
lg.attr("href","/css/side-by-side-large.css"); //変数lgに#side-by-sideを入れ、配列attrにlgを入れリンク(href)の中を上書きする
});

$(".small-img").click(function(){ //small-imgは「元の画像」の領域
var sl = $("#side-by-side"); //#side-by-sideは画像を読み込む用のcss
sl.attr("href","/css/side-by-side-img.css"); //変数slに#side-by-sideを入れ、配列attrにlgを入れリンク(href)の中を上書きする
});
});

↑単純にトリガー用の領域をclass指定して、そこをクリック(スマホやタブレットではタップ)されたときに画像のデザインを決めているcssの中を上書きしているわけです。

なお実際にはjqueryのソースを読み込んでから、外部の.jsに保存したファイル(上記のjavascript)を読み込んでいます。

<script src="/js/jquery-newest.js"></script>
<script type="text/javascript" src="/js/side-by-side.js"></script>
※<>は実際には半角

とりあえずこれでギャラリーページが作れるようになりました。大きくした画像も一覧表示にボタン一つで戻せるし、十分だと思います。

前回の「横並びで綺麗に写真を並べてみるテスト」では画像を大きくしたらそれっきりでしたからね~元に戻せないとか、意味ないじゃん!

あとがき

現在は廃案となってしまいましたが、この方法を使えば読み込むcssを強制的に変えられます。文字の大きさを変更したりするのには便利なはずです。

↓鋭意制作中↓

ダイエットエラミカ

私自身の実践と経験に基づくリバウンドしないダイエットについて詳しく解説しています。

筋肉量31.4kg

BMI21.9 筋肉型スリム

元の用紙はこちら

↑このように私自身の体組成結果をすべて公開しています。現時点で2年以上のデータ、体脂肪率1桁の結果は21ヶ月連続で達成中です。

詳しくは「ダイエットエラミカ」よりご覧ください。

Sponsor Link

シェアしてくれると嬉しいです