From 586c11b3073f4f95610f4baa9b7e992d93261071 Mon Sep 17 00:00:00 2001 From: ANTO SAGAYA JUSTIN R <7411-justinmass2001@users.noreply.git.selfmade.ninja> Date: Fri, 7 Mar 2025 15:55:47 +0000 Subject: [PATCH] update template --- myproject/template/helloworld.html | 53 +++++++++++++++++++----------- 1 file changed, 34 insertions(+), 19 deletions(-) diff --git a/myproject/template/helloworld.html b/myproject/template/helloworld.html index 297123d..5bf2455 100644 --- a/myproject/template/helloworld.html +++ b/myproject/template/helloworld.html @@ -5,27 +5,42 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.7/viewer.css" integrity="sha512-9NawOLzuLE2GD22PJ6IPWXEjPalb/FpdH1qMpgXdaDM+0OfxEV75ZCle6KhZi0vM6ZWvMrNnIZv6YnsL+keVmA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> + <style> + img { + width: 200px; + height: 200px; + } + </style> </head> <body> - <div class="container"> - <!-- Content here --> - </div> - <!-- a block container is required --> - <div> - <ul id="images"> - <li><img src="https://th.bing.com/th?id=OIP.HJ5ua1rls3w8hZFfAjHq3gHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="Picture 1"></li> <br> - <li><img src="https://th.bing.com/th?id=OIP.WfTgiK46WsBkoTZgjetSIwHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="Picture 2"></li> <br> - <li><img src="https://th.bing.com/th?id=OIP.dY3kN93bzJJHiHqjj9K9twHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="Picture 3"></li> - </ul> - </div> - <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> - <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> - <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script> - <script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.7/viewer.min.js" integrity="sha512-lZD0JiwhtP4UkFD1mc96NiTZ14L7MjyX5Khk8PMxJszXMLvu7kjq1sp4bb0tcL6MY+/4sIuiUxubOqoueHrW4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> - <script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.7/viewer.common.js" integrity="sha512-LlQl0sFUcI1vIDM7mJLlc6a8ED/7OodBOExKGh93wuOhftpuR+LqrihUhDERtnX526QoQqqKWxg6BpMjEibyMw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> + <div class="container"> + <ul id="images"> + <li><img src="https://th.bing.com/th/id/OIP.d7XoYXNNdLcexb9E1xehCAHaEK?w=278&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="Picture 1"></li> <br> + <li><img src="https://th.bing.com/th/id/OIP.TldVfnF-trAnn4FNSJ42RAHaEK?w=324&h=182&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="Picture 1"></li> <br> + <li><img src="https://th.bing.com/th/id/OIP.ysjV0sgOseoA-KELS-qr_AHaEK?w=320&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="Picture 1"></li> + </ul> + </div> - <style> - - </style> + <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> + <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> + <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.7/viewer.min.js" integrity="sha512-lZD0JiwhtP4UkFD1mc96NiTZ14L7MjyX5Khk8PMxJszXMLvu7kjq1sp4bb0tcL6MY+/4sIuiUxubOqoueHrW4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.7/viewer.common.js" integrity="sha512-LlQl0sFUcI1vIDM7mJLlc6a8ED/7OodBOExKGh93wuOhftpuR+LqrihUhDERtnX526QoQqqKWxg6BpMjEibyMw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> + <script> + // View an image. + const viewer = new Viewer(document.getElementById('images'), { + inline: true, + viewed() { + viewer.zoomTo(1); + }, + }); + // Then, show the image by clicking it, or call `viewer.show()`. + + // View a list of images. + // Note: All images within the container will be found by calling `element.querySelectorAll('img')`. + const gallery = new Viewer(document.getElementById('images')); + // Then, show one image by click it, or call `gallery.show()`. + </script> </body> </html> \ No newline at end of file -- GitLab