- ベストアンサー
WEB ギャラリーの作り方 ２段階の拡大
ギャラリーサイトを作成しています。 10枚ほどの画像を並べて、 マウスオーバーした時に少し拡大、クリックすると実寸の画像が表示されるようにしたいです。 下記サイトが近いのですが、マウスオーバー時に拡大したいです。 http://tympanus.net/Tutorials/CSS3Lightbox/index.html 参考になるjquaryがあれば教えてください。 よろしくお願いします。
- kapakapa
- お礼率84% (204/241)
- JavaScript
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
普通によく使用されている、画像拡大のライブラリを利用してクリックでの拡大をするとして、マウスオーバーでの拡大はCSSでと使い分ければ比較的簡単ではないかと思います。（ライブラリによってはうまくいかないものもあるかも） まぁ、ついでにスクリプトでやってもいいんですけれどね。 試しにlightboxでやってみましたが、 CSSの指定は、例えば #gallery a { display:block; width:70px; height:70px; } #gallery a img { width:100%; height:100%; } #gallery a:hover { width:150px; height:150px; } のような感じで。 （直接 img:hover でもいいのですが、リンク要素でないとダメなブラウザもあるので…） 画像拡大表示のライブラリはいっぱいあるので、お好きなものを探してみてください。 ＜以下ごく一例です＞ http://jquery.com/demo/thickbox/ http://highslide.com/ http://www.lokeshdhakar.com/projects/lightbox2/ http://www.nickstakenburg.com/projects/lightview/
関連するQ&A
- マウスオーバーで画像を拡大表示させたいです
http://www.videocopilot.net/tutorials/ 上記サイトのように、マウスオーバー画像をマウスオーバーするだけで マウスカーソルに追尾して画像やflvを表示させるには、どのようなプログラムを行えばよいのでしょうか？ または、ソフトの購入などが必要なのでしょうか？ ヒントまたは参考サイトなどございましたら、教えてください。 お願い致します。
- 締切済み
- JavaScript
- 【FLASHの拡大】教えてください★
下記のサイトの地図のFLASHの作り方を教えてください。 http://www.staging.fbf.fai.fujitsu.com/global/ 画像は作り、マウスオーバーしたら色が変わるところまではできました。 ★クリックしたら画像が拡大される方法を教えてください★ よろしくお願いします！！
- 締切済み
- その他（インターネット・Webサービス）
- Lightboxを用いても拡大されない
現在、自分が作っているHPでLightboxを使おうとしているのですが、 拡大したい画像は表示されるのですが、クリックしても何も起こりません。 CSSファイルやJavascriptファイル、 Lightboxを利用したいhtmlファイルで修正すべき箇所はしたと思うのですが・・・。 またパスは絶対パスが推奨されているようですが相対パスでは動かないでしょうか？ ちなみに私が利用しているブラウザはSleipnirです。 ぜひ回答をお願いします。
- ベストアンサー
- フリーウェア・フリーソフト
- フォトギャラリーについて
Vistaに搭載されているwindowsフォトギャラリーで画像を開いてスクロールをすると拡大表示できますよね。しかし、XPにあった画像ビューアよりも画像が荒れて拡大されていませんか？ XPのビューアは拡大してもそんなにカクカクした画像になりませんでした。（ちょっとぼやけた感じにはなりますが）しかし、Vistaではぼやけた感じにはならないもののカクカクした荒い拡大画像になってしまいます。 XPの時のような拡大の仕方に出来ないでしょうか？ あと、ちょっと話が反れるんですが、JPG形式の画像を右クリックして編集を押すと必ずフォトギャラリーが開いてしまいます。XPの時のようにペイントが既定の画像編集ソフトにするにはどうしたらよいでしょうか？
- 締切済み
- Windows Vista
- Lightbox2以外の拡大方法
今、サイトでLightbox2を使っています 前に見かけたのですが同じページ内で 例えば ジャンル１○○… ジャンル２●●… の画像があった時 ジャンル１○○…の画像をクリックするとそのジャンルだけを ループして表示させているところがありまして、 それはどうやっているのかな？ と思いました 今からもう少し踏み込んだ事もしてみたいので その様な拡大画像を表示する方法はどうしたら良いのか教えて下さい
- ベストアンサー
- ブラウザ
- jQueryイメージギャラリーに関しての質問です。
jQueryに関して。下記URLを参考に、イメージギャラリーを設置しました。 http://www.webdesignerwall.com/demo/jquery/img-replacement.html この、大きく表示されている画像に対して、さらにリンクを設定し、画像をさらに大きく表示させられるようなjQueryプラグインはあるでしょうか。 たとえばこの画像は 550px × 400px となっていますが、さらにこの画像をクリックすることで、別に用意された倍のサイズの画像をlightbox効果を付けて表示できるような、そういったプラグインです。 また、この画像が表示されている部分に、別のHTMLファイルを表示させられるようなプラグインがあるかどうかも知りたいです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 背景が透過グレーになる、拡大画像の表示方法
こんにちは。 検索しても見つけられなかったので質問させてください。 写真一覧ページの小さな画像を、クリックすると拡大表示 させたいと思っています。 yahooなどで画像検索すると一覧表示になり そしてクリックすると画面背景が透過状態のグレーになり 写真が拡大される、あの状態のような拡大方法を希望しています。 cssでマウスオーバーによる拡大方法は検索しても見つかるのですが 自分の探し方が下手なのか、箸にも棒にもひっかからず 行き詰まってしまいました。 サンプルが記述されているサイトや 言語自体がお分かりになる方がいらっしゃいましたら 教えていただけないでしょうか。 どうぞ宜しくおねがいいたします。 一覧例（小さな画像をクリック↓） http://image-search.yahoo.co.jp/search?ei=UTF-8&fr=top_ga1&p=dog
- ベストアンサー
- JavaScript
- マウスオーバーで画像が拡大するには？？
下記サイトのように商品画像にマウスオーバーすると商品がアップになるようにしたいです。 http://www.k-swiss.jp/index.php?page=shop.product_details&flypage=flypage.tpl&product_id=306&category_id=41&option=com_virtuemart&Itemid=2 ｈｔｍｌとｃｓｓの基本的なのはわかります。 ご教授よろしくお願い致します。
- ベストアンサー
- HTML
- サムネイル画像の拡大
サムネイル画像がオンマウス時に拡大するようにしたいと思い、色々調べました。 画像をtableタグ（表！？）の中に表示させようとすると、デザインが崩れるものばかりでした。 ようやく下記のサイトに辿り着き、デザインも崩さずに画像を拡大させることが出来たのですが・・・・・・ 複数の画像を同じように拡大できるようにしようとした所、拡大した画像が他の画像（拡大するように設定しているサムネイル画像）の下に表示されてしまいます。 これをサムネイル画像の下にならないようにするにはどうしたら良いのでしょうか？？？ また、この方法以外でも、比較的簡単でデザインを崩さない拡大のやり方があれば教えて下さい。 お願いします。 私が試したサイオトは下記のものです↓ http://tonecontrol.mods.jp/memo/css_thumbnail.html
- ベストアンサー
- HTML
- 趣味サイトギャラリーページのデザイン
基本的なhtmlと、cssの基礎くらいしかわからない素人ですが、よろしくお願いします。 趣味のイラストサイトを作りたいと考えています。 イラストを展示するギャラリーページはどんなデザインがいいのでしょうか？ 見るのに時間の掛からない小さな画像が多いので、パッパッと切り替えられるようなデザインを探しています。 知り合いに相談したらLightboxを勧めてくれたのですが、ふわっと表示される感じがあまり好みではありませんでした。 フレームを使って、左側のリンクを押すと右側に画像が表示される、という昔ながらの方法が一番見やすいと思っているのですが、ダサいデザインしか思いつかないので。。 具体的な質問でなく恐縮ですが、よろしくお願いいたします。
- ベストアンサー
- CSS
お礼
ご回答ありがとうございます。 早速やってみました。なんとか出来そうです。 CSSの指定も自分なりに一度チャレンジしてみてダメだったので、 とても助かりました。 ライブラリの参考URLもとても助かります。 もっと勉強してみます。