#English redaction

Jaslider.js is an slider plugin for jquery , this plugin can have an gallery with thumbnails or not to animate the images.

Tested with: IE8+ , Chrome 29.0.1547.76 and Mozillla Firefox; Using jquery-1.9

1- Include jquery file and plugin Jaslider.js and css stylesheet called "Jastyles.css"

2- Create an div with id E.g : <div id="gallery"></div>

3- Create an elements list on gallery div and put the images on <li><img src="images_path..." /></li>

4- Then instantiate the plugin with javascript

$("#gallery").JaGallery( {
         height: 300, 
         width: 500,
         sliderTime: 1200
});

5- Ready !

1- Set at "true" the element thumbs

 $("#gallery").JaGallery( { thumbs:true } );

2 - Create a div with id = "thumbnails" and add a list <ul> the same way we did before, for example:

<div id="thumbnails">
  <ul>
    <li><img src="images/1.jpg" /></li>
    <li><img src="images/2.jpg" /></li>
    <li><img src="images/3.jpeg" /></li>
    <li><img src="images/4.jpeg" /></li>
    <li><img src="images/5.jpg" /></li>
    <li><img src="images/6.jpg" /></li>

  </ul>
</div>

3- Ready!

There are two .html files with examples.

example1.html (Simple slider without thumbnails images)

example2.html (Slider Gallery with thumbnails images)

Jaslider.js es un plugin para jQuery slider, este plugin puede tener una galería con imágenes en miniatura o no animar las imágenes.

Testeado en: IE8, Chrome 29.0.1547.76 y Mozilla Firefox; Usando jquery-1.9

1 - Incluir archivo jquery y Jaslider.js plugin y hoja de estilo css llamado "Jastyles.css"

2 - Crear un div con id Ejemplo:

<div id="gallery"></div>

3 - Crear una lista de elementos en la galería div y poner las imágenes en los elementos <li><img src = "images_path ..." /></li>

4 - Luego, instanciar el plugin dentro del document ready asi:

$ ("#gallery").JaGallery({
         height: 300,
         width: 500,
         sliderTime: 1200
});

5 - Listo!

1 - Crear y setear en "true" el elemento "thumbs" del objeto

$("#galería").JaGallery({ thumbs: true });

2 - Crear un div con id = "thumbnails" y añadirle una lista <ul> de la misma forma que hicimos antes Por ejemplo:

<div id="thumbnails">
  <ul>
    <li><img src="images/1.jpg" /></li>
    <li><img src="images/2.jpg" /></li>
    <li><img src="images/3.jpeg" /></li>
    <li><img src="images/4.jpeg" /></li>
    <li><img src="images/5.jpg" /></li>
    <li><img src="images/6.jpg" /></li>

  </ul>
</div>

3 - Listo!

Hay 2 archivos .HTML con ejemplos.

example1.html (slider simple sin imágenes miniatura)

example2.html (galería deslizante con miniaturas de imágenes)

==========

#Parameters / Parámetros

width // (Required) Width of slider (Integer)
height // (Required) Height of the Slider (Integer)
thumbs // Set at true to use the thumbnails (Boolean)
infinite // Set at true to repeat slider effect (Boolean)
easing // Set any value of the plugin to run the slider with effects (String)
sliderTime // (Required) Set value to time images transitions (Integer)