Galerie mit Alben in Html, Css, jquery?

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet

Vielleicht ist die "nanogallery2" genau das, wonach Sie suchen.

Sie können Alben per HTML oder Javascript definieren. Dies sind die offiziellen Demos auf dem CodePen.io:

Mein Demo: https://codepen.io/glebkema/pen/qwxmQa?editors=1010

HTML

<link rel="stylesheet" href="/css/nanogallery2.min.css">

<div id="my_gallery"></div>

<scripthttps://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.jsjsjsjs"></script>
<script src="/js/jquery.nanogallery2.min.js"></script>

Javascript

jQuery(document).ready(function($) {
	$("#my_gallery").nanogallery2({
		itemsBaseURL: '<URL>',  // Vollständige URL Ihres Bildordners
		locationHash: false,
		thumbnailWidth: 'auto',
		thumbnailHeight: 200,
		items: [
			// album 1
			{
				kind: 'album',                            // item kind
				ID: 1,                                    // album ID
				srct:  'glebkema_iphone_9175_w0400.jpg',  // album thumbnail url
				title: 'Winter',                          // album title
			},
			{
				albumID: 1, ID: 11, title: 'Frost',
				src:  'glebkema_iphone_9273_w1000.jpg',   // photo url
				srct: 'glebkema_iphone_9273_w0400.jpg',   // photo thumbnail url
			},
			{
				albumID: 1, ID: 12, title: 'Snow',
				src:  'glebkema_iphone_9175_w1000.jpg',   // photo url
				srct: 'glebkema_iphone_9175_w0400.jpg',   // photo thumbnail url
			},


			// album 2
			{
				kind: 'album',                            // item kind
				ID: 2,                                    // album ID
				srct:  'glebkema_iphone_9623_w0400.jpg',  // album thumbnail url
				title: 'Summer',                          // album title
			},
			{
				albumID: 2, ID: 21, title: 'Sunrise',
				src:  'glebkema_iphone_9623_w1000.jpg',   // photo url
				srct: 'glebkema_iphone_9623_w0400.jpg',   // photo thumbnail url
			},
			{
				albumID: 2, ID: 22, title: 'Sunset',
				src:  'glebkema_iphone_9545_w1000.jpg',   // photo url
				srct: 'glebkema_iphone_9545_w0400.jpg',   // photo thumbnail url
			},
		],
	});
});

Was möchtest Du wissen?