はてなブログでサムネイル画像をクリックすると、大きい写真が表示される機能を実装してみた

ブログで困った???

ブログで画像を載せるとき、たくさん載せると縦長になってしまうので、
取捨選択せざる負えない時ってありませんか?

そこで画像をクリックすると、大きな写真が表示されるjavascriptを今回作成しました。

必要な物

必要なものは載せたい写真と、それを小さくした写真です。
あとできれば大きな写真の方は、同じサイズの方がいいかもしれません。

記述するコード

<input type="image" src="画像のURL" alt="test1" id="image1" value=1>

<input type="image" src="小さい画像のURL" alt="test1"  onclick="kakudai(0);">
<input type="image" src="小さい画像のURL" alt="test1"  onclick="kakudai(1);">
<input type="image" src="小さい画像のURL" alt="test1"  onclick="kakudai(2);">

javascript

<script>
function kakudai(num){
    var elements = document.getElementById('image1');
    if(num == 0){
         elements.setAttribute("src", "画像のURL");
    }else if(num == 1){
         elements.setAttribute("src", "画像のURL");
    }else if(num == 2){
         elements.setAttribute("src", "画像のURL")
    }
}
</script>

解説

サムネイル画像のクリックイベントに引数を持たせて、渡ってきた引数によって
初期表示されている画像のsrcの値を書き換えています。

実装した結果

下のサムネイル画像をクリックしてみてください。
クリックした画像が表示されると思います。

もし使用する機会がありましたら使ってみてください。


ネットや読書で出会った雑学のまとめ

ネットサーフィンや読書で知った、へぇとなった雑学を

まとめました。現在、5個収録してあります。

定期的に更新予定です。

続きを読む

ガッツリ食べたい人はぜひどうぞ!JR総武線平井駅にある「麺屋やまき」

場所

JR総武線平井駅から改札を出て北口を出て、すぐ左に曲がります。

そして線路沿いを歩いていくとマンガ喫茶が見えてきますのでそこを

右に曲がります。そして十字路手前の左側に「麺屋やまき」があります。

 

2017年7月2日にオープンしたばかりの新しいお店です。

注文

注文したのは豚チャーシュー旨辛麺:880円

並と中で聞かれたので並を

ニンニクを入れますかと聞かれたので、いらない

でオーダー。

 

食す

そして来たのがこれです。↓↓↓

f:id:kirakira_rin:20170820180151j:plain

 

ラーメンの器からはみ出そうなぐらいでかいチャーシューと

たっぷりのもやしとタマネギ。まったく麺が見えません。

 

ラーメン二郎を彷彿させるインパクトです(笑)。

 

味の方はと言いますと、甘みが結構あり、

それで辛さが抑えられているので

そこまで辛くはなかったです。

 

麺の上にある具をどかすと、

f:id:kirakira_rin:20170820180024j:plain

麺が見えてきます。

 

チャーシューが結構分厚く、厚さは最大5ミリはありそうなぐらいです。

そして味もしっかりと染み込んでおり、辛さはなく甘さが強かった

ですがおいしかったです。

 

麺は中太ストレートで、スルスルと啜るというよりも、しっかり噛んで

食べるという感じでした。

 

量は結構多く、普通のラーメン店の大盛りがこの店の並ぐらいかと思います。

 

感想

麺が見えないというインパクトはやはり大きかった。

そして量も結構多く、ガッツリ食べたい人向けの店だろう。

 

特に唐揚げがあるやつは、唐揚げもかなり大きいので、興味がある人は

事前にググってからチャレンジした方が無難だろう。 

 

ごちそうさまでした。

 

 

JQuery UI のProgressBarのデフォルトの色を状況によって変えられるよう実装した。

f:id:kirakira_rin:20170820071911p:plain

時間がかかる処理とかの進行状況を表示するのに使われるprogressbarを

状況によって色が変化できるようにならないのかと考え

数字入力ボックスと連動してバーの変化とバーの色を変化させるプログラムを作成しました。

javascript

$(function(){

    $('#progress').progressbar({
        value:0,
        max:100
    });

    $('#aaa').change(function(){
        var param = $("#aaa").val();
        var color = $('.ui-progressbar-value');

        if(param <=30){
            color.css('background','red');
        }else if(param > 30 && param <= 60){
            color.css('background','yellow');
        }else if(param > 60){
            color.css('background','green');
        }
        $('#progress').progressbar({
            value:parseInt(param)
        });
    });

});

HTML側

<input type="number" min="0" max="100" name="num" id="aaa">
<div id="progress"></div>

javascript側の処理ではjQuery UI を使用して実装しております。




progressbarメソッドの初期設定を行い、数字入力ボックスの値が増減したときに

changeイベントを発火させ、値を取得します。取得した値に応じてバーの色が変化

するように背景色を変える分岐を入れました。そして取得した値を

progressbarメソッドにセットして完成です。




取得した値をparseIntで変換しないと値がセットされないことにハマりました・・・

作成したのはいいけれど使用する機会があまり思い浮かびませんでした・・・




おしまい

知っている人も知らない人も、紫キュア限定でキャラソン紹介

 紫プリキュアについて

 紫色をイメージカラーにしたプリキュアはミルキーローズから始まり

現在はキュアマカロンが担当しています。

 

紫色はミステリアスなイメージを持つカラーだそうで、キュアムーンライト

キュアマカロン、正体が不明だったころのミルキーローズは、

それにあたるかと思います。

中には、ポンコツ化するキャラもいますが・・・

 曲の紹介

今回はイメージカラーが紫色のプリキュアのキャラソンを2曲紹介します。

 

一曲目はドキドキ!プリキュアに登場するキャラ

キュアソードのキャラソン「こころをこめて」

です。

 

作詞:六ツ見純代

作曲:山口朗彦

歌っている方はキュアソード役の宮本佳那子さんです。

 

こころをこめて

こころをこめて

 

 

アニメ40話で挿入歌として流れた曲でもあり、思い入れがある人も

多いと思います。

 

まこぴー、かなり成長しましたね。自分の国を滅ぼしたキングジコチューの

娘であるレジーナを信じようなんてなかなかできることじゃないです。

 

 

 包み込むような優しいメロディながらどこか切なそうな雰囲気と

歌声が印象的な曲です。

 


 

二曲目はキラキラ☆プリキュアアラモードに登場するキャラ

キュアマカロンのキャラソン「CAT MEETS SWEETS

です。

 

作詞:Nostalgic Orchestra

作曲:サイトウヨシヒロ

歌っている方はキュアマカロン役の藤田咲さんです。

 

ご存知の方も多いと思いますが、藤田咲さんは初音ミクの声を

当てている人でもあります。

CAT MEETS SWEETS

CAT MEETS SWEETS

 

 今までのプリキュアのキャラソンでこんな挑発的で色っぽさを

醸し出した曲はないのでは。

 

 

焦らして 惑わせて でも嫌いじゃないわ
どうせなら思う存分楽しませてみて

歌詞より引用

 

挑発的で大人っぽい歌詞ですね。キュアマカロンは初登場から

敵を挑発する珍しいプリキュアです。メロディは気まぐれなゆかりを

表現しているのか複雑な感じの曲です。

 

以上、2曲紹介させていただきました。

黄色キュアの曲紹介に続いての記事になりましたが

気になる曲は見つかりましたでしょうか?

 

現在はプリキュアのイメージカラーで分類して紹介していますが

キャラソン以外にもいい曲は多いので時々紹介していきたいと思います。