²é¿´/±à¼ ´úÂë
ÄÚÈÝ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Test</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/venobox/1.9.3/venobox.min.css" integrity="sha512-e+0yqAgUQFoRrJ4pZigQXpOE0S7J9IGwmgH801h4H5ODqOCG8/GRfXHQ+9ab754NL79O7wDwdjwY3CcU8sEANg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <h1>VenoBox</h1> <a href="https://veno.es/venobox/">Veno box</a> <p>Single image</p> <a class="venobox" href="https://ik.imagekit.io/demo/img/image5.jpeg"><img src="https://ik.imagekit.io/demo/img/image5.jpeg" width="500" height="300" alt="image alt"/></a> <hr> <p>Image sets</p> <a class="venobox" data-gall="myGallery" href="https://ik.imagekit.io/demo/img/image5.jpeg"><img src="https://ik.imagekit.io/demo/img/image5.jpeg" width="500" height="300"/></a> <a class="venobox" data-gall="myGallery" href="https://ik.imagekit.io/demo/img/image5.jpeg"><img src="https://ik.imagekit.io/demo/img/image5.jpeg" width="500" height="300"/></a> <a class="venobox" data-gall="myGallery" href="https://ik.imagekit.io/demo/img/image5.jpeg"><img src="https://ik.imagekit.io/demo/img/image5.jpeg" width="500" height="300"/></a> <a class="venobox" data-gall="myGallery" href="https://ik.imagekit.io/demo/img/image5.jpeg"><img src="https://ik.imagekit.io/demo/img/image5.jpeg" width="500" height="300"/></a> <a class="venobox" data-gall="myGallery" href="https://ik.imagekit.io/demo/img/image6.jpeg"><img src="https://ik.imagekit.io/demo/img/image6.jpeg" width="500" height="300"/></a> <a class="venobox" data-gall="myGallery" href="https://ik.imagekit.io/demo/img/image6.jpeg"><img src="https://ik.imagekit.io/demo/img/image6.jpeg" width="500" height="300"/></a> <a class="venobox" data-gall="myGallery" href="https://ik.imagekit.io/demo/img/image6.jpeg"><img src="https://ik.imagekit.io/demo/img/image6.jpeg" width="500" height="300"/></a> <a class="venobox" data-gall="myGallery" href="https://ik.imagekit.io/demo/img/image6.jpeg"><img src="https://ik.imagekit.io/demo/img/image6.jpeg" width="500" height="300"/></a> <a class="venobox" data-gall="myGallery" href="https://ik.imagekit.io/demo/img/image6.jpeg"><img src="https://ik.imagekit.io/demo/img/image6.jpeg" width="500" height="300"/></a> <a class="venobox" data-gall="myGallery" href="https://ik.imagekit.io/demo/img/image7.jpeg"><img src="https://ik.imagekit.io/demo/img/image7.jpeg" width="500" height="300"/></a> <a class="venobox" data-gall="myGallery" href="https://ik.imagekit.io/demo/img/image7.jpeg"><img src="https://ik.imagekit.io/demo/img/image7.jpeg" width="500" height="300"/></a> <a class="venobox" data-gall="myGallery" href="https://ik.imagekit.io/demo/img/image7.jpeg"><img src="https://ik.imagekit.io/demo/img/image7.jpeg" width="500" height="300"/></a> <a class="venobox" data-gall="myGallery" href="https://ik.imagekit.io/demo/img/image7.jpeg"><img src="https://ik.imagekit.io/demo/img/image7.jpeg" width="500" height="300"/></a> <a class="venobox" data-gall="myGallery" href="https://ik.imagekit.io/demo/img/image7.jpeg"><img src="https://ik.imagekit.io/demo/img/image7.jpeg" width="500" height="300"/></a> <a class="venobox" data-gall="myGallery" href="https://ik.imagekit.io/demo/img/image7.jpeg"><img src="https://ik.imagekit.io/demo/img/image7.jpeg" width="500" height="300"/></a> <a class="venobox" data-gall="myGallery" href="https://ik.imagekit.io/demo/img/image6.jpeg"><img src="https://ik.imagekit.io/demo/img/image6.jpeg" width="500" height="300"/></a> {{-- <a class="venobox_custom" data-type="iframe" href="http://www.veno.it">open iFrame</a> --}} <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/venobox/1.9.3/venobox.min.js" integrity="sha512-zBTnX97k269iewUwROiWwO82A6uXO4lcjq0Z4xnvO+qAblC/RMQRUu8fQVKtSFhPNKD5Xzh9PMoZG7+LnmH1Hg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> $(document).ready(function(){ /* default settings */ $('.venobox').venobox(); /* open content with custom settings */ // $('.venobox_custom').venobox({ // framewidth: '300px', // frameheight: '250px', // border: '6px', // bordercolor: '#ba7c36', // numeratio: true // }); /* auto-open #firstlink on page load */ $("#firstlink").venobox().trigger('click'); }); </script> </body> </html>