Home Explore Help
Register Sign In
sunsicong
/
My
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: 88359c160f
Branches Tags
My
/
20250801
/
fancybox-project
/
index2.html

index2.html 2.2 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 
  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.     <meta charset="utf-8" />
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
    6. 

  6.     <title>Fancybox demo</title>
    7. 

  7.     <link href="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet">
    8. 

  8. </head>
    9. 

  9. <body>
    10. 

  10. <a class="venoimg" href="https://swiperjs.com/demos/images/nature-1.jpg" data-fancybox="gallery">
    11. 

  11.     <img width="100" class="img-fluid" src="https://swiperjs.com/demos/images/nature-1.jpg" alt="" srcset="">
    12. 

  12. </a>
    13. 

  13. <a class="venoimg" href="https://swiperjs.com/demos/images/nature-2.jpg" data-fancybox="gallery">
    14. 

  14.     <img width="100" class="img-fluid" src="https://swiperjs.com/demos/images/nature-2.jpg" alt="" srcset="">
    15. 

  15. </a>
    16. 

  16. <a class="venoimg" href="https://swiperjs.com/demos/images/nature-3.jpg" data-fancybox="gallery">
    17. 

  17.     <img width="100" class="img-fluid" src="https://swiperjs.com/demos/images/nature-3.jpg" alt="" srcset="">
    18. 

  18. </a>
    19. 

  19. <a class="venoimg" href="https://swiperjs.com/demos/images/nature-4.jpg" data-fancybox="gallery">
    20. 

  20.     <img width="100" class="img-fluid" src="https://swiperjs.com/demos/images/nature-4.jpg" alt="" srcset="">
    21. 

  21. </a>
    22. 

  22. <a class="venoimg" href="https://swiperjs.com/demos/images/nature-5.jpg" data-fancybox="gallery">
    23. 

  23.     <img width="100" class="img-fluid" src="https://swiperjs.com/demos/images/nature-5.jpg" alt="" srcset="">
    24. 

  24. </a>
    25. 

  25. <a class="venoimg" href="https://swiperjs.com/demos/images/nature-6.jpg" data-fancybox="gallery">
    26. 

  26.     <img width="100" class="img-fluid" src="https://swiperjs.com/demos/images/nature-6.jpg" alt="" srcset="">
    27. 

  27. </a>
    28. 

  28. <a class="venoimg" href="https://swiperjs.com/demos/images/nature-7.jpg" data-fancybox="gallery">
    29. 

  29.     <img width="100" class="img-fluid" src="https://swiperjs.com/demos/images/nature-7.jpg" alt="" srcset="">
    30. 

  30. </a>
    31. 

  31. <a class="venoimg" href="https://swiperjs.com/demos/images/nature-8.jpg" data-fancybox="gallery">
    32. 

  32.     <img width="100" class="img-fluid" src="https://swiperjs.com/demos/images/nature-8.jpg" alt="" srcset="">
    33. 

  33. </a>
    34. 

  34. 

  35. 

  36. 

  37. 

  38. 

  39. 

  40. 

  41. 

  42. 

  43. 

  44. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    45. 

  45. <script src="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
    46. 

  46. <script>
    47. 

  47.     // console.log(Fancybox);
    48. 

  48.     Fancybox.bind("[data-fancybox]");
    49. 

  49. </script>
    50. 

  50. </body>
    51. 

  51. </html>
    52.