Reading time: 3 minutes

Lightbox galerijos kodas Hugo puslapių generatoriui



newpost hugo lightbox kodas



Taip, šitas įrašas čia turėjo atsidurti daug seniau. Anksčiau rašiau apie tai, jog jei tik sugalvosiu kaip integruoti Lightbox galeriją, tai būtinai pasidalinsiu kodu čia.

Reikės:

themes -> temos pavadinimas -> _default -> baseof

<link rel="stylesheet" href="{{ "lightbox.css" | relURL }}">

Taip atrodo visas mano naudojamas baseof failas:

Pastaba: įtrauktas papildomas partial komponentas footer.html

<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode | default "en-us" }}" style="width: 100%;">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>{{ .Title }}</title>
	<link rel="stylesheet" href="{{ "bt.css" | relURL }}">
	<link rel="stylesheet" href="{{ "material.css" | relURL }}">
	<link rel="stylesheet" href="{{ "override.css" | relURL }}">
	<link rel="stylesheet" href="{{ "lightbox.css" | relURL }}">
	<link rel="manifest" href="{{ "manifest.json" | relURL }}">
	
	{{ with .OutputFormats.Get "RSS" -}}
		{{ printf `<link rel="%s" type="%s" href="%s" title="%s">` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }}
	{{- end }}
	{{ partial "meta.html" . -}}
	{{ partial "headscripts.html" . -}}


</head>
<body>
				{{ partial "header" . }}
				<div class="container">
					<div class="row">
						{{ partial "head-additions.html" . -}}
					</div>
				</div>
				<div class="container">
					<div class="row">
						{{ block "main" . }}{{ end }}
					</div>
				</div>
			<div class="container-fluid">
				<div class="row">
					{{ partial "footer" . }}

				</div>
			</div>
				
</body>
</html>

Tam vertėtų susikurti naują komponentą (partial) savo temai.

themes -> aktyvuotos temos pavadinimas -> layouts -> partials -> footer.html

Pavyzdinis footer.html kodas:

{{ partial "footerscripts.html" . -}}

<div
	class="container-fluid pt-3 pb-3 mt-4"
	style="background-color: #212121 !important"
>
	<div class="row text-center">
		<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
			<p><a target="_blank" href="http://feeds.feedburner.com/artefaktas/mjeb">RSS FEED</a></p>
			<p>
				<a href="https://www.artefaktas.eu"
					>Copyright @ {{ now.Year }} artefaktas.eu | All Rights Reserved</a
				>
			</p>
		</div>
	</div>
</div>

footerscripts.html kodas:

<script defer src="/jq.js"></script>
<script defer="defer">
	window.addEventListener("load",()=>{
		class imageGallery{
		constructor(){
			this.imageSelector = document.querySelectorAll(".card-body img")
			this.title = `newImage`
		}

		reconstruct(){
			this.imageSelector.forEach(element => {
				if(element.offsetWidth > 200){
				let newElement = `<a href="`+element.src+`" data-lightbox="image-1" data-title="`+this.title+`">`+element.parentNode.innerHTML+`</a>`;
				let parent = element.parentNode;
				parent.innerHTML = newElement;
				}
			});
			let s = document.createElement("script");
			s.defer = "defer";
			s.src = "/lightbox.js";
			document.body.appendChild(s);
		}
	}
	if(String(window.location.pathname).includes("/post/")){
		let s = new imageGallery();
		s.reconstruct();
	}
	
	})
</script>

Ką daro antroji dalis esanti tarp script žymų?

Aprašoma nauja klasė bei selektorius, kuris parenka .card-body klasės paveikslėlių elementus.

Jei aplakytojo adreso nuorodoje yra /post/ dalis, tai pradedama vykdyti funkcija, kuri išrenka visus img elementus iš .card-body klasės ir paverčia juos Lightbox galerijos skriptui suprantamu formatu: nuorodos atidarymo žyma + paveikslėlis + nuorodos uždarymo žyma. Tai padaroma tik tada, kai paveikslėlio plotis viršija 200. Tuomet suformuojamas naujas script elementas su src atributu vedančiu į Lightbox skriptą esantį public direktorijoje.

Bonusas (CSS kodas Lightbox dėžutės vertikaliam centravimui bei pločio padidinimui):

#lightboxOverlay { position: fixed !important; top: 0; left: 0; height: 100% !important; width: 100% !important; }
#lightbox { position: fixed !important; top: 50% !important; transform: translateY(-50%);} 
.lb-outerContainer{width:80% !important;}

Rezultatas

Paspauskite paveikslėlį:

flag

Visa pateikiama informacija - asmeninė autoriaus nuomonė. Kilus naiškumams rekomenduojama susisiekti elektroniniu paštu: admin@artefaktas.eu

Comments

comments powered by Disqus