• ベストアンサー

このようなフォトギャラリーを作りたいのですが・・・

こんにちは。 下記のサイトのような、サムネイル画像をクリックすると、 背景が暗くなり、小窓に拡大写真が出るような仕組みを作りたいのですが、 これは、JavaScriptで作ってあるんでしょうか?? http://www.daiichi-engei.jp/honten/photogallery/ よく見る形なのですが、それを解説しているようなサイトが見つからなくって… 誰か、ご存知の方はいらっしゃらないですか?? まだ、かじっただけの知識しかないのですが、 そのような者が作るのは、至難の業なのでしょうか?? よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • singlecat
  • ベストアンサー率33% (139/418)
回答No.1

このサイトが使っているものズバリかどうか解りませんが、 "Lightbox"というJavaScriptのライブラリがあります。 "Lightbox"でググって見てください。

ffflowerr
質問者

お礼

おお! こうゆうものがあるんですね。 調べ不足でした。 とても参考になりそうです。 ありがとうございました!!

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • サムネイルをクリックすると画像が拡大表示されるようにするには?

    下記のページの「SAMPLE」を、サムネイルをクリックすると、選択した画像が真ん中の段の陰付き白枠の中に拡大表示されるようにしたいです。 インラインフレームは使いたくないのでJavaScriptでできないかと思っています。 ちなみに当方はJavaScript初心者です。 白枠はcssで#subcon2というボックスの背景に設定しています。 画像については、サムネイルの画像はs01.jpg、s02.jpg・・・という名前で、拡大表示用の画像はサムネイルの名前からsを取って、01.jpg、02.jpg・・・と、名前を付けて、このhtmlと同じ階層にある「images」フォルダの中の「sample_nail」フォルダに入ってます。 この情報で足りますか? どのようにすればいいでしょうか?よろしくお願い致します。 http://www.ac.auone-net.jp/~mrs/sample.html

  • ページ横スクロールでjQuery lightBox

    横に長いwebページを作っています。 ページの途中でjQuery lightBox plugin (http://leandrovieira.com/projects/jquery/lightbox/) を使って拡大画像を表示させたいのですが、 サムネイルをクリックすると、ページのはじめの方に拡大画像が表示されてしまいます。(拡大時の背景のオーバーレイもずれている) これを、サムネイルのあるページ上に表示させるようにしたいのですが、javascriptがよくわからないので、どのように修正したらよいか教えていただけないでしょうか。

  • オンマウスでレイヤーを出す。

    質問させてください。 リンク集のようなHPをやっております。 そこでリンクの一覧に小さいサムネイル写真を出して、それをマウスオーバーすると拡大サムネイルが出てくるようにしたいと思っております。 レイヤーの表示・非表示でやろうかと思っていたのですが、どうもうまくいきません。やはり一から書くのは私にはちょっと難しそうで、、参考にできるページなどがありましたら教えていただきたいのです。 イメージしているのは以下のようなものです。 http://blogdesign.cocok.jp/ ポインタについてくるようにする必要はないのですが、、このようなものをjavascriptでできないでしょうか。 どうぞよろしくお願いいたします。

  • 背景色が変えられません。

    ビルダーでHP作成しています。タグの知識は殆どありません。 サムネイル写真をクリックした時の、拡大写真の方の背景色を変えたいのですが、 何処にどんなタグを挿入すればいいのかが分かりません。

    • ベストアンサー
    • HTML
  • web制作・小窓リンクの技

    web制作初心者です。 こちらのサイトの小窓の出し方を教えてください。 http://www.tv-asahi.co.jp/aibou/contents/cast/ 通常の別ウィンドウで、立ち上がるタイプの小窓リンクではなく、 このサイトの様に、小窓のOPEN&CLOSEを滑らかしたいのと、 小窓を任意の場所に移動させる技を知りたいです。 ソースをみてもイマイチよくわかりません。。。 こちらは、Javascriptを使用しているのでしょうか? また、このようなソースの解説やサンプルを紹介しているサイトがあれば、 教えて頂ければと思います。 よろしくお願い致します。

    • ベストアンサー
    • CSS
  • サムネイル画像の拡大

    サムネイル画像がオンマウス時に拡大するようにしたいと思い、色々調べました。 画像をtableタグ(表!?)の中に表示させようとすると、デザインが崩れるものばかりでした。 ようやく下記のサイトに辿り着き、デザインも崩さずに画像を拡大させることが出来たのですが・・・・・・ 複数の画像を同じように拡大できるようにしようとした所、拡大した画像が他の画像(拡大するように設定しているサムネイル画像)の下に表示されてしまいます。 これをサムネイル画像の下にならないようにするにはどうしたら良いのでしょうか??? また、この方法以外でも、比較的簡単でデザインを崩さない拡大のやり方があれば教えて下さい。 お願いします。 私が試したサイオトは下記のものです↓ http://tonecontrol.mods.jp/memo/css_thumbnail.html

    • ベストアンサー
    • HTML
  • Movable Typeのコメント欄

    すみません、別のカテゴリーでも質問しているのですが・・・。 最近Movable Typeを始めました。 コメント欄をJavascriptを使って小窓で 出すのはどうすればよいのでしょうか? こちら→http://marginalwhites.jp/の サイトさんで使用されていたのですが、 どうやるのか全くわからないので。 小窓で出したところに自分の日記的なものと、 その下にコメントが入れられるようになっていました。 わかる方、教えてください。

  • CSSだけでサムネイルから拡大画像チェンジ

    1ヶ所の指定場所に拡大画像が表示された状態で、下段にいくつかのサムネイルを設置し、マウスをそのサムネイルに乗せると拡大画像がチェンジして、マウスを外すと元画像に戻るみたいな事をCSSだけで表現したいのですが可能でしょうか?感じとしては http://curucuru-select.com/?pid=7429014 のCSS版みたいなものをのぞんでいるのですが・・・多分このサイトはjavascriptでやってるみたいなんですけど・・できたら、サンプルソースをいただけるとありがたいのですが・・どうかよろしくお願いします。

    • 締切済み
    • CSS
  • 半透明の小窓

    http://www.taiyo-yakuhin.com/factory/plant.html のサイトの「工場設備」の箇所をクリックすると、小窓が出て、背景が少し透明になっています。 逆に http://www.taiyo-yakuhin.com/factory/technology_syringe.html はページが半透明になります。 これはどのようにするのでしょうか。 CSSとJavascriptを組み合わせるのでしょうか。 Javascriptは例文をペーストするくらいしか出来ませんが、もしわかりやすいサイト等があったら教えてください。

  • JavaScriptでアニメーションを作成

    JavaScript初心者です。よろしくお願い致します。 現在製作中のサイトにて、JavaScriptを使ったアニメーションを作りたいと思います。 アニメーションの動きは下記のとおりです。 Aの背景画像を、ブラウザサイズにより画面いっぱいに表示。 その上にBの画像を配置(位置はAのこの位置…と決められています)。 ↓ 画面をクリック後、Aの背景、およびBの背景が拡大されてフェードアウトされます。 その拡大方法なのですが、それぞれの中心から拡大するのではなく、 ちょうど建物の前に犬がいるところに近づくような アニメーションを施したいと思います(※添付画像を参考)。 参考になるサイト、およびjQueryなどありいましたら教えてください。 なにぶん、JavaScriptを使いはじめてまだ間もないので、 参考書を探すのにも苦労している次第です。 よろしくお願い致します。