現在、下記URLサイトを真似てサムネイルでページ内のメイン画像が切り替わり
そこにlightboxを併せてメイン画像をポップアップ表示させています。
https://www.imamura.biz/blog/26772
しかし、ユーザー様よりポップアップ画面で前後の写真に切り替えたいとの要望を受け行き詰っています。
何かいいプラグインや方法などがありましたらご教授ください。
よろしくお願いいたします。
Javascript
1 <!-- ChangePhoto --> 2 $(function(){ 3 $("img.ChangePhoto").click(function(){ 4 var ImgSrc = $(this).attr("src"); 5 var ImgAlt = $(this).attr("alt"); 6 $("img#MainPhoto").attr({src:ImgSrc,alt:ImgAlt}); 7 $("img#MainPhoto").hide(); 8 $("img#MainPhoto").fadeIn("slow"); 9 return false; 10 }); 11 }); 12 13 $(function() { 14 $('.sumnail img').on('click', function() { 15 var tag = $(this).attr("src"); 16 var title = $(this).attr("alt"); 17 $('.p_img a').attr("href",tag); 18 $('.p_img a').attr("data-title",title); 19 }); 20 }); 21 <!-- End ChangePhoto Code -->
HTML
1<div class="p_img"> 2 <p> 3 <a href="./img/01.jpg" data-lightbox="img" data-title="sample"> 4 <img src="./img/01.jpg" alt="" id="MainPhoto"></a> 5 </p> 6 7<ul class="sumnail_list"> 8 <li class="sumnail"><img src="./img/01.jpg" alt="sample" class="ChangePhoto"></li> 9 <li class="sumnail"><img src="./img/02.jpg" alt="sample2" class="ChangePhoto"></li> 10 <li class="sumnail"><img src="./img/03.jpg" alt="sample3" class="ChangePhoto"></li> 11</ul>
css
1div.press_img { 2 margin: 0 auto; 3 padding: 0 0 2em; 4} 5 6div.press_img p { 7 text-align: center; 8} 9 10div.press_img p img { 11 width: 60%; 12 border-radius: 2px; 13} 14 15ul.sumnail_list { 16 display: flex; 17 flex-flow: row wrap; 18 justify-content: flex-start; 19 align-items: baseline; 20 padding: 1em 0 2em; 21} 22 23ul.sumnail_list li { 24 width: 16.66667%; 25 padding: 0.5em 0; 26 text-align: center; 27 line-height: 1.3em; 28 font-size: 12px; 29} 30 31ul.sumnail_list li img { 32 width: 90%; 33 border-radius: 2px; 34}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/29 01:26