1

アート ギャラリー用の WordPress サイトを開発しています。クライアントは、次のようなアーティスト名簿の画像ギャラリーを望んでいます: http://www.walkercontemporary.com/artists/

アーティストの特定のコンテンツへのリンクであるリストを生成するカスタム投稿タイプを作成しました。ここで、リンクのマウスオーバー時に隣接する DIV にサンプル画像を表示する効果が必要です。上記のサイトのソース コードを確認したところ、これが Dreamweaver の機能であることがわかりました。私のソリューションを WordPress の使いやすい CMS 機能に統合したいと考えています。それ以外の場合は、クライアントに別の解決策を探すようアドバイスします。手動コーディングを行うアーティストの大規模な名簿を維持するためのチョップがなく、訪問者がホバーするサムネイルを望んでいません (これは、他の多くのソリューションがそれに取り組んでいる方法です)。

理想的には、ある種の REL 値または自動的に生成される onmouseover 値が、カスタム投稿タイプの各アーティストに関連付けられた注目の画像を呼び出すリスト項目で生成されることを望みます。これは可能ですか?-thx - スティーブ

4

1 に答える 1

5

何らかの理由で、あなたのウェブサイトにアクセスして例を見ることができませんでした。

しかし、私の理解が正しければ、必要なのは 3 ~ 4 行の jQuery だけです。

$('#thumbs img').click(function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $('#description').html($(this).attr('alt'));// if you want to add description also
});

デモ

編集私

OPのコメントの後に -

私が間違っていたことを認めます... 4 行のコードは必要ありません。必要なのは 2 行だけです。:-)

しかし、同じコードが hover と click の両方で機能するという事実について、私は間違っていませんでした。それは本質的に同じです。

「クリック」という単語(関数)を「HOVER」で変更するだけです(他には何も変更されていないことに注意してください)

$('#thumbs img').hover(function(){
        $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    });

また、基本的なスキルを当然のことと思っていることもありますが、それは当然のことです。私が学んでいたとき、私は同じ初心者の問題を抱えていました。それでも疑問がある場合は、3 つのデモでフィドルを作成しました。

  1. 親指で交換
  2. ライブリンクと交換
  3. ダミーリンクと交換

ここでそれらすべてを参照してください: デモ

私は今それが明らかであることを願っています。

編集Ⅱ

我が神よ !!私はまた間違っていました。コードはさらに短くする必要があります。( replace() は必要ありません)

$('#largeImage2').attr('src',$(this).attr('href'));

最終デモ(短いコード)

(そしてところで-サイトがサーバー上で稼働している場合、「Dreamweaver機能」などはありません-Dreamweaverは CODE を生成するUIにすぎません.html / javascript / phpなどでも構いません.それは最後にありますTXT ファイル. その点で - コードの実行に関する「機能」はありません. メモ帳の GUI と見なすことができます :-) . 表示されるコードの「MM」部分は、Dreamweaver を介して挿入される通常の JAVASCRIPT (最適なものでさえありません) です。それで全部です)

于 2012-07-06T03:23:24.377 に答える