meta-lightbox/dist/index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1, shrink-to-fit=no"
		/>
		<meta name="description" content="Meta Lightbox" />
		<meta name="author" content="Tony Air" />
		<title>Meta-lightbox Demo</title>
		<style>
			.wrapper {
				padding: 2rem;
			}
		</style>
	<link href="css/app.css" rel="stylesheet"></head>
	<body>
		<div class="wrapper">
			<h1>Meta-lightbox Demo</h1>
			NODE_ENV: development <p>
	<a
		href="../src/img/photo1.png"
		data-toggle="lightbox"
		data-lightbox-gallery="demo"
		data-title="That's first link"
	>Click me to start</a>
</p>
<p>
	<a href="../src/img/photo2.jpg" data-toggle="lightbox" data-lightbox-gallery="demo">
		Use data-toggle="lightbox" attribute to attach lightbox action and href to specify URL.
	</a>
</p>
<p>
	<a href="../src/img/photo1.png" data-toggle="lightbox" data-lightbox-gallery="demo" data-title="Use data-title attribute to specify lightbox title">
		Use data-lightbox-gallery="YOUR_GALLERY_NAME" to group ligthboxes and use next/prev arrows
	</a>
</p>
<p data-toggle="lightbox" data-href="https://youtu.be/GgnClrx8N2k" data-lightbox-gallery="demo" data-title="Yes you can link vimeo and youtube videos as long as AJAX content">
	You can use data-href attribute to specify link and attach lightbox to another element
</p>
			<p>
				<b>Note:</b> You can add jquery-zoom plugin and lighbox will
				zoom photos on hover.
			</p>
			<div id="App"></div>
		</div>

		<!-- That's optional dependencies -->
		<link
			rel="stylesheet"
			href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		/>
		<link
			rel="stylesheet"
			href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"
		/>
		<!-- React is required -->
		<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

		<!-- jQuery is required -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="js/app.js"></script></body>
</html>
Minor improvements 2021-01-25 12:15:33 +01:00			`<!DOCTYPE html>`
			`<html lang="en">`
			`<head>`
			`<meta charset="utf-8" />`
			`<meta`
			`name="viewport"`
			`content="width=device-width, initial-scale=1, shrink-to-fit=no"`
			`/>`
			`<meta name="description" content="Meta Lightbox" />`
			`<meta name="author" content="Tony Air" />`
			`<title>Meta-lightbox Demo</title>`
			`<style>`
			`.wrapper {`
Rebuild 2019-11-27 06:27:09 +01:00			`padding: 2rem;`
Minor improvements 2021-01-25 12:15:33 +01:00			`}`
			`</style>`
			`<link href="css/app.css" rel="stylesheet"></head>`
			`<body>`
			`<div class="wrapper">`
			`<h1>Meta-lightbox Demo</h1>`
			`NODE_ENV: development <p>`
			`<a`
			`href="../src/img/photo1.png"`
			`data-toggle="lightbox"`
			`data-lightbox-gallery="demo"`
			`data-title="That's first link"`
			`>Click me to start</a>`
			`</p>`
			`<p>`
			`<a href="../src/img/photo2.jpg" data-toggle="lightbox" data-lightbox-gallery="demo">`
			`Use data-toggle="lightbox" attribute to attach lightbox action and href to specify URL.`
			`</a>`
			`</p>`
			`<p>`
			`<a href="../src/img/photo1.png" data-toggle="lightbox" data-lightbox-gallery="demo" data-title="Use data-title attribute to specify lightbox title">`
			`Use data-lightbox-gallery="YOUR_GALLERY_NAME" to group ligthboxes and use next/prev arrows`
			`</a>`
			`</p>`
			`<p data-toggle="lightbox" data-href="https://youtu.be/GgnClrx8N2k" data-lightbox-gallery="demo" data-title="Yes you can link vimeo and youtube videos as long as AJAX content">`
			`You can use data-href attribute to specify link and attach lightbox to another element`
			`</p>`
			`<p>`
			`<b>Note:</b> You can add jquery-zoom plugin and lighbox will`
			`zoom photos on hover.`
			`</p>`
			`<div id="App"></div>`
			`</div>`

			`<!-- That's optional dependencies -->`
			`<link`
			`rel="stylesheet"`
			`href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"`
			`/>`
			`<link`
			`rel="stylesheet"`
			`href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"`
			`/>`
			`<!-- React is required -->`
			`<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>`

			`<!-- jQuery is required -->`
			`<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>`
			`<script src="js/app.js"></script></body>`
			`</html>`