j-ImageViewer

jComponent 20 · jcomponent@20 component Exemplo carregado com jComponent 20

Singularidade
Apresentação do elemento em <body

Configuração:

container {String} um contêiner para um grupo de imagens (default: .img-container)
selector {String} um selector de imagem (default: .img-viewer)
loading {Boolean} permite o carregamento entre os slides (default: true)
unknown {String} um título para imagens sem nome (default: Unknown image)

Bom para saber:

A imagem é carregada do data-src="" ou dos atributos src=""
Os nomes são obtidos a partir do title="" ou dos atributos alt=""

Use-o com <ui-component name="imageviewer">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença MIT.

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>