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

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

新規登録して質問してみよう
ただいま回答率
85.50%
スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

JavaScript

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

jQuery

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

Q&A

解決済

1回答

5638閲覧

スライダーをポップアップで表示をさせたいです

sor

総合スコア17

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2017/10/10 09:35

編集2017/10/11 04:13

###前提・実現したいこと
ボタンを押したらlightboxのようにコンテンツがポップアップし、
更に画像がスライドできるようにしたいです。

スライダーの「Swiper」をモーダルウィンドウで表示させれば可能なのではと思い、
下記のサイト様を参考にしながらなんとか合体させたのですが、
狙い通り表示される時もあれば、何回か更新したり画面幅を変更したりすると
画像が大きくなったり消えたりと挙動が安定しません。

試行錯誤しながら合体させたので無理矢理になってしまっていると思うのですが、
どの部分の所為で不安定になっているか原因が分からず困っています。
どうかご教示いただけないでしょうか。
不明確な点などありましたらご指摘ください。

◆参考にさせていただいたサイト様
https://www.willstyle.co.jp/blog/724/
https://www.tam-tam.co.jp/tipsnote/html_css/post8031.html

◆望んでいる挙動
・ボタン(画像)をクリックするとポップアップでスライダーが表示
・画像が小さい正方形のため、前後の画像も画面内に表示
・スライダー部分以外は黒の半透明で、その部分をクリックするとスライダーが非表示
・画面幅が変わっても対応できるようレスポンシブに
※ボタンとスライダーのセットは1ページ内に複数設置します。
※スライダーからのリンクはありません。

###発生している問題・エラーメッセージ

何回か更新や画面幅を変えた時に表示が崩れ、画像が大きくなったり消えたりと挙動が安定しません。
(正しく表示される時もあります)

###該当のソースコード

html

1<p class="swiper-btn"><img src="btn.jpg" alt=""></p> 2<div class="swiper"> 3<div class="swiper-container"> 4 <div class="swiper-wrapper"> 5 <div class="swiper-slide"><img src="img1.jpg" alt=""></div> 6 <div class="swiper-slide"><img src="img2.jpg" alt=""></div> 7 <div class="swiper-slide"><img src="img3.jpg" alt=""></div> 8 </div> 9 <div class="swiper-pagination"></div> 10</div> 11</div>

css

1https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css 2と下記のコード 3 4.swiper-container .swiper-slide img{ max-width: 100%; height: auto; } 5.swiper-container{ position:fixed; top:50%; left:0; z-index:2; } 6#modal-bg{ width:100%; height:100%; background-color: rgba(0,0,0,0.5); position:fixed; top:0; left:0; z-index: 1; display:block; }

js

1◆モーダルウィンドウ用(head内) 2$(function(){ 3 $(".swiper").hide(); 4 5 $(".swiper-btn").click(function(){ 6 $(this).next().show(); 7 $("body").append('<div id="modal-bg"></div>'); 8 9 var h = $(this).next().find(".swiper-container").height(); 10 $(".swiper-container").css({ "margin-top": "-" + h/2 + "px" }); 11 12 $(".swiper,#modal-bg").click(function(){ 13 $(".swiper,#modal-bg").hide(0 ,function(){ 14 $('#modal-bg').remove() ; 15 }); 16 }); 17 }); 18}); 19 20◆swiperオプション用(bodyのすぐ上) 21var mySwiper = new Swiper ('.swiper-container', { 22 loop: true, 23 slidesPerView: 4, 24 spaceBetween: 10, 25 centeredSlides : true, 26 pagination: '.swiper-pagination', 27 breakpoints: { 28 767: { 29 slidesPerView: 2, 30 spaceBetween: 5 31 } 32 } 33})

###補足情報(言語/FW/ツール等のバージョンなど)
jquery(min):2.0.2
swiper(min):3.4.1

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

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

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

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

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

guest

回答1

0

ベストアンサー

lightGallery とかなら似た挙動になりそうなのですが、どうでしょう。

【lightGallery】
http://sachinchoolur.github.io/lightGallery/

【lightGallery: thumbnails】
http://sachinchoolur.github.io/lightGallery/demos/index.html

【lightGallery: Dynamic】
http://sachinchoolur.github.io/lightGallery/demos/dynamic.html

投稿2017/10/10 15:23

kei344

総合スコア69366

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

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

sor

2017/10/11 02:45

kei344さん新しいプラグインのご提示ありがとうございます! 早速デモを確認したところ表示のさせ方は理想でした。 まだ触ってみている途中ですが、 ・リンク前のボタンはサムネの羅列ではなくボタン一つ ・前後の画像も画面無いに少し表示(小さめの画像で正方形のため)  (.lg-outer .lg-image{ max-height:50%; }と追加で設定してみました) ・ページ内に複数設置 の課題で詰まってしまっています。 自分でも調べているのですが、オプションなどで解決できそうであればお教えいただけますでしょうか。
sor

2017/10/11 02:59 編集

あ、補足です! ご提示いただいていた「Dynamic Mode」の方が挙動が近いのですが、 更新者が私ではなく全くjsを知らない人のため、可能な限り簡単な記述で更新が出来るよう、 「thumbnails」をベースに課題がクリアできればと考えています。。
kei344

2017/10/12 04:28

> ・前後の画像も画面無いに少し表示(小さめの画像で正方形のため) これをクリアするのは難しいと思いますので、このライブラリはやめておいたほうがよいですね。 > 可能な限り簡単な記述で更新が出来るよう これがCMS内なのか手書きのHTMLなのかにも寄りますが、隠し要素内に画像URLを並べてもらうようにして、それをロード時にJavaScriptから読み込んでしまえばできるとは思います。
sor

2017/10/17 07:21

わあすみません!お返事いただいていたことに気付かず、中々実現出来ないと心が折れそうになっていたところでした。 前後を画面内に入れるのはご紹介いただいたものでは難しいのですね。。 手書きのHTMLですが、なるほど「Dynamic Mode」の方でも少し記述を変更すれば簡単に更新できるようになるのですね。 仕様の変更も視野に入れつつ、勉強していきたいと思います。 ご回答いただきありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問