Q&Aこんばんは、
解決したいことは無限スクロールしている画像に新たに、lightbox機能を付けてズームインして画像拡大をしたいのですがどうすればできるかという事です。
ひょっとしたらタグ自体を記述方法を変えなければできない気がします。
HTMLの方だけでできるような気はしますが、解りません。
ご教示お願いします。
コー<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 21.0.5.0 for Windows"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/lightbox.css"> <script src="js/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script> <script type="text/javascirpt" src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script type="text/javascript" src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script> <script type="text/javascript" src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script> $(function(){ //-------------------------------------// // init Masonry var $grid = $('.grid').masonry({ itemSelector: 'none', // select none at first columnWidth: '.grid__col-sizer', gutter: '.grid__gutter-sizer', percentPosition: true, stagger: 30, // nicer reveal transition visibleStyle: { transform: 'translateY(0)', opacity: 1 }, hiddenStyle: { transform: 'translateY(100px)', opacity: 0 }, }); // get Masonry instance var msnry = $grid.data('masonry'); // initial items reveal $grid.imagesLoaded( function() { $grid.removeClass('are-images-unloaded'); $grid.masonry( 'option', { itemSelector: '.grid__item' }); var $items = $grid.find('.grid__item'); $grid.masonry( 'appended', $items ); }); //-------------------------------------// // hack CodePen to load pens as pages var nextPenSlugs = [ '202252c2f5f192688dada252913ccf13', 'a308f05af22690139e9a2bc655bfe3ee', '6c9ff23039157ee37b3ab982245eef28', ]; function getPenPath() { var slug = nextPenSlugs[ this.loadCount ]; if ( slug ) { return 'https://s.codepen.io/desandro/debug/' + slug; } } //-------------------------------------// // init Infinte Scroll $grid.infiniteScroll({ path: getPenPath, append: '.grid__item', outlayer: msnry, status: '.page-load-status', }); }); </script> <title></title> </head> <body> <h1>Infinite Scroll - Masonry image grid</h1> <div class="grid are-images-loaded"> <div class="grid__col-sizer"></div> <div class="grid__gutter-sizer"></div> <div class="grid__item"></div> <div class="grid__item"></div> <div class="grid__item"><a href="img/a.png" data-lightbox="sample" data-title="サンプル画像01">クリック</a></div> <div class="grid__item"><a href="img/a.png" data-lightbox="sample" data-title="サンプル画像01">クリック</a></div> <div class="grid__item"><a href="img/a.png" data-lightbox="sample" data-title="サンプル画像01">クリック</a></div> <div class="grid__item"><a href="img/a.png" data-lightbox="sample" data-title="サンプル画像01">クリック</a></div> <div class="grid__item"><img src="img/f.png" alt="" width="300" height="400"></div> <div class="grid__item"><img src="images/img1.jpg" alt="" width="300" height="300"></div> <div class="grid__item"><img src="images/img3.jpg" alt="" width="300" height="320"></div> <div class="grid__item"><img src="images/img2.jpg" alt="" width="300" height="360"></div> <div class="grid__item"><img src="images/img5.jpg" alt="" width="300" height="380"></div> <div class="grid__item"><img src="images/img4.jpg" alt="" width="300" height="340"></div> <div class="grid__item"><img src="images/img6.jpg" alt="" width="300" height="400"></div> <div class="page-load-status"></div> <div class="loader-ellips infinite-scroll-request"><span class="loader-ellips__dot"></span><span class="loader-ellips__dot"></span><span class="loader-ellips__dot"></span><span class="loader-ellips__dot"></span></div> <p class="infinite-scroll-last">End of content</p> <p class="infinite-scroll-error">No more pages to load</p> </div> <script src="js/lightbox.js"></script> </body> </html>ド
の
<div class="grid__item"><a href="img/a.png" data-lightbox="sample" data-title="サンプル画像01">クリック</a></div>
ここに画像表示タグを挟んで記述したのですが、別々になってちゃんとに表示されません。
よろしくお願いします
回答1件
0
自己解決
解決しました。
<a href="img/a.png" rel="lightbox"><img src="img/a.png" alt="…" ></a>コード
これをdivの中に記述したらできました。
投稿2020/03/31 10:29
総合スコア6
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。