j-ImageViewer

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

Singletă
Se pune componenta sub elementul <body

Configurarea:

container {String} un container pentru grupul de imagini (default: .img-container)
selector {String} un selector de imagine (default: .img-viewer)
loading {Boolean} permite încărcarea între slide (default: true)
unknown {String} un titlu pentru imagini anonime (default: Unknown image)

bine să știi:

Imaginea este încărcată din data-src="" sau din atributele src=""
Numele este obținut din title="" sau din atributele alt=""

Utilizați-l cu <ui-component name="imageviewer">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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>