いつもこちらでお世話になっています。jQueryを勉強中です。
今回も皆様のアドバイスをお願いいたします。
現在、lightboxを使ってフォトギャラリーを作成しています。
今後のサイト更新を楽にするため、<p>の値を取得して、<a data-title="">と<img alt="">に挿入していきたいです。
尚、lightboxはグループ化しておりプレビュー表示の際に前後の写真へスライドします。
過去にこちらでいただいたアドバイスを元に下記コードを試してみましたが
【写真3】をプレビュー表示した際、前後のスライドも【写真3】になります。
順番通りに取得するにはどのようにしたらいいのでしょうか?
ご教示のほどよろしくお願いいたします。
html
1<div class="thumb_area"> 2 <div class="thumbnail"><!-- Start --> 3 <a href="./img/03.jpg" data-lightbox="group" data-title=""> 4 <img src="./img/03.jpg" alt=""> 5 </a> 6 <p>写真3の説明が入ります。</p> 7 </div><!-- End --> 8 <div class="thumbnail"><!-- Start --> 9 <a href="./img/02.jpg" data-lightbox="group" data-title=""> 10 <img src="./img/02.jpg" alt=""> 11 </a> 12 <p>写真1の説明が入ります。</p> 13 </div><!-- End --> 14 <div class="thumbnail"><!-- Start --> 15 <a href="./img/01.jpg" data-lightbox="group" data-title=""> 16 <img src="./img/01.jpg" alt=""> 17 </a> 18 <p>写真1の説明が入ります。</p> 19 </div><!-- End --> 20</div>
jQuery
1//pを取得して、".thumbnail img" のaltに挿入 2$(function() { 3 $('.thumbnail p').each(function(index, element) { 4 const target = $(element); 5 target.parent().find('img').prop('alt', target.html()); 6 }); 7}); 8 9//".thumbnail img" のsrc及びaltを取得して、".thumbnail a" のhrefとdata-titleに挿入 10$(function() { 11 $('.thumbnail img').on('click', function() { 12 var tag = $(this).attr("src"); 13 var title = $(this).attr("alt"); 14 $('.thumbnail a').attr("href",tag); 15 $('.thumbnail a').attr("data-title",title); 16 }); 17});
回答2件
あなたの回答
tips
プレビュー