lightboxは同一画面上に画像を上乗せ表示する。
次の例は、lightboxを使って画像を表示する。個別画像は１画像ごとに表示、グループ化するとlightboxで前後の画像を選択可能。
[組み込み] <head> <script src="https://shiba-sub2.sakuraweb.com/js/jquery.min.js"></script> <script src="https://shiba-sub2.sakuraweb.com/js/lightbox.min.js"></script> <link href="https://shiba-sub2.sakuraweb.com/css/lightbox.css" rel="stylesheet"> </head> [HTML] <p>個別画像</p> <div> <a href="https://shiba-sub.sakuraweb.com/wp-content/uploads/img2/pic/image-1.jpg" rel="lightbox"><img src="https://shiba-sub.sakuraweb.com/wp-content/uploads/img2/pic/thumb-1.jpg" alt="" width="130" /></a> <a href="https://shiba-sub.sakuraweb.com/wp-content/uploads/img2/pic/image-2.jpg" rel="lightbox"><img src="https://shiba-sub.sakuraweb.com/wp-content/uploads/img2/pic/thumb-2.jpg" alt="" width="130" /></a> </div> <p>画像をグループ化にしたい場合は「rel="lightbox[plants]"」と記述していく事で、「rel="lightbox[plants]"」がついた画像達がプレビューされていく。</p> <div> <a href="https://shiba-sub.sakuraweb.com/wp-content/uploads/img2/pic/image-3.jpg" rel="lightbox[plants]" title="左右のクリックで移動します。"><img src="https://shiba-sub.sakuraweb.com/wp-content/uploads/img2/pic/thumb-3.jpg" alt="" width="130" /></a> <a href="https://shiba-sub.sakuraweb.com/wp-content/uploads/img2/pic/image-4.jpg" rel="lightbox[plants]" title="左右のクリックで移動します。"><img src="https://shiba-sub.sakuraweb.com/wp-content/uploads/img2/pic/thumb-4.jpg" alt="" width="130" /></a> <a href="https://shiba-sub.sakuraweb.com/wp-content/uploads/img2/pic/image-5.jpg" rel="lightbox[plants]" title="左右のクリックで移動します。"><img src="https://shiba-sub.sakuraweb.com/wp-content/uploads/img2/pic/thumb-5.jpg" alt="" width="130" /></a> <a href="https://shiba-sub.sakuraweb.com/wp-content/uploads/img2/pic/image-6.jpg" rel="lightbox[plants]" title="左右のクリックで移動します。"><img src="https://shiba-sub.sakuraweb.com/wp-content/uploads/img2/pic/thumb-6.jpg" alt="" width="130" /></a> <a href="https://shiba-sub.sakuraweb.com/wp-content/uploads/media/Sample07.jpg" rel="lightbox[plants]" title="左右のクリックで移動します。"><img src="https://shiba-sub.sakuraweb.com/wp-content/uploads/media/Sample07.jpg" alt="" width="130" /></a> </div>
個別画像
画像をグループ化にしたい場合は「rel="lightbox[グループID]"」と記述する。次の例は「rel="lightbox[plants]"」がついた画像がグループ化されプレビューされていく。
