Welcart カスタマイズ ブログ

商品一覧ページで、商品画像をマウスオーバーで切り替えるjQuery

• ツイート
• B! ブックマーク
• Google+
•  Pocket
• Facebook

商品一覧の時に、商品画像にマウスカーソルを置いた時に、画像を変えてみるカスタマイズです。

色々検索した中で、Welcartにもすぐに応用出来そうだった以下の記事を参考にさせて頂きました。

jQueryでロールオーバー（マウスで触ったときに画像が変わる）する方法 － GEEKZ

ちょっと動きを取り入れたい時や、一覧表示の時に簡単に違う画像を見せたい時に使えます。

1. jQueryのコード

コードの一例です。2以降で解説しますので、ご自分のサイトに合うように必要箇所は変更下さい。

コードの設置場所はwp_footer();直後あたり。もちろん別ファイルにしてwp_enqueue_scriptで読み込んでもいいですね。

<script>
    jQuery(function($){
	$('.category .category-item a img').each(function() {
		var src = $(this).attr('src');
        var src_on = src.substr(0, src.lastIndexOf('-400x300.'))
        + '-1'
        + src.substr(src.lastIndexOf('-400x300.'));　
		$(this).hover(
			function() {
				$(this).attr('src', src_on);
			},
			function() {
				$(this).attr('src', src);
			}
		);
	});
});
</script>

ちなみに、この例では以下の条件での設定になっています。

• カテゴリーページ（商品一覧ページ）でのみ動作させる
• カテゴリーページで表示させている画像サイズの拡張子は-400x300（例：image-400×300.jpg）
• Welcartでの商品画像の登録の、サブ画像（枝番号1）をマウスオーバー時に表示

2. コードの解説

2-1. Welcartの商品画像の設定

前提として、Welcartでの商品画像登録の方法に従って、以下のようにサブ画像に枝番号をつけていることにします。

• メイン画像：image.jpg（600px x 400px）
• サブ画像：image-1.jpg（600px x 400px）

もちろん、image-a.jpgなどでも問題ありません。後でこの枝番号「-1」をスクリプト内で指定するので、そこだけ変えればOKです。

2-2. 表示画像サイズの確認

WordPressのメディア設定を確認

WordPressでは、アップロードした画像を、自動でいくつかのサイズに分けて保存する機能があります。「いくつかのサイズ」と言っても、WordPressの［設定］＞［メディア］で入力してあるサイズの画像が作られます。

例えば上記の設定の場合は、image.jpg（600px×400px）がアップロードされた場合、image-400×300.jpg と image-150×150.jpg が、自動で生成されます（長辺が最大値として設定サイズに合わせられる）。

Welcartが出力する商品画像のサイズ

一方、Welcartで商品画像を表示させるタグusces_the_itemImage($number, $width, $height);は、カッコ内で指定した画像サイズに一番近い画像を取り出して表示させるようになっています。

usces_the_itemImage ー Welcartオンラインマニュアル

例えば、拙作の配布中Welcart対応のテーマであれば、カテゴリーページで出力させている画像タグは以下の通りです。

usces_the_itemImage($number=0, $width=228, $height=228);

この画像サイズに一番近い、WordPress側のメディア設定により作られた画像、つまり、上記WordPressのメディア設定であれば、image-400×300.jpgが選ばれることになります。

一番簡単な確認方法

色々仕組みを書きましたが、実際に出力されている画像のurlを確認するのに一番手っ取り早い方法は、キーボードのF12や右クリックで見られるHTMLソースを見て、表示されている商品画像がどのように出力されているか確認することです。

以下はGoogle Chromeの例ですが、Internet ExplorerやFirefoxでも見た目が違うだけでほぼ同じです。

2-3. jQueryの部分

自分のWelcartサイトで表示されている画像のサイズやらがわかったら、jQueryを組み立てます。

まずは、セレクタ（動かす部分）を指定。今回はカテゴリーページで動かしたいので、最初に.categoryを、更に商品に関する投稿のみに作用させたいので、.category-itemを加えています。これはWordPressのbody_class();とpost_class();が吐き出すclass属性（表示ページや内容によって変わるコード）です。

$('.category .category-item a img').each(function() {

セレクタはもうちょっと簡潔にしたほうがいいとは思いますが・・・welcartが吐き出すimgタグに、class属性を追加出来れば一番いいんですけどね（一発で指定出来る）。

後は、先述の参考にさせて頂いたサイトでの方法と同様です。

最初に、マウスオーバーしない時の画像のurlを取得しておきます。$(this)は$('.category .category-item a img')と同じです。

var src = $(this).attr('src');

次に、マウスオーバーした時に表示させたい画像のurlを生成します。

var src_on = src.substr(0, src.lastIndexOf('-400x300.'))
 + '-1'
 + src.substr(src.lastIndexOf('-400x300.'));　

※もし枝番号が「-a」という場合であれば、6行目のところを変更して下さい。

これ以降は、実際の動作部分です。

		$(this).hover(
			function() {
				$(this).attr('src', src_on);
			},
			function() {
				$(this).attr('src', src);
			}
		);

3. 改善すべきポイント

このコードは-400×300等と画像サイズの拡張子を指定してしまっているため、画像サイズの変化に対応出来ません。例えば、画像が縦なのが混ざっていたり、画像の比率がバラバラだったりする場合などはきちんとした画像urlが生成できません。

画像サイズの部分を柔軟に取り出すことが出来れば、もっと汎用性があるスクリプトになると思いますが、いかんせんあまりに私にプログラミングに対する根気がなさすぎて断念しました。

また、サブ画像が用意されていないとエラーになりますので、そのあたりの判別もございません。

という訳でjQueryが得意な皆様、いい方法があれば是非教えて下さい。

4. まとめ

例えば以下のような商品を扱っている時に、画像切り換え効果はそれなりに有効だと思われます。

• パッケージ入り商品（食品やおもちゃなど）・・・マウスオーバーでパッケージの中身を見せる
• 服飾品・・・マウスオーバーで着用画像・色違いを見せる
• びっくり箱とか・・・マウスオーバーで動きを見せる

今回は、Welcartで運営中のショップの既存の商品画像を活用するために枝番号を用いましたが、枝番号ではなく違う拡張子を画像につけて専用に保存して、それをマウスオーバーで見せてもいいかもしれません。

• 商品一覧ページ
• jQuery

• ツイート
• B! ブックマーク
• Google+
•  Pocket
• Facebook