templates/extended-lightbox.html.twig line 1

Open in your IDE?
  1. {{ include('partials/main.html.twig') }}
  3.     <head>
  4.         
  5.         {{ include('partials/title-meta.html.twig', {title: 'Lightbox'}) }}
  7.         <!-- glightbox css -->
  8.         <link rel="stylesheet" href="/libs/glightbox/dist/css/glightbox.min.css">
  10.         {{ include('partials/head-css.html.twig') }}
  12.     </head>
  14.     {{ include('partials/body.html.twig') }}
  16.         <!-- Begin page -->
  17.         <div id="layout-wrapper">
  19.             {{ include('partials/menu.html.twig') }}
  21.             <!-- ============================================================== -->
  22.             <!-- Start right Content here -->
  23.             <!-- ============================================================== -->
  24.             <div class="main-content">
  26.                 <div class="page-content">
  27.                     <div class="container-fluid">
  29.                         {{ include('partials/page-title.html.twig', {pagetitle: 'Extended', title: 'Lightbox'}) }}
  30.                         
  31.                         <div class="row">
  32.                             <div class="col-lg-12">
  33.                                 <div class="card">
  34.                                     <div class="card-header">
  35.                                         <h5 class="card-title">Single Image Lightbox</h5>
  36.                                         <p class="card-title-desc">Glightbox Single Image Lightbox Example</p>
  37.                                     </div>
  38.                                     <div class="card-body">
  39.                                         <div class="row">
  40.                                             <div class="col-lg-3 col-sm-6">
  41.                                                 <div class="mt-4">
  42.                                                     <a href="/images/small/img-1.jpg" class="image-popup">
  43.                                                         <img src="/images/small/img-1.jpg" class="img-fluid" alt="work-thumbnail">
  44.                                                     </a>
  45.                                                 </div>
  46.                                             </div>
  48.                                             <div class="col-lg-3 col-sm-6">
  49.                                                 <div class="mt-4">
  50.                                                     <a href="/images/small/img-2.jpg" class="image-popup">
  51.                                                         <img src="/images/small/img-2.jpg" class="img-fluid" alt="work-thumbnail">
  52.                                                     </a>
  53.                                                 </div>
  54.                                             </div>
  55.                                         </div>
  56.                                     </div>
  57.                                     <!-- end card body -->
  58.                                 </div>
  59.                                 <!-- end card -->
  60.                             </div>
  61.                             <!-- end col -->
  62.                         </div>
  63.                         <!-- end row -->
  66.                         <div class="row">
  67.                             <div class="col-lg-6">
  68.                                 <div class="card">
  69.                                     <div class="card-header">
  70.                                         <h5 class="card-title">Images with Description</h5>
  71.                                         <p class="card-title-desc">Glightbox Images with Description Example</p>
  72.                                     </div>
  73.                                     <div class="card-body">
  74.                                         <div class="row">
  75.                                             <div class="col-lg-3 col-sm-6">
  76.                                                 <div class="mt-4">
  77.                                                     <a href="/images/small/img-4.jpg" class="image-popup-desc" data-title="Project 01" data-description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit">
  78.                                                         <img src="/images/small/img-4.jpg" class="img-fluid" alt="work-thumbnail">
  79.                                                     </a>
  80.                                                 </div>
  81.                                             </div>
  83.                                             <div class="col-lg-3 col-sm-6">
  84.                                                 <div class="mt-4">
  85.                                                     <a href="/images/small/img-5.jpg" class="image-popup-desc" data-title="Project 02" data-description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit">
  86.                                                         <img src="/images/small/img-5.jpg" class="img-fluid" alt="work-thumbnail">
  87.                                                     </a>
  88.                                                 </div>
  89.                                             </div>
  90.                                             <div class="col-lg-3 col-sm-6">
  91.                                                 <div class="mt-4">
  92.                                                     <a href="/images/small/img-1.jpg" class="image-popup-desc" data-title="Project 03" data-description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit">
  93.                                                         <img src="/images/small/img-1.jpg" class="img-fluid" alt="work-thumbnail">
  94.                                                     </a>
  95.                                                 </div>
  96.                                             </div>
  97.                                         </div>
  98.                                     </div>
  99.                                     <!-- end card body -->
  100.                                 </div>
  101.                                 <!-- end card -->
  102.                             </div>
  103.                             <!-- end col -->
  105.                             <div class="col-lg-6">
  106.                                 <div class="card">
  107.                                     <div class="card-header">
  108.                                         <h5 class="card-title">Popup with Video or Map</h5>
  109.                                         <p class="card-title-desc">Glightbox Popup with Video or Map Example</p>
  110.                                     </div>
  111.                                     <div class="card-body">
  112.                                         <div class="d-flex align-items-start gap-3 flex">
  113.                                             <a href="https://www.youtube.com/watch?v=0O2aH4XLbto" class="btn btn-light image-popup-video-map" data-title="YouTube Video" data-description="YouTube Video Popup">
  114.                                                 Open YouTube Video
  115.                                             </a>
  117.                                             <a href="https://vimeo.com/45830194" class="btn btn-light image-popup-video-map" data-title="Vimeo Video" data-description="Vimeo Video Popup">
  118.                                                 Open Vimeo Video
  119.                                             </a>
  120.                                         </div>
  121.                                     </div>
  122.                                     <!-- end card body -->
  123.                                 </div>
  124.                                 <!-- end card -->
  125.                             </div>
  126.                             <!-- end col -->
  127.                         </div>
  128.                         <!-- end row -->
  129.                     </div> <!-- container-fluid -->
  130.                 </div>
  131.                 <!-- End Page-content -->
  133.                 
  134.                 {{ include('partials/footer.html.twig') }}
  135.             </div>
  136.             <!-- end main content-->
  138.         </div>
  139.         <!-- END layout-wrapper -->
  141.         {{ include('partials/right-sidebar.html.twig') }}
  143.         {{ include('partials/vendor-scripts.html.twig') }}
  145.         <!-- glightbox js -->
  146.         <script src="/libs/glightbox/dist/js/glightbox.min.js"></script>
  148.         <!-- lightbox init -->
  149.         <script src="/js/pages/lightbox.init.js"></script>
  151.         <script src="/js/app.js"></script>
  152.     </body>
  153. </html>