2012-02-02 5 views
1

最初にスタックがオーバーフローしました。リンク時のスクロールリセットを防止しますか?

私はいくつかのhtmlページを持つウェブサイトを作っていますが、それらの画像には大きさがほぼ同じで、名前の付け方が異なる画像が含まれています。

写真はウェブサイトとよく似ていますが、300ピクセルのヘッダーがありますので、下にスクロールして全体の画像を見てください。これは、これらすべてのギャラリーページの共有CSSに組み込まれています。

ギャラリーの次の画像を指すようにハードコードされた画像の下に、簡単なテキストリンクがあります。 (私は20枚の画像のリストを表示しています)。誰かが画像をクリックすると、そのページに移動し、上部にスクロールをリセットし、ヘッダーが画像領域を押し下げるようにします。

新しいリンクのスクロールリセット動作を防止する方法を教えてもらえますか?

答えて

0

jQueryのようなものを使用せずに、あなたは#galleryにを追加し、各ページ上の画像上記<a name="gallery"></a>のようなアンカータグを持っており、様々なページへのリンクを与えたときに、このようなことのページをリンクすることができ例えば<a href="next_image.html#gallery">Next Image</a>のようなURL。これは各ページで重複していますが、堅牢なWebページは作成されません。あなたは将来的に物事を変えたいと思うでしょう。これは問題を引き起こし、さらに働くことになるので、私は動的な選択肢を検討します。

これは、jQueryのようにシームレスに見えず、必要に応じてAJAXを使用して画像を読み込むことに注意してください。それとも、JSのギャラリーが大部分を占めるようになっても、最初は目に見えないページにイメージをロードしてから、JSでリンクをクリックするとイメージが表示されます。これの利点は、提供された画像を使用してJSでリンクを生成できることです。イメージのサイズが十分に大きく、ページの読み込みにかなりの時間がかかる場合は、プレースホルダイメージを作成することを検討してください。いずれにしても、lightbox 2をご覧ください。

また、このギャラリーを作成するためにサーバー側のスクリプトを使用しているとは感じられませんでした。 jsの解決策があなたに合っていない場合、または当時のコンテンツの必要性に基づいてWebサイトの一部を自動的に生成するという追加の利点がある場合は、PHP、Python、Rubyなどを使用してみてください。あなたが後にしている単純なウェブサイト、偉大な解決策はWordpressかもしれません。

+0

さて、私はアンカーを追加し、スクロールが止まった。非常に固体、ありがとう。私は400kbの画像を表示していますので、負荷時間は私の必要性を考慮してこの時点であまり心配していません。最終的に私はサーバー側のスクリプトを理解することができるときに、より効率的なWebサイトギャラリーを作成します。この時点で、私はレンガ造りのものを作りたいと思っていますが、自家製です。私はグラフィックデザインのバックグラウンドを持っているので、グラフィックを使ってシンプルさを隠すことができます。 – user1152532

+0

それは良いことを聞くのは良い:) –

0

イメージを1ページ置き換えて置き換えることはできますか? http://www.quirksmode.org/dom/fir.html

もちろん、ある種のフォトギャラリーがあると仮定して、「前/次の」ボタンシステムで機能するように機能を変更しました。

詳細を投稿してください。

+0

ありがとうございました。 – user1152532

0

あなたは、あなたのリンクは、このような何かを見てみたい:

<a href="http://www.w3schools.com/html_links.htm#tips"> 
Visit the Useful Tips Section</a> 

を、あなたは、この場合のid =「ヒント」あなたのイメージを与えたいです。

例を見るにはこのフィドルをご覧ください。唯一の違いは、あなたのhrefは上記のコードのようなURLの残りの部分を持つことです。

http://jsfiddle.net/QgzsL/

+0

答えをありがとう。 – user1152532

関連する問題