Googleカスタム検索のサムネイル画像サイズ可変機能を実装する

jQueryでとても簡単に作れます

何がしたいか

Google Custom Search / Google Site Search では、検索結果にサムネイル画像を表示することができる
（https://cse.google.co.jp で、検索エンジンの編集 > デザイン > サムネイル でオンにすればOK）

表示される画像の指定方法はまあググってもらうとして、
初期状態だとサムネイル画像のサイズが62px固定となかなか小さいので、
ボタン「小」を押すと62px、ボタン「中」を押すと93px（1.5倍）、ボタン「大」を押すと124px（2倍）で表示されるようにします。

実装

<style type="text/css">
.gsc-thumbnail .gs-web-image-box {
	width: auto;
}

.gsc-thumbnail .gs-web-image-box img.gs-image {
	max-width: initial;
	max-height: initial;
	width: 62px;
}
</style>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
	$('#img_s').click(function(){
		$('img.gs-image').width(62);
		$('.img_size').removeClass('active');
		$(this).addClass('active');
	});
	$('#img_m').click(function(){
		$('img.gs-image').width(93);
		$('.img_size').removeClass('active');
		$(this).addClass('active');
	});
	$('#img_l').click(function(){
		$('img.gs-image').width(124);
		$('.img_size').removeClass('active');
		$(this).addClass('active');
	});
});
</script>

<a href="#" id="img_s" class="img_size active">小</a>
<a href="#" id="img_m" class="img_size">中</a>
<a href="#" id="img_l" class="img_size">大</a>

結果