I'm changing the question after I found a lightgalleryjs which is more advanced than fancybox.
Is it possible to load first 3-5 images by default in dynamic mode than once the lightbox is opened the rest of images are loaded. So let's say if I have a gallery of 20 images I want to show the first couple of images in masonry way like the attached image with a view all link to view the rest of the images.
I found a great jquery plugin to show gallery like facebook does (click here to view the plugin page). It shows the first 3-5 images and then generates a view all link to click and start sliding to view the rest of the images no matter how many images they are. The plugin comes with a default image modal to enlarge the image on fullscreen however I'm looking to merge both plugins loading the images as attached with the link to view the rest.
The HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://www.cssscript.com/demo/sticky.css" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" href="css/lightgallery-bundle.css" />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/css/justifiedGallery.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.css'>
<link rel="stylesheet" href="fb.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="fb.js"></script>
<style>
body {
padding: 40px;
background-image: linear-gradient(#e8f0ff 0%, white 52.08%);
color: #0e3481;
min-height: 100vh;
}
.header .lead {
max-width: 728px;
}
/** Below CSS is completely optional **/
.gallery-item {
width: 200px;
padding: 5px;
}
</style>
</head>
<body>
<div id="gallery"></div>
<script src='https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/js/jquery.justifiedGallery.js'></script>
<script src="lightgallery.umd.js"></script>
<script src="plugins/autoplay/lg-autoplay.umd.js"></script>
<script src="plugins/comment/lg-comment.umd.js"></script>
<script src="plugins/fullscreen/lg-fullscreen.umd.js"></script>
<script src="plugins/hash/lg-hash.umd.js"></script>
<script src="plugins/pager/lg-pager.umd.js"></script>
<script src="plugins/rotate/lg-rotate.umd.js"></script>
<script src="plugins/share/lg-share.umd.js"></script>
<script src="plugins/thumbnail/lg-thumbnail.umd.js"></script>
<script src="plugins/video/lg-video.umd.js"></script>
<script src="plugins/zoom/lg-zoom.umd.js"></script>
<script>
$(document).ready(function() {
// an array of images
var images = [
{
src: 'https://unsplash.it/1300/800?image=874', // url
alt: 'Two', // alternative text
title: 'Two', // title
subHtml: 'Two', // modal caption
thumb: 'https://unsplash.it/1300/800?image=874', // thumbnail image url
'data-src': 'https://unsplash.it/1300/800?image=874',
},
{
src: 'https://unsplash.it/1300/800?image=872', // url
alt: 'Three', // alternative text
title: 'Three', // title
subHtml: '', // modal caption
thumb: 'https://unsplash.it/1300/800?image=872', // thumbnail image url
'data-src': 'https://unsplash.it/1300/800?image=872' // thumbnail image url
},
{
src: 'https://unsplash.it/1300/800?image=868', // url
alt: 'Car', // alternative text
title: 'Car', // title
subHtml: 'Supercar', // modal caption
thumb: 'https://unsplash.it/1300/800?image=868', // thumbnail image url
'data-src': 'https://unsplash.it/1300/800?image=868' // thumbnail image url
},
{
src: 'https://unsplash.it/1300/800?image=861', // url
alt: 'Car', // alternative text
title: 'Car', // title
subHtml: 'Supercar', // modal caption
thumb: 'https://unsplash.it/1300/800?image=861', // thumbnail image url
'data-src': 'https://unsplash.it/1300/800?image=861' // thumbnail image url
},
{
src: 'https://unsplash.it/1300/800?image=827', // url
alt: 'Five', // alternative text
title: 'Car', // title
subHtml: 'Supercar', // modal caption
thumb: 'https://unsplash.it/1300/800?image=827', // thumbnail image url
'data-src': 'https://unsplash.it/1300/800?image=827' // thumbnail image url
},
{
src: 'https://unsplash.it/1300/800?image=844', // url
alt: 'Six', // alternative text
title: 'Car', // title
subHtml: 'Supercar', // modal caption
thumb: 'https://unsplash.it/1300/800?image=844', // thumbnail image url
'data-src': 'https://unsplash.it/1300/800?image=844' // thumbnail image url
},
{
src: 'https://unsplash.it/1300/800?image=811', // url
alt: 'Seven', // alternative text
title: 'Car', // title
subHtml: 'Supercar', // modal caption
thumb: 'https://unsplash.it/1300/800?image=811', // thumbnail image url
'data-src': 'https://unsplash.it/1300/800?image=811' // thumbnail image url
},
{
src: 'https://unsplash.it/1300/800?image=723', // url
alt: 'Eight', // alternative text
title: 'Car', // title
subHtml: 'Supercar', // modal caption
thumb: 'https://unsplash.it/1300/800?image=723', // thumbnail image url
'data-src': 'https://unsplash.it/1300/800?image=723' // thumbnail image url
},
];
$('#gallery').imagesGrid({
images: images,
// align images with different sizes
align: false,
// max grid cells (1-6)
//cells: 3,
// goto next image on click
nextOnClick: true,
// callbacks
onGridRendered: $.noop,
onGridItemRendered: $.noop,
onGridLoaded: $.noop,
onModalImageUp: $.noop,
});
const $dynamicGallery = document.getElementById('gallery');
const dynamicGallery = window.lightGallery($dynamicGallery, {
dynamic: true,
allowMediaOverlap: true,
toggleThumb: true,
animateThumb: false,
showThumbByDefault: false,
selector: '.image-wrap',
plugins: [lgAutoplay, lgComment, lgFullscreen, lgHash, lgPager, lgRotate, lgShare, lgVideo, lgZoom, lgThumbnail],
dynamicEl: [
{
images
},
]
});
$dynamicGallery.addEventListener("click", () => {
dynamicGallery.openGallery(0);
});
});
</script>
</body>
</html>
The ImageGrid Plugin Code
(function($) {
$.fn.imagesGrid = function(options) {
var args = arguments;
return this.each(function() {
if ($.isPlainObject(options)) {
var cfg = $.extend({}, $.fn.imagesGrid.defaults, options);
cfg.element = $(this);
this._imgsGridInst = new ImagesGrid(cfg);
this._imgsGridInst.render();
return;
}
});
};
$.fn.imagesGrid.defaults = {
align: false,
getViewAllText: function(imagesCount) {
return 'View all ' + imagesCount + ' images';
}
};
function ImagesGrid(cfg) {
cfg = cfg || {};
this.images = cfg.images;
this.isAlign = cfg.align;
if(cfg.cells) {
this.maxGridCells = cfg.cells;
} else {
this.maxGridCells = 5;
}
this.imageLoadCount = 0;
this.$window = $(window);
this.$el = cfg.element;
this.$gridItems = [];
this.render = function() {
this.setGridClass();
this.renderGridImages();
this.$window.on('resize', this.resize.bind(this));
};
this.setGridClass = function() {
this.$el.removeClass(function(index, classNames) {
if (/(imgs-grid-\d)/.test(classNames)) {
return RegExp.$1;
}
});
var cellsCount = (this.images.length > this.maxGridCells)?
this.maxGridCells: this.images.length;
this.$el.addClass('imgs-grid imgs-grid-' + cellsCount);
};
this.renderGridImages = function() {
if (!this.images) {
return;
}
this.$el.empty();
this.$gridItems = [];
var i, item;
for (i = 0; i < this.images.length; ++i) {
var imgatt =
[
'src: "' + this.images[i].src + '",',
'thumb: "' + this.images[i].thumbnail + '",',
'subHtml: "' + this.images[i].title + '",',
]
if (i == this.maxGridCells) {
break;
}
item = $('<div>', {
class: 'imgs-grid-image',
data: { index: i }
});
item.append(
$('<a>', {
class: 'image-wrap',
id: 'image-wrap',
href: this.images[i].src,
'data-src': this.images[i].src,
}).append(
$('<img>', {
src: this.images[i].src,
alt: this.images[i].alt,
title: this.images[i].title,
load: this.imageLoaded.bind(this)
})
)
);
this.$gridItems.push(item);
}
const imgatts = imgatt.map(n => n);
this.$el.append(this.$gridItems);
if (this.images.length > this.maxGridCells) {
this.renderViewAll();
}
};
this.renderViewAll = function() {
this.$el.find('.imgs-grid-image:last .image-wrap').append(
$('<div>', {
class: 'view-all'
}).append(
$('<span>', {
class: 'view-all-cover',
}),
$('<span>', {
class: 'view-all-text',
id: 'viewall',
text: cfg.getViewAllText(this.images.length)
})
)
);
};
this.resize = function(event) {
if (this.isAlign) {
this.align();
}
};
this.imageLoaded = function() {
++this.imageLoadCount;
if (this.imageLoadCount == this.$gridItems.length) {
this.imageLoadCount = 0;
this.allImagesLoaded()
}
};
this.allImagesLoaded = function() {
if (this.isAlign) {
this.align();
}
};
this.align = function() {
var len = this.$gridItems.length;
switch (len) {
case 2:
case 3:
this.alignItems(this.$gridItems);
break;
case 4:
this.alignItems(this.$gridItems.slice(0, 2));
this.alignItems(this.$gridItems.slice(2));
break;
case 5:
this.alignItems(this.$gridItems.slice(0, 3));
this.alignItems(this.$gridItems.slice(3));
break;
}
};
this.alignItems = function(items) {
var height = items.map(function(item) {
return item.find('img').height();
});
var itemHeight = Math.min.apply(null, height);
$(items).each(function() {
var item = $(this),
imgWrap = item.find('.image-wrap'),
img = item.find('img'),
imgHeight = img.height();
imgWrap.height(itemHeight);
if (imgHeight > itemHeight) {
var top = Math.floor((imgHeight - itemHeight) / 2);
img.css({ top: -top });
}
});
};
}
})(jQuery);
