# j-ImageViewer

> j-ImageViewer: singleton; coloque el componente debajo de <elemento del cuerpo

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

- singleton
- colocar el componente debajo del elemento `<body`


__Configuración__:

- `container {String}` un contenedor para un grupo de imágenes (predeterminado: `.img-container`)
- `selector {String}` un selector de imágenes (predeterminado: `.img-viewer`)
- `loading {Boolean}` permite la carga entre diapositivas (predeterminado: `true`)
- `unknown {String}` un título para imágenes sin nombre (predeterminado: `Unknown image`)

__Es bueno saberlo__:

- la imagen se carga desde `data-src=""` o desde los atributos `src=""`
- los nombres se obtienen del `title=""` o de los atributos `alt=""`

Úselo con `<ui-component name="imageviewer">`. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia MIT.

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