0

前進する最善の方法についてのアドバイスや、安定したプラグイン/ソリューションに関する推奨事項が必要です。

基本的：

  1. それぞれ 3 つの画像を含む 2 つの行があり、合計 6 つの画像があります。
  2. 各写真は商品です。
  3. リンクをクリックすると、コンテンツが変更され、製品に関する詳細情報が表示されます。

下の画像は、私が達成しようとしている前後を示しています。

  1. 6 つの画像のいずれかをクリックすると、コンテンツ領域が変更されるため、レイアウトが異なります。
  2. 新しいレイアウトは次のとおりです。 A.上部の拡大されたコンテンツ領域。B.下部に 5 つのサムネイル。

レイアウト例

今は派手なものは必要ありません。最終的にやりたいことは次のとおりです。

  1. ページ読み込み時に「前」の状態を表示します。画像の 1 つがクリックされると、この状態に戻る必要はありません。

  2. 「前」の状態から「後」の状態にどのように移行するか。両方の状態をdivに入れ、一方を非表示にして、「後」の状態をスクロールアップまたはバウンスアップするだけで、「前」の状態をカバーするか、コンテンツ領域から押し出すのと同じくらい簡単だと思っていました。現在は隠されています。

  3. 「後」の状態になると、製品画像をクリックすると、その上のコンテンツ領域がフェードイン/フェードアウトする可能性があります。

  4. 表示されている製品は下部に表示されるべきではありませんが、なぜ6つではなく5つの画像しか表示されていないのですか... 6つすべてを下部に表示して、物事を簡単にすることができます.

ノート：

A. この 2 つのチュートリアルを見ていましたが、実際にはすべてのページ コンテンツが変更されています。サンプル画像に示されているものの左側にコンテンツがあり、これをフェードインおよびロードアウトする必要がないため、これはうまくいきません: - http://css-tricks.com/動的ページ置換コンテンツ/ - http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/comment-page-1/#コメント

B. 考えてみると、物事の一貫性を保つために、おそらく次のことを行うのが最善でしょう。

  • 「後」の状態を下から UP にスライドさせ、「前」の状態を押し出します。
  • 「後」の状態になると、製品画像がクリックされたら、製品情報を左から右にスライドするだけです。
  • そのため、下部には 5 つの製品画像のみが表示され、現在表示可能な製品の div が非表示になります。ただし、常に 6 つすべてを表示する方が簡単かもしれないと考えています。

上記の実装が SEO にどのように影響するかはわかりませんが、多数の div を非表示にして何らかの方法で jquery を利用する以外に、私が行っていることを達成できる方法は他にありません。

4

1 に答える 1

2

これを作るのは難しくありません。各画像にデータを持つオブジェクトを含む配列として画像を利用できるようにすることをお勧めします。次に、ページの読み込み時に、すべての画像の「タイル」を作成し、ボックスに配置します。タイルのクリックを処理し、必要に応じて移動します。おそらくdiv、製品情報用の を作成することもできます。

私は退屈だったので、jQuery を使用して小さな例を作成しました: JSFiddle の例

注:上記のリンクは Chrome でのみテストしたので、Firefox や Opera などでは矛盾が生じる可能性があります。

于 2012-08-04T13:33:42.147 に答える