# j-ImageViewer

> j-ImageViewer: szingleton; helyezze el a komponens <test elem

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: hu
Content-SHA256: a259941d87089c42dbe2f05e2b40692fd16a4ae2ae90451a36b5899fcc1de3d2
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- Szingapúr
- Az összetevőt a `<body` elem alatt helyezzük el.


__konfiguráció__:

- `container {String}` egy tartály a képek csoportjához (default: `.img-container`)
- `selector {String}` egy képválasztó (default: `.img-viewer`)
- A `loading {Boolean}` lehetővé teszi a slides között történő feltöltését (default: `true`)
- `unknown {String}` névtelen képek címét (default: `Unknown image`)

__Jó tudni__:

- A képet a `data-src=""`-ről vagy a `src=""` attribútumokról töltik be.
- A nevek a `title=""` vagy a `alt=""` attribútumokból származnak

Használja a `<ui-component name="imageviewer">`Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről `DEF.fallback` (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

```html 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>
```