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

スポンサーリンク

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

マウスオーバーで画像を入れ替え

色々検索した中で、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の[設定]>[メディア]で入力してあるサイズの画像が作られます。

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でも見た目が違うだけでほぼ同じです。

F12でソースを確認する方法

2-3. jQueryの部分

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

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

$('.category .category-item a img').each(function() {
ここでやっていること

bodyタグにclass属性categoryが含まれるページ(つまりカテゴリーページ)の、class属性にcategory-itemが含まれるコンテンツ(つまり「商品」カテゴリーに属する投稿)の、リンクタグがついた画像を、セレクタとして指定。セレクタに当てはまる場合この行以降の動作を行う。

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

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

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

var src = $(this).attr('src');
ここでやっていること

srcという変数に、http://example/wp/wp-content/uploads/image-400×300.jpgという値を代入。

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

var src_on = src.substr(0, src.lastIndexOf('-400x300.'))
 + '-1'
 + src.substr(src.lastIndexOf('-400x300.')); 
ここでやっていること
  • 5行目:元となる画像urlの、-400×300.jpg以前の文字列を取得(→http://example/wp/wp-content/uploads/image)
  • 6行目:5行目の値に「-1」を追加(→http://example/wp/wp-content/uploads/image-1
  • 7行目:6行目の値に「-400×300.jpg」を追加(→http://example/wp/wp-content/uploads/image-1-400×300.jpg
  • 5~7で作った画像urlを、5行目冒頭のsrc_onという変数に代入。

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

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

		$(this).hover(
			function() {
				$(this).attr('src', src_on);
			},
			function() {
				$(this).attr('src', src);
			}
		);
ここでやっていること
  • 9~11行目:カーソルがある時にimgタグのsrc値をsrc_on(つまりhttp://example/wp/wp-content/uploads/image-1-400×300.jpg)にする。
  • 12~14行目:カーソルがない時にimgタグのsrc値をsrc(つまりhttp://example/wp/wp-content/uploads/image-400×300.jpg)にする。

3. 改善すべきポイント

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

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

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

Welcartのサブ画像が用意されていない場合

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

4. まとめ

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

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

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

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

  1. nk より:

    かなり参考にさせていただいておちます、いつもありがとうございます。

    同じように書いても、マウスオーバーで画像切替がどうしても動作せず、コメントさせていただきました。
    サンプルサイトも動作してなかったもので、どうすればいいものかと。

    よろしくお願いいたします。

    • まめ子(管理人) より:

      すみません、デモページのテーマが最近変わりまして・・・jQueryのデモがなくなってしまいまして、そのままになっておりました。作り直す時間がないので、記事から取り除きますね。
      動かない原因は、jQueryですので、他のjQueryコードとコンフリクトを起こして動かないとか、セレクタがきちんと指定されていないなどが考えられると思います。

  2. nk より:

    お返事、ありがとうございます。
    他のjQueryコードとコンフリクトを起こして動かないとか、セレクタがきちんと指定されていない の2点、検証してみます!!

  3. nk より:

    セレクタの.category-itemを省くと動作しました!
    ありがとうございました。
    でもこれだと すべての画像リンクがマウスオーバーしちゃいますよね。
    どうすればいいんでしょう??

  4. nk より:

    すみません、自己解決しました、ほんとうにありがとうございました!!

Copyright© 2017 Welcart カスタマイズ ブログ All Rights Reserved.