j-ImageViewer

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

singlar
Placera komponenten under elementet <body

Konfigurera:

container {String} en behållare för bildgrupp (default: .img-container)
selector {String} en bildselektor, (default: .img-viewer)
loading {Boolean} möjliggör laddning mellan slides (default: true)
unknown {String} en titel för okända bilder (default: Unknown image)

Bra att veta:

Bilden laddas från data-src="" eller från src=""-attribut
Namnen erhålls från title="" eller från attributen alt=""

Använd den med <ui-component name="imageviewer">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

example.html

<ui-component name="imageviewer"></ui-component>

<div class="row img-container">
	<div class="col-xs-4">
		<img src="https://cdn.pixabay.com/photo/2021/10/25/07/03/eagle-6740066__340.jpg" data-src="https://cdn.pixabay.com/photo/2021/10/25/07/03/eagle-6740066_960_720.jpg" border="0" class="img-responsive img-viewer" />
	</div>
	<div class="col-xs-4">
		<img src="https://cdn.pixabay.com/photo/2021/12/15/18/18/flowers-6873165__340.jpg" data-src="https://cdn.pixabay.com/photo/2021/12/15/18/18/flowers-6873165_960_720.jpg" border="0" class="img-responsive img-viewer" />
	</div>
	<div class="col-xs-4">
		<img src="https://cdn.pixabay.com/photo/2021/12/14/09/50/fatherhood-6870198__340.jpg" data-src="https://cdn.pixabay.com/photo/2021/12/14/09/50/fatherhood-6870198_960_720.jpg" border="0" class="img-responsive img-viewer" />
	</div>
</div>
<br />
<div class="row img-container">
	<div class="col-xs-4">
		<img src="https://cdn.pixabay.com/photo/2021/11/09/18/51/llama-6782140__340.jpg" data-src="https://cdn.pixabay.com/photo/2021/11/09/18/51/llama-6782140_960_720.jpg" border="0" class="img-responsive img-viewer" />
	</div>
	<div class="col-xs-4">
		<img src="https://cdn.pixabay.com/photo/2020/06/11/18/17/guinea-pig-5287747__340.jpg" data-src="https://cdn.pixabay.com/photo/2020/06/11/18/17/guinea-pig-5287747_960_720.jpg" border="0" class="img-responsive img-viewer" />
	</div>
	<div class="col-xs-4">
		<img src="https://cdn.pixabay.com/photo/2021/12/05/08/54/austria-6847009__340.jpg" data-src="https://cdn.pixabay.com/photo/2021/12/05/08/54/austria-6847009_960_720.jpg" border="0" class="img-responsive img-viewer" />
	</div>
</div>