Ghostbytes
Gallery (Lightbox)
JavaScript based lightbox component for presenting various types of media.
Gallery component relies on 3rd party plugin. Make sure to link to Light Gallery css and js files in your document: assets/vendor/lightgallery/css/lightgallery-bundle.min.css and assets/vendor/lightgallery/lightgallery.min.js. If you need extra features like zooming, fullscreen view or video you need to include additional plugins:
- assets/vendor/lightgallery/plugins/fullscreen/lg-fullscreen.min.js
- assets/vendor/lightgallery/plugins/zoom/lg-zoom.min.js
- assets/vendor/lightgallery/plugins/video/lg-video.min.js
- assets/vendor/lightgallery/plugins/thumbnail/lg-thumbnail.min.js
For Carousel example you will need Swiper plugin css and js linked to your document: assets/vendor/swiper/swiper-bundle.min.css and assets/vendor/swiper/swiper-bundle.min.js.
Use this page as a reference.
Media: Image
<!-- Image gallery -->
<div class="gallery">
<a href="assets/img/portfolio/courses/08.jpg" class="gallery-item rounded-3" data-sub-html='<h6 class="text-light">Gallery image caption</h6>'>
<img src="assets/img/portfolio/courses/08.jpg" alt="Gallery thumbnail">
<div class="gallery-item-caption fs-sm fw-medium">Gallery image caption</div>
</a>
</div>Media: Video
<!-- Video gallery -->
<div class="gallery" data-video="true">
<a href="https://www.youtube.com/watch?v=8KaJRw-rfn8" class="gallery-item video-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery video caption</h6>'>
<img src="assets/img/portfolio/courses/01.jpg" alt="Gallery thumbnail">
<div class="gallery-item-caption fs-sm fw-medium">Gallery video caption</div>
</a>
</div>Media: Iframe (Google map)
<!-- Iframe (Google map) -->
<div class="gallery">
<a href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.91476818218!2d-74.11976253858133!3d40.69740344296443!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sua!4v1568574342685!5m2!1sen!2sua" data-iframe="true" class="gallery-item rounded-2" data-sub-html='<h6 class="fs-sm text-light">Google map embed</h6>'>
<img src="assets/img/portfolio/courses/map.jpg" alt="Gallery thumbnail">
<div class="gallery-item-caption fs-sm fw-medium">Google map embed</div>
</a>
</div>Permanent hover state
<!-- Permanent hover state -->
<div class="gallery" data-video="true">
<a href="https://www.youtube.com/watch?v=zPo5ZaH6sW8" class="gallery-item video-item is-hovered rounded-3" data-sub-html='<h6 class="fs-sm text-light">Ghostbytes Inc. Showreel by Marvin McKinney</h6>'>
<img src="assets/img/about/gallery/01.jpg" alt="Gallery thumbnail">
<div class="gallery-item-caption p-4">
<h4 class="text-light mb-1">Ghostbytes Inc.</h4>
<p class="mb-0">Showreel by Marvin McKinney</p>
</div>
</a>
</div>Grid with gutters
<!-- Gallery grid with gutters -->
<div class="gallery row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4" data-video="true">
<!-- Item -->
<div class="col">
<a href="assets/img/portfolio/courses/02.jpg" class="gallery-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
<img src="assets/img/portfolio/courses/02.jpg" alt="Gallery thumbnail">
<div class="gallery-item-caption fs-sm fw-medium">Gallery image caption</div>
</a>
</div>
<!-- Item -->
<div class="col">
<a href="https://www.youtube.com/watch?v=8KaJRw-rfn8" class="gallery-item video-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
<img src="assets/img/portfolio/courses/01.jpg" alt="Gallery thumbnail">
<div class="gallery-item-caption fs-sm fw-medium">Gallery video caption</div>
</a>
</div>
<!-- Add as many items as you need -->
</div>Grid no gutters
<!-- Gallery grid no gutters -->
<div class="gallery row row-cols-1 row-cols-sm-2 row-cols-md-3 g-0" data-video="true">
<!-- Item -->
<div class="col border border-light">
<a href="assets/img/portfolio/courses/02.jpg" class="gallery-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
<img src="assets/img/portfolio/courses/02.jpg" alt="Gallery thumbnail">
<div class="gallery-item-caption fs-sm fw-medium">Gallery image caption</div>
</a>
</div>
<!-- Item -->
<div class="col border border-light">
<a href="https://www.youtube.com/watch?v=8KaJRw-rfn8" class="gallery-item video-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
<img src="assets/img/portfolio/courses/01.jpg" alt="Gallery thumbnail">
<div class="gallery-item-caption fs-sm fw-medium">Gallery video caption</div>
</a>
</div>
<!-- Add as many items as you need -->
</div>Inside card
Card with gallery thumbnail
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere<!-- Gallery inside card -->
<div class="card gallery">
<a href="assets/img/portfolio/courses/03.jpg" class="gallery-item card-img-top" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
<img src="assets/img/portfolio/courses/03.jpg" alt="Gallery thumbnail">
</a>
<div class="card-body">
<h5 class="card-title">Card with gallery thumbnail</h5>
<p class="card-text fs-sm text-muted">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
</div>
</div>Inside carousel
<!-- Gallery inside carousel -->
<div class="position-relative px-md-5">
<button type="button" id="prev" class="btn btn-prev btn-icon btn-sm position-absolute top-50 translate-middle-y start-0 d-none d-md-inline-flex mt-n4" aria-label="Previous">
<i class="bx bx-chevron-left"></i>
</button>
<button type="button" id="next" class="btn btn-next btn-icon btn-sm position-absolute top-50 translate-middle-y end-0 d-none d-md-inline-flex mt-n4" aria-label="Next">
<i class="bx bx-chevron-right"></i>
</button>
<div class="swiper pt-1" data-swiper-options='{
"slidesPerView": 1,
"spaceBetween": 20,
"loop": true,
"pagination": {
"el": ".swiper-pagination",
"clickable": true
},
"navigation": {
"prevEl": "#prev",
"nextEl": "#next"
},
"breakpoints": {
"500": {
"slidesPerView": 2,
"spaceBetween": 16
},
"700": {
"slidesPerView": 2,
"spaceBetween": 24
},
"1000": {
"slidesPerView": 3,
"spaceBetween": 24
}
}
}'>
<div class="swiper-wrapper gallery" data-video="true">
<!-- Item -->
<div class="swiper-slide">
<a href="assets/img/portfolio/courses/08.jpg" class="gallery-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
<img src="assets/img/portfolio/courses/08.jpg" alt="Gallery thumbnail">
<div class="gallery-item-caption fs-sm fw-medium">Gallery image caption</div>
</a>
</div>
<!-- Item -->
<div class="swiper-slide">
<a href="https://www.youtube.com/watch?v=8KaJRw-rfn8" class="gallery-item video-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
<img src="assets/img/portfolio/courses/01.jpg" alt="Gallery thumbnail">
<div class="gallery-item-caption fs-sm fw-medium">Gallery video caption</div>
</a>
</div>
<!-- Item -->
<div class="swiper-slide">
<a href="assets/img/portfolio/courses/03.jpg" class="gallery-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
<img src="assets/img/portfolio/courses/03.jpg" alt="Gallery thumbnail">
<div class="gallery-item-caption fs-sm fw-medium">Gallery image caption</div>
</a>
</div>
<!-- Item -->
<div class="swiper-slide">
<a href="assets/img/portfolio/courses/07.jpg" class="gallery-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
<img src="assets/img/portfolio/courses/07.jpg" alt="Gallery thumbnail">
<div class="gallery-item-caption fs-sm fw-medium">Gallery image caption</div>
</a>
</div>
</div>
<div class="swiper-pagination position-relative pt-3 pt-sm-4 mt-4"></div>
</div>
</div>Thumbnails
<!-- Gallery with thumbnails -->
<div class="gallery row g-4" data-thumbnails="true">
<!-- Item -->
<div class="col-md-5">
<a href="assets/img/about/gallery/01.jpg" class="gallery-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption 1</h6>'>
<img src="assets/img/about/gallery/01.jpg" alt="Gallery thumbnail">
<div class="gallery-item-caption fs-sm fw-medium">Gallery image caption 1</div>
</a>
</div>
<div class="col-md-3 col-sm-5">
<!-- Item -->
<a href="assets/img/about/gallery/02.jpg" class="gallery-item rounded-3 mb-4" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption 2</h6>'>
<img src="assets/img/about/gallery/02.jpg" alt="Gallery thumbnail">
<div class="gallery-item-caption fs-sm fw-medium">Gallery image caption 2</div>
</a>
<!-- Item -->
<a href="assets/img/about/gallery/03.jpg" class="gallery-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption 3</h6>'>
<img src="assets/img/about/gallery/03.jpg" alt="Gallery thumbnail">
<div class="gallery-item-caption fs-sm fw-medium">Gallery image caption 3</div>
</a>
</div>
<div class="col-md-4 col-sm-7">
<!-- Item -->
<a href="assets/img/about/gallery/04.jpg" class="gallery-item rounded-3 mb-4" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption 4</h6>'>
<img src="assets/img/about/gallery/04.jpg" alt="Gallery thumbnail">
<div class="gallery-item-caption fs-sm fw-medium">Gallery image caption 4</div>
</a>
<!-- Item -->
<a href="assets/img/about/gallery/05.jpg" class="gallery-item rounded-3" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption 5</h6>'>
<img src="assets/img/about/gallery/05.jpg" alt="Gallery thumbnail">
<div class="gallery-item-caption fs-sm fw-medium">Gallery image caption 5</div>
</a>
</div>
</div>