簡単な画像ギャラリーを作成してズーム機能を付与しようとしています。
主画像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>
としましたが、マウスを乗せると主画像の下に配置したサムネイル画像の領域にまで影響をしてしまいます。
この主画像の枠の範囲で拡大が出来ないでしょうか?
回答3件
あなたの回答
tips
プレビュー