Content Gallery

Gallery.js

function makeGrid(imageIds, size, page, gridClass = '.GRID_CLASS') {
	if ($(gridClass).length != 1 || size[0] > 4 || size[0] < 1)										// Check that there is only one container and that the number of columns is 1-4
		return null;

	let idsAsString = imageIds.map(id => `<img src="img/img.jpg" alt="${id}">`),					// Maps list of ids to string template.
		x = size[0],															 					// Row size
		y = size[1],																				// Column size
		pageSize = x * y,																			// Grid size
		pages = (pageSize < idsAsString.length) ? 
						Math.ceil(idsAsString.length / pageSize) : 0,								// Number of pages needed
		grid = $(gridClass).addClass('row text-center').empty();									// Grid element to manipulate

	page = (page == null) ? 0 : page;																// Page to display

	if (pages > 0)
		grid.append(`<p>Page ${page+1} of ${pages}</p>`);											// If paging, display page
	
	Array.from(Array(x), (a,b) => b).forEach(col => {												// Create grid
		$(gridClass).append(`<div class="medium-${12/x} columns gCol-${col}"></div>`);

		Array.from(Array(y), (a,b) => b).forEach(row => {
			let pos = (row*x) + col + (pageSize * page);

			$(`.gCol-${col}`).append((pos < idsAsString.length && idsAsString[pos] != null) ?
											idsAsString[pos] : '<p style="height: 185px;"></p>');
		});
	});
	
	if (pages > 0 && !$('.PAGE-LINKS').length) {													// Display page links, this will only be ran on the first call to makeGrid()
		let links = $('<div class="row PAGE-LINKS text-center"></div>').insertAfter(grid);

		Array.from(Array(pages), (a,b) => b).forEach(p => {											// @TODO: Convert to instanced variables...
			links.append(`<a href="#" onclick="makeGrid([${imageIds}], [${size}], ${p});" style="margin: 5px;">${p + 1}</a>`);
		});	
	}
}

$(document).ready(function() {
let listOfIds = [ 1, 2, , 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44 ];
let gridSize = [ 3, 4 ];

  makeGrid(listOfIds, gridSize);
})