PorgressbarWars para mostrar una barra de progreso estilo Star Wars, sin duda la fiebre star wars esta cubriendo el globo terrestre y no faltaba más encontrarlo en un simple progressBar realizando con css3 y JQuery.

El objetivo de este progressBar es mostrar en los diferentes colores la barra de progresso para cargar algo, ya sea para cargar fotos, videos, un sitio completo, entre otros componentes.

Para utilizar este progressBar hay que crear una referencia a los documentos css y js utilizando también jQuery, posterior a eso tienes que crear un id para referencia y crear el progressBar mismo que se hace un corto fragmento de código, vamos a ver la implementación:

Ejemplo: oscaruhp.github.io/progressBarWars/

1.- Crea las referencias a los archivos, en este caso se usa también bootstrap.

<!-- Bootstrap and JQuery -->
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery.min.js"> </script>
        
    <!-- Plugin -->
    <link rel="stylesheet" href="ProgressBarWars.css">
    <script src="ProgressBarWars.js"></script>

2.- Crea el elemento donde quieres que apareza el progressBar

<div id="example1"></div>

3.- Crea el script creando tambien la referencia sobre el div por ejemplo en el fragmente siguiente (example1) con las opciones que gustes como se muestra en el siguiente fragmento de código.

 $("#example1").ProgressBarWars({porcentaje:80,estilo:"vader",tiempo:5980});

Con este ultimo paso solo queda configurar tu plugin, utilizando algunas de las siguientes opciones:

 { 
        porcentaje:"100", /* valor de la barra (0 a 100)% */
        tiempo:1000, /* velocidad de transición */
        color:"#6D4C41", /*  (estilo - yoda, vader,etc..) */
        estilo:"yoda", /* valores (yoda, vader,obi,windu) */
	tamanio:"30%",   /* De 0 a 100 */
	alto:"10px"      /* Alto en ( px or % ) */
                    
}

The post PorgressbarWars para mostrar una barra de progreso estilo Star Wars appeared first on Develoteca.

jQuery Monthpicker un selector de fecha muy sencillo, permite al usuario seleccionar un año y un mes a partir de una pequeña ventana emergente , ofreciendo una devolución de llamada con la selección del año y del mes, este plugin es relativamente simple, el plugin no contiene documentación alguna, pero en esta nota lo explicamos.

Ejemplo:https://cdn.rawgit.com/lugolabs/monthpicker/master/examples/index.html

Aunque podemos deducir por el ejemplo que se tiene la manera de usarse, también podemos deducir por el código del plugin.

1.- Incluimos la referencia del plugin

  <script src="jquery-1.11.1.js"></script>
  <script src="jquery.monthpicker.js"></script>
  <link rel="stylesheet" type="text/css" href="jquery.monthpicker.css">

2.- incluimos el div donde queremos mostrar la fecha seleccionada.

 <a href="#monthpicker" id="monthpicker"></a>

3.- Por ultimo creamos el script con el código que indica los años deseados.

$(function() {
$('#monthpicker').monthpicker({
years: [2015, 2014, 2013, 2012, 2011],
topOffset: 6,
onMonthSelect: function(m, y) {
console.log('Month: ' + m + ', year: ' + y);
}
});
});

Este selector de fecha sin duda es muy básico, por lo que si quieres es recuperar la información seleccionada tendrás que meterlo en un campo oculto en el método  onMonthSelect.

4.- Agregar los meses en español

$(function() {
$('#monthpicker').monthpicker({
years: [2015, 2014, 2013, 2012, 2011],
months:['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
topOffset: 6,
onMonthSelect: function(m, y) {
console.log('Month: ' + m + ', year: ' + y);
}
});
});

The post jQuery Monthpicker un selector de fecha muy sencillo appeared first on Develoteca.

Código de de barras con javascript y jQuery, JsBarcode y jQuery, este plugin te ayuda a generar código de barra para utilizar en tus sistemas o simplemente para generar códigos de barras útiles para tus productos.

El ejemplo lo puedes ver en la siguiente dirección: https://github.com/lindell/JsBarcode

El generador de este plugin: http://lindell.me/JsBarcode/

Teniendo en cuenta este plugin podemos crear de forma sencilla diferentes tipos de códigos de barras, los códigos que soporta este plugin son:

1. CODE128
2. EAN
3. UPC
4. CODE39
5. ITF14
6. ITF
7. Pharmacode

Para generar este código con los datos deseados tenemos que tener en consideración usar los scripts del código, en caso contrario usar el script que contiene todos los códigos.

Incluir los scripts que necesitamos para el código (si no lo conocemos incluimos el que contiene todos los códigos esto será un poco más pesado).

1.- Ejemplo para código 128

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

<!-- ==ClosureCompiler==-->
<!-- @output_file_name JsBarcode.all.min.js -->
<!-- @code_url https://raw.github.com/lindell/JsBarcode/master/CODE128.js -->
<!-- @code_url https://raw.github.com/lindell/JsBarcode/master/CODE39.js -->
<!-- @code_url https://raw.github.com/lindell/JsBarcode/master/EAN_UPC.js -->
<!-- @code_url https://raw.github.com/lindell/JsBarcode/master/ITF.js -->
<!-- @code_url https://raw.github.com/lindell/JsBarcode/master/ITF14.js -->
<!-- @code_url https://raw.github.com/lindell/JsBarcode/master/pharmacode.js -->
<!-- @code_url https://raw.github.com/lindell/JsBarcode/master/JsBarcode.js -->
<!-- ==/ClosureCompiler== -->

1.- Todo el código.

<!-- Si requieres todos -->

<script src="JsBarcode.all.min.js"></script>

2.- Incluimos el canvas donde queremos mostrar el código.

<canvas id="barcode"></canvas>

3.- Referenciamos la etiqueta canvas para generar el codigo de barras.

$("#barcode").JsBarcode("Hi!");

4.- Controlamos el ancho y alto.

$("#barcode").JsBarcode("Javascript is fun!",{width:1,height:25});

5.- También podemos controlar otras opciones.

{
width: 2,
height: 100,
quite: 10,
format: "CODE128",
displayValue: false,
fontOptions: "",
font:"monospace",
textAlign:"center",
fontSize: 12,
backgroundColor:"",
lineColor:"#000"
}

6.- Otro ejemplo de uso con el formato EAN

$("#barcode").JsBarcode("9780199532179",{format:"EAN",displayValue:true,fontSize:20});

The post Código de de barras con javascript y jQuery, JsBarcode y jQuery appeared first on Develoteca.

Un slider con Bootstrap, algo diferente para implementar en bootstrap, ya conocemos el clásico slider de html5 y si no lo conoces puedes ver este enlace:http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_range.

Si ya conoces el elemento html5, puede ser que te interese cambiar el aspecto, bueno pues esto lo vas ha lograr con Bootstrap slider que es un plugin para crear aspectos diferentes con jQuery, este plugin tiene la facultad de generar distintos tipos de presentación.

Por ejemplo puedes usar este plugin para convertir una etiqueta tipo input a un simple slider, o si lo prefieres puedes configurar el slider teniendo en consideración lo siguiente:

1.- Un intervalo,

2.- Cambiar de apariencia (colores),

3.- Cambiar de posición horizontal, vertical

4.- Activar y desactivar el componente.

Si gustas puedes ver el ejemplo en la siguiente dirección: http://seiyria.com/bootstrap-slider/ para utilizar el plugin tienes que hacer lo siguiente:

1.- incluir las referencias del plugin, la hoja de estilos y jQuery plugin

<link href="dependencies/css/bootstrap.min.css" rel="stylesheet">
 <link href="css/bootstrap-slider.css" rel="stylesheet">
<script type='text/javascript' src="dependencies/js/jquery.min.js"></script>
<script type='text/javascript' src="js/bootstrap-slider.js"></script>

2.- Crear los componentes html, los cuales se convertirán en elementos slider.

<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>

3.- Agregamos el código que convertirá el elemento en un slider.

// With JQuery
$('#ex1').slider({
formatter: function(value) {
return 'Current value: ' + value;
}
});

The post Un slider con Bootstrap, algo diferente appeared first on Develoteca.

jQuery ScrollBox para mostrar imágenes o texto de forma elegante, aunque muchas veces podemos mostrar listas o grupos de contenido, siempre hay una opción que nos permite mejorar dicha presentación de imágenes, bueno pues jQuery ScrollBox es una alternativa que te puede resultar interesante.

Tan solo tienes que mires cuidadosamente este plugin para que puedas imaginar en que proyecto usarlo, los ejemplos son claros y los puedes encontrar en la siguiente dirección: http://wmh.github.io/jquery-scrollbox/ 

Algunos ejemplos usan imágenes para mostrar el potencial de este plugin y otros ejemplos usan contenido que se mueve de un lado a otro, tomate la libertad de usar este plugin en cualquier código siempre y cuando este se encuentre en una etiqueta ul como se indica en el siguiente ejemplo:

<ul>

<li>item 1</li>


<li>item 2</li>


<li>item 3</li>

</ul>



1.- Para la implementación solo necesitas incluir el siguiente código:



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.scrollbox.js"></script>

2.- El etiquetado html con el contenido:

<div id="demo" class="scroll-text">

<ul>

<li>item 1</li>


<li>item 2</li>


<li>item 3</li>

</ul>

</div>

3.- Crear el código para hacer la referencia:

$('#demo').scrollbox();

4.- Utiliza las opciones que aparecen en el sitio del autor: http://wmh.github.io/jquery-scrollbox/ 

The post jQuery ScrollBox para mostrar imágenes o texto de forma elegante appeared first on Develoteca.

Tiny Colorpicker, selector de color redondo con jQuery, es una librería que se implementa para mostrar un selectores de color a los formularios o interfaz de usuario, lo interesante de este plugin es que puedes seleccionar el color de un logo obteniendo los colores del mismo logo, la implementación puedes hacerla creando la referencia adecuada al div requerido.
En la siguiente dirección puedes encontrarte un ejemplo: http://baijs.com/tinycolorpicker/ en donde se muestran ejemplos con este plugin, la manera de usar es la siguiente:

1.- Incluir las referencias de la librería

<link rel="stylesheet" href="tinycolorpicker.css" type="text/css" media="screen"/>

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js">

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

2.- Incluir el código para la creación del picker

<div id="colorPicker">
<a class="color">
<div class="colorInner"></div>

</a>

<div class="track"></div>


<ul class="dropdown">
<li></li>
</ul>

<input type="hidden" class="colorInput"/>
</div>

3.- Incluir el script que convertirá tú código en el picker que deseas

$(document).ready(function()
{
var $box = $('#colorPicker');
$box.tinycolorpicker();
});

The post Tiny Colorpicker, selector de color redondo con jQuery appeared first on Develoteca.

FaceMocion jQuery, emociones estilo facebook emoticons, este plugin esta inspirado en la funcionalidad que tiene facebook que nos permite seleccionar el estado que provoca una publicación, este plugin convierte un elemento input en un icono que al pasar el ratón nos muestra un contenedor de emociones en el cual podemos seleccionarlo .

En el siguiente enlace puedes ver el ejemplo funcionando: http://oscaruhp.github.io/FaceMocion/

Este plugin te puede servir para implementar en algún sistema en donde necesites recolectar información del estado de animo del usuario, la implementación es como se indica a continuación.

1.- Primero tienes que incluir los archivos que necesita el plugin:

 <!-- Bootstrap and JQuery -->
 <link rel="stylesheet" href="bootstrap.min.css"> <!-- Optional -->
 <script src="jquery.min.js"> </script>
 
 <!-- Plugin --> 
 <link href="faceMocion.css" rel="stylesheet" type="text/css" />
 <script src="faceMocion.js"></script> 

2.- Posterior a eso tienes que crear tus campos input que estarán en tu formulario.

<input type="hidden" value="amo" class="facemocion"/>
 <input type="hidden" value="asombro" class="facemocion"/>     

3.- Por último llamar al plugin de la siguiente forma:

$(".facemocion").faceMocion();

4.- Puedes agregar opciones al plugin, para poder crear interesantes emociones (las que desees)

$(".facemocion").faceMocion({emociones:[
         {"emocion":"amo","TextoEmocion":"I love"},
         {"emocion":"molesto","TextoEmocion":"It bothers me"},
         {"emocion":"asusta","TextoEmocion":"it scares"},
         {"emocion":"divierte","TextoEmocion":"I enjoy"},
         {"emocion":"gusta","TextoEmocion":"I like"},
         {"emocion":"triste","TextoEmocion":"It saddens"},
         {"emocion":"asombro","TextoEmocion":"It amazes me"},
         {"emocion":"alegre","TextoEmocion":"I am glad"}
         ]});

The post FaceMocion jQuery, emociones estilo facebook emoticons appeared first on Develoteca.

Colores en un input html con JQuery Palette Color Picker, sin duda el usar el elemento input tipo color, no es suficiente ya que en ocasiones la presentación del selector no es muy amigable y no esta de acuerdo a nuestro diseño, es por eso que aquí tienes un plugin para implementar en esa aplicación,sitio html o portal que estas creando.

jQuery Pallete Color Picker tiene la facultad de restringir o definir los colores que utilizarías, puedes ver el ejemplo en uso: https://htmlpreview.github.io/?https://raw.githubusercontent.com/carloscabo/jquery-palette-color-picker/master/demo.html

A continuación se presenta la implementación de este plugin, lo único que tienes que hacer es lo siguiente:
1.- incluir los estilos (css) y los archivos javascript(js).

<link rel="stylesheet" href="src/palette-color-picker.css">
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<script src="src/palette-color-picker.js"></script>

2.- Incluir los elementos html (input) para convertir en color

<!-- <input type="text" name="UNIQUE_NAME"> -->
<input type="text" name="colorin">

3.- El uso basico quedaria de la siguiente forma:

$(document).ready(function(){
  $('[name="colorin"]').paletteColorPicker();
 });

4.- Adicional a esto puedes agregarle opciones al plugin de la siguiente forma:

$(‘[name=”colorin”]’).paletteColorPicker({ colors: [
{“primary”: “#E91E63”},
{“primary_dark”: “#C2185B”},
{“primary_light”: “#F8BBD0”},
{“accent”: “#CDDC39”},
{“primary_text”: “#212121”},
{“secondary_text”: “#727272”},
{“divider”: “#B6B6B6”}
]

});

Con estos simples pasos tienes un resultado que puede sacarte de apuros, en general trabajar con el plugin dejara un poco más presentable tu proyecto web que estés realizando.

The post Colores en un input html con JQuery Palette Color Picker appeared first on Develoteca.

jQuery Toasr Plugin es un plugin realizado para mostrar mensajes de texto estilo Toast (Clase utilizadas en el SDK android), al usar este plugin tenemos la facultad de mostrar un mensaje tipo toast de diferente color, además de eso se pueden cambiar de iconos para tener una solución diferente muy amigable y muy llamativa, lo interesante de este plugin es que es muy configurable que puedes inclusive mover de lugar (izquierda, derecha, centro), en general este plugin tiene configuraciones que permiten controlar los elementos Toast generados, pero bueno no se diga más y veamos la implementación, también puedes apoyarte con la documentación oficial que se encuentra en el siguiente enlace: http://kamranahmed.info/toast

Vamos a empezar a implementar el plugin de la siguiente forma:

Paso 1.- Incluir las referencias a los archivos css y js de la siguiente forma:

 <link rel="stylesheet" href="css/jquery.toast.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.toast.js"></script>

Paso 2.- Posterior a esto podemos usar el toast incluyendo el siguiente código

<script>
$.toast('Mensaje del Toast');
</script>

Otro Ejemplo, en este ejemplo podemos ver claramente otra forma de usar el Toast, donde su principal función es la siguiente:

<script>
$.toast({
    heading: 'Information',
    text: 'Loaders are enabled by default. Use `loader`, `loaderBg` to change the default behavior',
    icon: 'info',
    loader: true,        // Change it to false to disable loader
    loaderBg: '#9EC600'  // To change the background
});
</script>

The post Jquery Toast Plugin appeared first on Develoteca.

jQuery Flip efecto muy llamativo, este efecto te puede servir para mostrar contenido en la parte trasera de un elemento html y lograr por ejemplos mostrar una pequeña descripción con un efecto.

En la siguiente dirección te puedes encontrar un ejemplo:http://nnattawat.github.io/flip/ de como quedaría el efecto de este plugin.

La implementación se guía de 3 pasos en concreto:

1.- Incluye los archivo necesarios (Plugin y jQuery) 

<script src="https://code.jquery.com/jquery-2.1.4.min.js">
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js">

2.-El HTML que quieres manipular con el flip front y back.

<div id="card"> 
<div class="front"> 
     Front content
   </div>
<div class="back">
     Back content
  </div>
</div>

3.- Posterior a esto el script de jQuery que permite lograr ese efecto

$("#card").flip();

4.- Agrega las opciones del plugin necesarios como por ejemplo:
a).- Efecto a hacer clic en el elemento HTML
b).- Efecto al pasar el mouse sobre el elemento HTML.
c).- Efecto controlado con botones HTML.
d).- Efecto de movimiento: eje x ó eje y

Este plugin es muy recomendable para usar en un portafolio, en una galería de imágenes o simplemente en algún elemento HTML que quieres resaltar.

The post jQuery Flip efecto muy llamativo appeared first on Develoteca.

Efecto Zoom con Zoomify, es un plugin que muestra imágenes con un efecto único, debido a que este plugin muestra el efecto zoom que sin duda es algo atractivo al usuario final, puedes ver un ejemplo para que tengas una idea clara de como funciona: http://indrimuska.github.io/zoomify/ en este mismo enlace te puedes encontrar varios ejemplos de imágenes que al presionarlos te muestran la imagen en zoom.

Implementar el plugin es muy sencillo ya que lo que el plugin requiere es crear referencias y utilizarlas, podemos ver en la siguiente explicación como integrarlo.

Paso 1.- Integra las referencias a los archivos css

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/vendor/zoomify/dist/zoomify.min.js"></script>
<link href="css/vendor/zoomify/dist/zoomify.min.css" rel="stylesheet">

Paso 2.- Crear las etiquetas, pueden ser etiquetas img o divs.

<img src="http://yourshot.nationalgeographic.com/u/ss/fQYSUbVfts-T7Ehj8_lPSALDyndvMSNW9paJ9-zKyhc9WOHwTz_HJZV1PUjKLmZxxfsKxzFlKTfmZvJDie7bugKZJhz0j4GfrgatGr1FIhSZBX_3kPYK3nG_dcxSuosO98066GwetCM2h6dHQzncc5rh_NLVATYunSKedq1kLzVM/" class="img-responsive img-thumbnail zoomify" style="transform: scale(1) translate(0px, 0px);">

Paso 3.- Crear el script que convertirá a todas las imágenes.

$('img.myImage1').zoomify(); // Default settings

Puedes configurar tambien otras opciones que estan disponibles en este plugin, como por ejemplo zoomIn y zoomOut, ademas de esas opciones hay eventos que el plugin maneja: zoom-in.zoomify, zoom-in-complete.zoomify, zoom-out.zoomify, zoom-out-complete.zoomify

http://indrimuska.github.io/zoomify/

The post Efecto Zoom con Zoomify appeared first on Develoteca.

3 Galerías con modal integrado, estos plugins te ayudaran a resolver muchos problemas.

Sin duda una de las características que agrada al usuario internauta es la integración de las diferentes galerías, es por eso que aquí te presentamos 3 interesantes plugins que pueden apoyarte en tu proyecto.

Todos los plugins funcionan con jQuery.

1.- Bootstrap Photo Gallery jQuery

Este es un plugin con un galería responsiva realizada para Bootstrap, esta galería tiene como principal ventaja la visualización de un modal con imagen que se visualiza al presionar cualquier imagen de la galería.

El ejemplo lo puedes ver funcionando en :https://rawgit.com/michaelsoriano/bootstrap-photo-gallery/master/demo.html

La documentación esta en la siguiente dirección: http://michaelsoriano.com/create-a-responsive-photo-gallery-with-bootstrap-framework/

2.- jQuery Poptrox

Este plugin esta realizado para mostrar contenido en un modal, el contenido puede tener la siguiente característica:

1.- YouTube

2.- Vimeo

3.- Wistia

4.- Brightcove

5.- Pistas de Soundcloud

6.- Contenido de iframes

7.-Contenido AJAX

El ejemplo lo puedes ver en la siguiente dirección:

http://htmlpreview.github.io/?https://github.com/n33/jquery.poptrox/blob/master/demo/demo1.html

La documentación esta disponible en: https://github.com/ajlkn/jquery.poptrox

3.- Viewer.js

Es un plugin es un plugin que presenta galerias de fotos de una forma efectiva, la diferencia que existe con este plugin es que tiene unas propiedades que permiten configurar la galería y propiamente las opciones que presenta como por ejemplo:

1.- button
2.-navbar
3.- title
4.- toolbar
5.- tooltop
6.- movable
7.- zoomable
8.- rotatable
9.-scalable
10.- transition
11.- fullscreen
12.- keyboard

El ejemplo funcional lo encuentras en: http://fengyuanchen.github.io/viewerjs/

La documentación para que implementes en tu sitio esta en: https://github.com/fengyuanchen/viewerjs 

The post 3 galerías con modal integrado appeared first on Develoteca.

Carrito de compras simple con jQuery Minicart, html y paypal, Minicart es un plugin de jQuery que integra de forma rápida un carro de compras sin necesidad de usar ningún lenguaje de programación del lado del servidor, en pocas palabras funciona solo con jQuery, se integra de forma muy simple ya que aprovecha la ayuda que paypal brinda “Envio de datos mediante el método post”, sin duda una gran utilidad a la hora de vender productos por internet sin la necesidad de conocer a profundidad el entorno para esta plataforma de pago.

Este plugin se basa en el uso simple de Paypal: https://www.paypal.com/cgi-bin/webscr?cmd=p/xcl/web-accept-to-sc-button-outside

Enlace del plugin con desmotración: http://minicartjs.com/
Enlace de la documentación: https://github.com/jeffharrell/minicart#customization

¿Como se implementa? y ¿que necesitas para implementar este plugin?

1.- Incluir los archivos js, tanto de jQuery y minicart.js

<script src="//cdnjs.cloudflare.com/ajax/libs/minicart/3.0.6/minicart.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2.- Crear los elementos html que contendran la informacion de compra “Productos”, en este caso puedes implementarlo en tu proyecto HTML simple.

<input class="item" type="button" value="200" data-description="Película de Ironman " data-title="ironman II" />
<input class="item" type="button" value="150" data-description="Película de Ironman" data-title="ironman I" />

3.- Posterior a eso implementar mediante un script la creación del carrito de compras

paypal.minicart.render();

4.-  Crear los observadores de eventos tanto del botón ver carrito y el botón agregar a carrito

$('#viewcart').click(function (e) {
e.stopPropagation();
paypal.minicart.view.show();
});
$('.item').click(function (e) {
e.stopPropagation();
paypal.minicart.cart.add({
business: 'uhperezoscar@gmail.com',
item_name: $(this).attr("data-title"),
amount: $(this).attr("value"),
currency_code: 'USD',
});
});

The post Carrito de compras simple con jQuery Minicart, html y paypal appeared first on Develoteca.

Para reconocer la voz usa annyang, una librería javascript muy buena que nos ayuda a realizar eventos con la voz, es decir lo que hace es capturar el sonido de la voz y transformarlo en palabras o frases que posteriormente pueden ser programadas para realizar acciones, el funcionamiento es muy simple ya que no tienes que tener gran conocimiento para implementar la funcionalidad de los comandos, en el siguiente vídeo podrás encontrarte una breve demostración implementada en una galería realizada con bootstrap que al recibir palabras “siguiente” y “anterior” la galería reacciona para mostrar los elementos mencionados, cabe mencionar que el ejemplo esta realizado con asp.net pero el código es html, así que lo puedes realizar hasta en un editor de texto sin la necesidad de instalar visual studio.

Vídeo:

El código te lo encuentras en el siguiente enlace: https://github.com/oscaruhp/jqueryPlugins/blob/master/annyang/HtmlPage1.html 

El ejemplo funcional te lo encuentras en:  http://oscaruhp.github.io/jqueryPlugins/ 

1.- Código de la galería:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Control con voz</title>
   
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<style>.carousel-inner > .item > img,.carousel-inner > .item > a > img {width: 70%;margin: auto;}</style>


</head>

<body>
    


<div class="container">

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
    <!-- Indicators -->

<ol class="carousel-indicators">

<li data-target="#myCarousel" data-slide-to="0" class="active"></li>


<li data-target="#myCarousel" data-slide-to="1"></li>


<li data-target="#myCarousel" data-slide-to="2"></li>


<li data-target="#myCarousel" data-slide-to="3"></li>

    </ol>


    <!-- Wrapper for slides -->

<div class="carousel-inner" role="listbox">

<div class="item active">
        <img src="http://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" width="460" height="345">
      </div>



<div class="item">
        <img src="http://www.w3schools.com/bootstrap/img_chania2.jpg" alt="Chania" width="460" height="345">
      </div>

    

<div class="item">
        <img src="http://www.w3schools.com/bootstrap/img_flower.jpg" alt="Flower" width="460" height="345">
      </div>



<div class="item">
        <img src="http://www.w3schools.com/bootstrap/img_flower2.jpg" alt="Flower" width="460" height="345">
      </div>

    </div>


    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

</div>


  

    <script>
        function anterior() {
            $('#myCarousel').carousel('prev');
            
        }
        function siguiente() {
            $('#myCarousel').carousel('next');
        }
    </script>
</body>

</html>

2.- Código que se debe de incluir para la ejecución de los comandos.

<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.4.0/annyang.min.js"></script>
    <script>
        if (annyang) {
            // Let's define our first command. First the text we expect, and then the function it should call
            var commands = {
                'siguiente': function () {
                    siguiente();
                },
               
                'anterior': function () {
                    anterior();
                },
            };
            annyang.setLanguage('es-MX');
            annyang.addCommands(commands);
            annyang.debug();
            annyang.start({ continuous: false });
        }
</script>

3.- Código final “Galería con voz”

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Control con voz</title>
   
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<style>.carousel-inner > .item > img,.carousel-inner > .item > a > img {width: 70%;margin: auto;}</style>


</head>

<body>
    


<div class="container">

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
    <!-- Indicators -->

<ol class="carousel-indicators">

<li data-target="#myCarousel" data-slide-to="0" class="active"></li>


<li data-target="#myCarousel" data-slide-to="1"></li>


<li data-target="#myCarousel" data-slide-to="2"></li>


<li data-target="#myCarousel" data-slide-to="3"></li>

    </ol>


    <!-- Wrapper for slides -->

<div class="carousel-inner" role="listbox">

<div class="item active">
        <img src="http://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" width="460" height="345">
      </div>



<div class="item">
        <img src="http://www.w3schools.com/bootstrap/img_chania2.jpg" alt="Chania" width="460" height="345">
      </div>

    

<div class="item">
        <img src="http://www.w3schools.com/bootstrap/img_flower.jpg" alt="Flower" width="460" height="345">
      </div>



<div class="item">
        <img src="http://www.w3schools.com/bootstrap/img_flower2.jpg" alt="Flower" width="460" height="345">
      </div>

    </div>


    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

</div>


  

    <script>
        function anterior() {
            $('#myCarousel').carousel('prev');
            
        }
        function siguiente() {
            $('#myCarousel').carousel('next');
        }
    </script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.4.0/annyang.min.js"></script>
    <script>
        if (annyang) {
            // Let's define our first command. First the text we expect, and then the function it should call
            var commands = {
                'siguiente': function () {
                    siguiente();
                },
               
                'anterior': function () {
                    anterior();
                },
            };
            annyang.setLanguage('es-MX');
            annyang.addCommands(commands);
            annyang.debug();
            annyang.start({ continuous: false });
        }
</script>
</body>

</html>

The post Para reconocer la voz usa annyang, una librería javascript muy buena appeared first on Develoteca.

jQuery ImageLens un plugin para lentes de aumento, este plugin nos muestra imágenes con un efecto que aparece al parecer el mouse del ratón, este plugin puede ser muy útil para realizar muestras de elementos con más detalles, también puede servir para mostrar elementos con color, pasando de imagen de color blanco y negro a una imagen de color.

Los ejemplos del plugin puedes encontrártelos en: http://www.dailycoding.com/posts/imagelens__a_jquery_plugin_for_lens_effect_image_zooming.aspx

Lo interesante del plugin es que solo necesita el archivo jquery y el archivo js del plugin agregar algunas instrucciones y listo, tendrás un resultado muy prometedor, el lugar donde puedes usar este plugin es por ejemplo en la venta de ropa, donde el usuario desea ver más de cerca el tipo de tela en la cual la ropa esta construida y como es la tela.

Para tener un idea clara de como usar este plugin, a continuación tienes una explicacion muy breve y explicado por pasos (Recuerda que si quieres más ejemplos puedes visitar la url del autor: http://www.dailycoding.com/posts/imagelens__a_jquery_plugin_for_lens_effect_image_zooming.aspx ):

Paso 1. – Incluye código referencial de jQuery y la librería imageLens.js

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.imageLens.js" type="text/javascript"></script>

Paso 2.- Agrega las etiquetas con el tamaño original del imagen y redimenciona la imagen a un tamaño más pequeño

<img id="img_01" src="http://www.dailycoding.com/Uploads/2011/03/imageLens/sample01.jpg" width="384" height="240" />

Paso 3.- Crea las instrucciones referenciales al elemento img con jQuery y el plugin:

<script>
$("#img_01").imageLens();
</script>

The post jQuery ImageLens un plugin para lentes de aumento appeared first on Develoteca.

Flat picker un plugin para mostrar calendarios en inputs html, aunque la mayoría de los elementos calendario se resuelven con un html input muchas veces no es de un agrado general.

<input type="date" name="bday">

Para manipular el calendario html es necesario tener conocimiento muy especializado en css, buen pues aquí te dejamos un plugin para que uses el calendario de una forma muy amigable, adaptable y compatible con todos los navegadores.

Una de las características que tiene este plugin es la siguiente:

1. Selector de fecha y hora de soporte nativo para móviles
2. iconos SVG fuera de la caja
3. Compatible con jQuery
4. Nuevo analizador DateString
5. Desempeño mejorado Sólo 6 kb minified y gzip
6. Ni una sola dependencia

Sitio: https://chmln.github.io/flatpickr/

1.- Para el uso de este plugin es necesario incluir los siguientes archivos:

<link rel="stylesheet" type="text/css" href="/path/to/flatpickr.css">
<script src="/path/to/flatpickr.js"></script>

2.- Para crear el calendario es necesario utilizar los inputs de la siguiente forma “Para conservar el formato”

<input class=flatpickr data-date-format="d-m-Y">
<input class=flatpickr data-date-format="m/d/Y">
<input class=flatpickr data-date-format="l, F j, Y">

3.- Código jQuery para convertir los inputs en calendarios:

$(".calendar").flatpickr(); // jQuery

En general usar este plugin puede apoyarte a conservar un diseño muy llamativo, para implementar más funcionalidades de este plugin puedes visitar el sitio donde se muestran varios ejemplos de uso: https://chmln.github.io/flatpickr/ la mayoria de los ejemplos son muy claros y sencillos de implementar ya que se hace sobre los elementos input referenciados.

Tiene 23 formas de implementarse en un proyecto web.

The post Flat picker un plugin para mostrar calendarios en inputs html appeared first on Develoteca.

Carrusel responsivo y touch con jQuery y OWL Carousel, sin duda uno de los grandes retos es crear un carrusel responsivo para mostrar contenido en la web, bueno pues no tienes que pensar mucho en realizar este carrusel, que puedes encontrarte con un plugin que tiene resuelto el problema, su nombre es: OWL Carousel JQuery.

Lo que tienes que hacer es entender como aplicarlo a tu sitio web y tener en consideración las propiedades que puedes cambiar.

Lo primero es visitar el sitio: http://owlgraphic.com/owlcarousel/ para poder apoyarte de la documentación, los ejemplos y algunos demostraciones con código que se tienen en el sitio.

En esta implementación vamos a utilizar la inclusión de jQuery algunos estilos y un conjunto de imagenes con texto.

1.- Para iniciar con este plugin incluimos jQuery y el plugin OWL como lo indica la documetación

<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<!-- Default Theme -->
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<!--  jQuery 1.7+  -->
<script src="http://owlgraphic.com/owlcarousel/assets/js/jquery-1.9.1.min.js"></script>
<!-- Include js plugin -->
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>

2.- Colocamos en el body el contenido html que quermos mostrar.

<div id="owl-example" class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  ...
</div>

3.- Crea un script para mostrar dicho contenido.

$(document).ready(function() {
   $("#owl-example").owlCarousel();
 });

Documento final quedaría de la siguiente forma, considerando que el contenido tiene que ser reemplazado por imágenes,texto,etc.

<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<!-- Default Theme -->
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<!--  jQuery 1.7+  -->
<script src="http://owlgraphic.com/owlcarousel/assets/js/jquery-1.9.1.min.js"></script>
<!-- Include js plugin -->
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<body>


<div id="owl-example" class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  ...
</div>
<script>
$(document).ready(function() {
   $("#owl-example").owlCarousel();
 });
</script>
</body>
</html>

The post Carrusel responsivo y touch con jQuery y OWL Carousel appeared first on Develoteca.

Plugin jQuery para crear un Multiselect con Bootstrap, sin duda una de las mejoras opciones que existen para mostrar una lista en un dropdown con opciones multiples, Bootstrap Multiselect tiene la facultad de modificar una etiqueta tipo select y convertirlo en cualquiera de estos ejemplos: http://davidstutz.github.io/bootstrap-multiselect/#further-examples

No es sencillo implementar ya que tiene muchas opciones, pero vamos con la documentación que esta en linea en mucho mas sencillo ver el comportamiento y el código de cada uno de los ejemplos, en este texto no se explicara a detalle la instalación de cada uno de los ejemplos: http://davidstutz.github.io/bootstrap-multiselect/ si no que se explicara la implementación básica toca realiza la implementación utilizando la documentación de los autores.

Para su implementación:

1.- incluimos las referencias del plugin.

<!-- Include Twitter Bootstrap and jQuery: -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
 
<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>

2.- El elemento html (En este caso un elemento select lleno de option)

<!-- Build your select: -->
<select id="example-getting-started" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>

3.- La creación de las referencias del plugin:

<!-- Initialize the plugin: -->
<script type="text/javascript">
    $(document).ready(function() {
        $('#example-getting-started').multiselect();
    });
</script>

The post Plugin jQuery para crear un Multiselect con Bootstrap appeared first on Develoteca.

jQuery Snow, efecto nieve con jQuery un toque navideño, sin duda la época mas fría es el mes de diciembre y con ella se empieza el espíritu navideño, muchos sitios empiezan a buscar opciones especificas como es el caso de los copos de nieve en web, si eres de las personas que esta en esa situación, que ya le encargaron crear el efecto nieve en un sitio, proyecto o aplicación web, la solución la tienes en el siguiente plugin: http://workshop.rs/2012/01/jquery-snow-falling-plugin/

Este plugin puede generar el efecto de nieve de forma rapida, sencilla y sin complicaciones.

Primero que nada tienes que ver el ejemplo para saber lo que vas ha realizar, este ejemplo lo puedes ver en el siguiente enlace:http://workshop.rs/projects/jqsnow/ si estas convencido de usar este plugin vamos a implementarlo de la siguiente forma:

1.-Crea las referencias a los archivos js y jquery (Descargate los archivos en la parte de arriba)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="jquery.snow.js"></script>

2.- Una vez creada la referencia ponemos el siguiente código al final del documento html de la siguiente forma.

$(document).ready( function(){
    $.fn.snow();
});

3.- Si lo que quieres es cambiar la configuración del plugin lo puedes hacer con las siguientes opciones.

//minSize - min size of snowflake, 10 by default
//maxSize - max size of snowflake, 20 by default
//newOn - frequency in ms of appearing of new snowflake, 500 by default
//flakeColor - color of snowflake, #FFFFFF by default
$.fn.snow({ minSize: 5, maxSize: 50, newOn: 1000, flakeColor: '#0099FF' });

The post jQuery Snow, efecto nieve con jQuery un toque navideño appeared first on Develoteca.

elevateZoom para mostrar el zoom de imágenes,es un complemento de zoom de imagen gratuito con opciones para el zoom de ventana, zoom interno, zoom del objetivo.

Este plugin ser distribuye bajo licencia GPL y MIT, es muy sencillo de implementar, la documentación nos permite crear diferentes formas de mostrar el zoom, en la siguiente dirección puedes ver los ejemplos: http://www.elevateweb.co.uk/image-zoom/examples

1.-Para implementar el plugin es necesario incluir primero jQuery y luego el plugin como se hace en el siguiente código:

<script  type="text/javascript" src="jquery.js"></script>
<script src="jquery.elevatezoom.js" type="text/javascript"></script>

2.- incluir un atributo data-zoom-image en tus etiquetas html de img, que tengan la imagen original (la cual sera imagen de zoom):

<img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

3.- colocar el script del plugin que convierte la imagen en una imagen con zoom.

$("#img_01").elevateZoom();

The post elevateZoom para mostrar el zoom de imágenes appeared first on Develoteca.