質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

511閲覧

Lightboxを利用してポップアップなしの画像ギャラリーを作成しようとしています

hidepon

総合スコア206

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/09/11 23:53

編集2017/09/12 08:22

簡単な画像ギャラリーを作成してズーム機能を付与しようとしています。
主画像1枚
サムネイル関連する画像全てを下に並べるというベタな構造です。
サムネイルにマウスを乗せると主画像を該当する画像に置き換えるという、よくありがちな
小細工をします。
これをlightbox を利用して、画像のポップアップをしない形で実現したいと思っています。
そもそも、lightbox でオーバーレイを設定せずに実現できるのか?というのもあり試行錯誤しています。
あと、主画像をクリックするとzoom.jsというのを利用して拡大したいです。
これらについてご存知の方がいらっしゃったら教えていただけるでしょうか?

<script type="text/javascript" src="/js/lightbox.js"></script> <link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="all" /> <script src="/js/jquery.zoom.min.js"></script> <script type="text/javascript" charset="utf-8"> $(function(){ $(document).ready(function(){ $('#main_image').zoom({ on:'click' }); }); //マウスオーバーした場合 $('.thumbnail').hover(function(){ var index = $(".thumbnail").index(this) + 1; // マウスオーバーしている画像をメインの画像に反映 $('#top_image').attr('src', $("#thumb" + index).attr('src')); }); //クリックしたら確定的な措置 $('.thumbnail').click(function(){ var index = $(".thumbnail").index(this) + 1; // マウスオーバーしている画像をメインの画像に反映 $('#top_image').attr('src', $("#thumb" + index).attr('src')); }); });

ここから追記

プラグインを使ってなんとかしようと思ったんですが、
なんだか訳わかんなくなってきて自力で作ってみました。
シンプルなものなので出来そうな気がして・・・あと主画像にzoom機能があれば
問題なさそうなのですが・・・・。とてもクラシックなギャラリー機能です。

//マウスオーバーした場合 $('.thumbnail').hover(function(){ var index = $(".thumbnail").index(this) + 1; // マウスオーバーしている画像をメインの画像に反映 $('#top_image').attr('src', $("#thumb" + index).attr('src')); });
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="padding-right:30px"> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <span class="zoom" id="main_image"><img src="/image/photo1.jpg" class="img-responsive" id="top_image" /></span> </div> </div> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <p class="col-lg-2 col-md-2 col-sm-2 col-xs-2"><img src="/image/photo1.jpg" class="img-responsive thumbnail" id="thumb1" /></p><p class="col-lg-2 col-md-2 col-sm-2 col-xs-2"><img src="/image/photo2.jpg" class="img-responsive thumbnail" id="thumb2" /></p><p class="col-lg-2 col-md-2 col-sm-2 col-xs-2"><img src="/image/photo3.jpg" class="img-responsive thumbnail" id="thumb3" /></p><p class="col-lg-2 col-md-2 col-sm-2 col-xs-2"><img src="/image/photo4.jpg" class="img-responsive thumbnail" id="thumb4" /></p><p class="col-lg-2 col-md-2 col-sm-2 col-xs-2"><img src="/image/photo5.jpg" class="img-responsive thumbnail" id="thumb5" /></p><p class="col-lg-2 col-md-2 col-sm-2 col-xs-2"><img src="/image/photo6.jpg" class="img-responsive thumbnail" id="thumb6" /></p> </div> </div> </div>

さらに追記
いろいろ試してみているのですが、どうもうまくいかないので、CSSでやってみようと試みてます。

p img#top_image { width:500px; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } p:hover img#top_image { width:500px; -webkit-transform: scale(1.3); transform: scale(1.3); }
<div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <p><img src="/image/photo1.jpg" class="img-responsive" id="top_image" /></p> </div>

としましたが、マウスを乗せると主画像の下に配置したサムネイル画像の領域にまで影響をしてしまいます。
この主画像の枠の範囲で拡大が出来ないでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2017/09/12 00:10

html部分もコードいただけますか?
hidepon

2017/09/12 00:22

HTMLコードの部分をどのように記述したらいいのかが分からなくて・・・。aタグを外せばよいというわけでもなさそうで、悩んでいます。ご存知であれば教えていだければと思います。スミマセン・・・・
kei344

2017/09/12 04:11

書かれている状況が再現するコード(HTML/CSS)を提示されてはいかがでしょう。
hidepon

2017/09/12 04:15

もう訳が分かんなくなってきてパニック状態でシンプルに主画像の下にサムネイル画像を並べる。そして画像にマウスを乗せると主画像が切り替わる。というところまで自力でやりました。この主画像にズームができればOKなんですよね・・・・それが分からなくて。ソースを載せます。
guest

回答3

0

LightBoxはそもそもオーバーレイ表示するためのライブラリです。
そうではなく、単純にサムネイルホバーで画像が切り替わる機能ならば、他にいくらでもスライドショーライブラリがあります。
(Slick、Boxsliderなど使いやすいものを選べば良いと思います。)

LightBoxを使うのが前提だとするならば、メイン画像クリック時に出現するオーバーレイ部をCSSなどで非表示にしてしまうのも手かと思います。(#lightboxOverlayと#lightbox)

そしてメイン画像自体を何かしらの方法でズームすれば良いかと思います。

投稿2017/09/12 02:23

shaak

総合スコア607

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hidepon

2017/09/12 04:01

ご返答有難うございます。bxslider、slickを検討していますが、メイン画像部分、サムネイル画像部分にそれぞれ、同数の画像を並べてスライドショウを行う形式のように思います。(もしかして主画像1枚にする方法があるのでしょうかね???調べてみますが。)こうなると、マウスオーバーで選択状態にする、そしてズームをするという挙動について厳しいように感じます。ご教授頂ければ幸いです。
guest

0

ベストアンサー

古いjQueryプラグインですが、方向性としてはこういう感じでしょうか。

【[ECサイト][jQuery]商品画像のズーム表示[elevateZoom]】
http://peacepopo.net/blog-entry-59.html

【elevateweb.co.uk/image-zoom】
http://www.elevateweb.co.uk/image-zoom

【elevateweb.co.uk/image-zoom/examples】
http://www.elevateweb.co.uk/image-zoom/examples

【GitHub - elevateweb/elevatezoom】
https://github.com/elevateweb/elevatezoom

投稿2017/09/12 05:42

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hidepon

2017/09/12 05:45

ご回答有難うございます。どちらかというと、主画像の内部でzoom出来ることが望ましいと思っています。 http://i-like-robots.github.io/EasyZoom/ これが結構近いかな?と思っています。イマイチ使い方が分からないんですが・・・
kei344

2017/09/12 05:48

提示のライブラリのサンプル内に同じ挙動がありますよ。
hidepon

2017/09/12 06:40

サムネイルの部分が近いかなとは思っているですが、、うまく動いてくれなくて・・・。説明の部分をもう少し詳しく書いて頂ければうれしいんですが。コピペのレベルでは動かないですね・・・何かが足りていないのだとは思います。
hidepon

2017/09/13 00:58

eazy zoom というのが近いのですが、うまくいきません。いったんここで質問を区切りますね。有難うございます。
guest

0

試しにCSSで書いてみました。
サンプル

CSS

1#wrapper { 2 display:flex; 3 width:150px; 4 flex-flow:wrap; 5} 6#wrapper img{ 7 width:50px; 8} 9#wrapper .main{ 10 width:0px; 11 order:1; 12} 13#wrapper img:hover + .main{ 14 width:150px; 15 transition: all 500ms; 16}

HTML

1<div id="wrapper"> 2<img src="http://placehold.jp/150x150.png?text=1"> 3<img src="http://placehold.jp/150x150.png?text=1" class="main"> 4<img src="http://placehold.jp/150x150.png?text=2"> 5<img src="http://placehold.jp/150x150.png?text=2" class="main"> 6<img src="http://placehold.jp/150x150.png?text=3"> 7<img src="http://placehold.jp/150x150.png?text=3" class="main"> 8</div>

投稿2017/09/12 04:29

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2017/09/12 04:38

あー、ポインタが離れても戻さないんですね。じゃあCSSだけだとダメだな……
hidepon

2017/09/12 04:44

スミマセン。クリックイベントも追記しました。上のコードに追加します。
hidepon

2017/09/12 04:50

質問部分に追記したコードのカタチでは難しいですかね!?とてもシンプルで古いタイプのギャラリーなんですが・・・
hidepon

2017/09/12 08:42

CSSで対応する方向性でやってみています。ご教授頂ければ幸いです。
Lhankor_Mhy

2017/09/12 11:34

CSSは状態を保持できないので、zoom.js と相性悪いと思います。 すみません、質問を読み違えて混乱させてしまいましたね。申し訳ない。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問