サムネイルの画像をマウスオーバーで拡大・切り替え・表示します！へのコメント

yotigory より

yotigory — Thu, 16 Mar 2017 01:19:03 +0000

コメントありがとうざいます！

↑画像の名前はなんでも構いませんが、同じ画像ではなく二つの画像を上記のように大きな写真と小さい写真を入れていただければ…と思います。
また何かありましたらご質問ください～

フレディーより

フレディー — Wed, 15 Mar 2017 21:55:38 +0000

こんにちは。
自分の作品のサイトを作っている途中で、こちらのサイトを参考にさせていただいております。
質問ですが、

の部分の写真パスは、同じ写真を名前を別にして書きこむのでしょうか？(“mg/image01.jpg”と”img/thumbnail01.jpg”)の部分です。
そのようにやってみたのですが写真がメイン画像に反映されず。。。
よろしくお願いいたします。

yotigory より

yotigory — Fri, 21 Oct 2016 00:19:29 +0000

raira への返信。

コメントありがとうございます。
サムネイルの画像を小さくしても横幅が固定されてしまっているのは、CSSでサムネイルを囲んでいるリストタグ「.thumbnaillist li」の指定がwidth:60px;と設定されているからだと思います。
これの幅をちょっと変更してみてください～

raira より

raira — Thu, 20 Oct 2016 07:38:49 +0000

html初心者ですが大変分かりやすく感謝しております。
1つ質問なのですがテーブルのセル内に使う為、mainimglistをcssでwidth:300pxにmainimglist imgをwidth:280pxに設定し、それに合わせサムネイルの方の画像サイズなど変更したのですが高さは縮まっても横幅が固定されたままで思うように小さくなってくれません。サムネイルの画像サイズ変更時はどこをどう変えればいいのでしょうか？初歩的なことかもしれないですがよろしくお願いします。

ykarimino より

ykarimino — Fri, 04 Mar 2016 06:29:22 +0000

yotigory への返信。

なるほど、ありがとうございます。
たしかにfadeIn()の記述がありますが、実際には機能していませんね。。。
別の方法でどうにか実装できないか勉強してみます。
ありがとうございました。

yotigory より

yotigory — Fri, 04 Mar 2016 06:18:14 +0000

ykarimino への返信。コメントありがとうございました。なんか私.fadeIn()を書いちゃってますけど、これ無駄ですね。。。マウスオーバーすると読み込む画像のURLを変更しているだけなので、フェードインなど効果を持たせることができないんです。すみません～

ykarimino より

ykarimino — Fri, 04 Mar 2016 05:33:31 +0000

すばらしいコードをいつもありがとうございます。
このページのコードを使わせていただき、HPを作成しています。
2013年7月1日の記事を見させていただき、
$(function(){
// hover時
$(“#thumbnaillist li a”).hover(function(){
$(“#mainimglist img”).attr(“src”,$(this).attr(“href”));
$(“#mainimglist img”).attr(“alt”,$(this).attr(“title”));
},
　　//hoverが外れたら、元の画像に戻す
function(){$(“#mainimglist img”).attr(“src”,(“img/thumbnail01.jpg”));});
//クリック時
$(“#thumbnaillist a”).click(function(){
return false;
});
});
このようにswapimage.jsの内容を変更しました。この動作状態で大きい画像にフェードイン、フェードアウト効果を持たせることは可能でしょうか？
js初心者でこんな質問して申し訳ありませんが、ご指導いただきますようお願いいたします。

yotigory より

yotigory — Mon, 18 Jan 2016 10:47:54 +0000

西田への返信。

西田さま
コメントありがとーございます。
Woedpressであってもjqueryとswapimage.jsがチャント読み込まれていれば動くはず？なんですが。。。
advance custom fieldの中ということなので何かがうまくいってないかもしれませんが、基本的にはPHPを書く必要はないと思うのです、、、サイトのつくりがちょっと分りませんので、これをこうして～といえないですね。。すいません。

西田より

西田 — Mon, 18 Jan 2016 06:43:07 +0000

初めまして。西田と申します。
マウスオーバーで画像の切り替えを検索している中、この記事にたどり着きました。
大変わかりやすい記事で、早速入力してみたのですが、マウスオーバーが動きませんでした。

現在私は、wordpressを使用しadvance custom field というプラグインを使用して、カスタム投稿からこのqueryを動かせないものかと入力してみたのですが、動きません。

もしお時間ございましたら、phpでの記入方法（と書けばいいのでしょか）を教えていただけますと幸いです。コメント失礼いたしました。

yotigory より

yotigory — Fri, 03 Oct 2014 23:50:50 +0000

マリンへの返信。マリンさん、コメントありがとうございます。実はですねー。このマウスオーバーのやつはフワッとできるように作ってないんです。。。なので、よければコッチ↓ サムネイル画像をクリックして大きく見せます！を使ってくださるといいのでは？と思ったりします。すいませんです～ペコリ。

サムネイルの画像をマウスオーバーで拡大・切り替え・表示します！ へのコメント

yotigory より

フレディー より

yotigory より

raira より

ykarimino より

yotigory より

ykarimino より

yotigory より

西田 より

yotigory より

サムネイルの画像をマウスオーバーで拡大・切り替え・表示します！へのコメント

フレディーより

西田より