jquery jMosaic muchas imágenes un solo lugar



jquery jMosaic muchas imágenes un solo lugar donde colocar todas, prácticamente las imágenes que podemos manera con jquery  jMosaic son de un mismo tamaño, sin embargo el potencial que este plugin tiene es que esas mismas imágenes las convierte al estilo mosaico convirtiéndolas en una sola imagen unidas mediante jMosaic, también cabe mencionar que el plugin es uy ligero, puede trabajar con las etiquetas img, div, li.

Tienes un enlace de ejemplo: http://htmlpreview.github.io/?https://github.com/absentik/jMosaic/blob/master/index.html#example

La manera de usarla es la siguiente:

1.- Primero tenemos que agregar las urls o archivos js que contiene el script junto con el framework jquery, en este caso quedaría de la siguiente forma:


<script src="js/jquery.js"></script>

<script src="js/jquery.jMosaic.js"></script>

 

2.- posteriormente agregamos  las hojas de estilo correspondiente al plugin

<link rel="stylesheet" href="css/jquery.jMosaic.css"/ >

3.- Una vez creada la referencia de los archivos js y los css procedemos a crear la referencia a las etiquetas.


<div class="pictures">

    <img src="img/one.jpg" width="267" height="400"/>

    <img src="img/two.jpg" width="500" height="350"/>

    . . .

    <img src="img/last.jpg" width="400" height="300"/>

</div>   

4.- como último paso  agregamos el código javacript perteneciente a jMosaic


$('.pictures').jMosaic();

Independientemente de las opciones default, este plugin maneja otras opciones para la galería de datos como por ejemplo:

items_type : Tipo de elementos en el caso de las etiquetas img, div, li

min_row_height : ancho mínimo de las filas.

margin : Espacio entre elementos

is_first_big : Primera fila es grande (falso/verdadero )

 

Aquí tienes los enlaces de descarga, pruébalo suena muy interesante esa idea de utilizar plugins para fortalecer la interfaz gráfica o frontEnd.

You may also like...