1

ここで知識が不足している場合は、事前にお詫び申し上げます。勉強中のデザイナーです。

だから私は実際に自分のデザインを実行可能にしようとしていますが、さまざまな方法 (jquery、AJAX、lightbox) を見てきましたが、自分のデザインに合わせて何を使用すればよいかわかりません。リンクは一番下にありますが、基本的な問題は次のとおりです。

ポートフォリオの各アイテムには、メインの画像領域、いくつかのコピー、および画像の短いタイトルと選択可能な (数字で表される) 選択領域があり、私がやりたいことは両方を可能にすることです画像を変更し、選択領域で短いタイトルと番号を変更し、ページをリロードせずに別の番号の上にカーソルを置いたときにそれらを表示します。（この音を非常に複雑にして申し訳ありません。実際のページを表示すると、はるかに電信的になります。）理想的には、変更時に画像の微妙な/短いフェードアウトとインを可能にする方法を見つけたいと思います. 、鋭くて無愛想なスイッチではなく、それはケーキのアイシングです.

誰かが私を正しい方向に向ける場所について何かアイデアがあれば、大いに感謝します! 手伝ってくれてどうもありがとう！

http://personal.justgooddesign.net/draft/work.html

4

1 に答える 1

0

まあ、これはAjaxを使用して行うことができます。実際、Jquery を使用するとかなり簡単です。私がお勧めするのは、さまざまな「セクション」をページに分割することです。

つまり、たとえば、印刷ページのマークアップのみを含む print.html ページがあり、Web ページもモーション ページも同じです。(マークアップのみ = 「メイン画像領域、一部のコピー、および画像の短いタイトルを持つ選択領域」、 no <html>、<head>または<body>タグは、実際にはページの「セグメント」を作成しているためです。

メイン ページ コンテナーのマークアップは、id content3 と content4 を持つ現在の div が空になることを除いてほぼ同じです (そこにページを挿入するためです。実際、これら 2 つの div をページ セグメントに外注し、それらをa <div id='dynamic'></div>(セグメント内のアイテムの配置をより適切に制御できるため、より良い)。

ここから先は、jquery についてある程度の知識があることを前提としていますので、わからないことがあれば調べたり質問したりしてください。

各リンク (web / print / motion) に「load_segment」のクラスと web / print / motion の ID を持たせることができます。便宜上、作業の一部を自動化するために、ID に上で説明したページ セグメントと同じ名前を付けます (もちろん .html 拡張子は付けません)。

これが完了したら、jquery スクリプトを含めて、次のようなことを行います。

<script>
   $(function(){ // shorthand document.ready, ensures dom is loaded before starting

       $('.load_segment').click(function(){  // binds a click event handler to your links

           var page = $(this).attr("id") + '.html'  

           /* 
              here is why we named our id the same as our page segments, we auto generate 
              filenames, and thus only need to write this code once for all 3 links. you could 
              even add more later and as long as you have the corresponding html file segment 
              it will still work all the same 
           */

           $.get(page,function(segment){  
          // perform ajax request, fetch page, and then execute function 

               $("#dynamic").html(segment); 
              // the segment is inserted in the dynamic div created above.

           }); //end ajax request

        }); // end .load_segment click event

   }) // end of jquery document.ready
</script>

各セクションの番号付きリンクについては、セグメント内に上記のような埋め込み ajax fetcher を作成して (各セグメントに jquery を再度含める必要はありません)、各ページに「サブセグメント」を作成することもできますが、ページが成長する場合、長期的には少し複雑になるリスクがあります。

于 2011-06-15T20:26:47.000 に答える