tag:blogger.com,1999:blog-80280055978909056682024-03-21T19:02:30.498-07:00SwipePlanes - jQuery Plugin REMDhttp://www.blogger.com/profile/13427553350356694445noreply@blogger.comBlogger1125tag:blogger.com,1999:blog-8028005597890905668.post-73797203303686857882012-11-10T21:07:00.001-08:002012-11-10T21:08:13.928-08:00SwipePlanes v1.2 - jQuery Plugin Que tal amigos, les traigo mi primera versión estable de este plugin el cual me encuentro desarrollando, espero les sirva de ayuda a aquellos que andan buscando poner en sus sitios un Slider para cualquier tipo de contenido, tamaño y entorno; es totalmente adaptable, fácil de usar, no requiere CSSs externos ni nada parecido, simplemente pongan en las cabecera de su sitio junto a la ultima versión de jQuery, agregamos una linea de código y listo!, un Slider maravilloso 100% compatible con los Eventos Touch de los moviles y a su ves con equipos de escritorio.<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAKNkNnqRQ6-DahYYfHlWwSVEBQSuLeuJpffUV5Zr-j-NJoV84QmXRZNVqB9X-HIoOUe_tNGrgiqAoJgcJCq970jwDtSVaX8YO3GvD6yuc64wZteYJDDBR3Ug7noq6Lr8gRCW-SApfc6U/s1600/demo_img.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAKNkNnqRQ6-DahYYfHlWwSVEBQSuLeuJpffUV5Zr-j-NJoV84QmXRZNVqB9X-HIoOUe_tNGrgiqAoJgcJCq970jwDtSVaX8YO3GvD6yuc64wZteYJDDBR3Ug7noq6Lr8gRCW-SApfc6U/s400/demo_img.png" width="365" /></a></div>
<br />
<br />
Para hacérselos mas sencillo veamos como usarlo: <br />
<br />
Primero que todo necesitamos incluir jQuery, luego nuestro SwipePlanes - jQuery Plugin:<br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;"><script src="jquery-1.8.2.min.js"></script></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;"><script src="jquery.swipeplanes-1.2.js"></script></span></span><br />
<br />
Una vez hecho eso, usamos un selector jQuery para asignarlo y activarlo:<br />
<br />
<span style="font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;"><script></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;"> $('<span style="font-size: x-small;">.</span>mislider').swipePlanes();</span></span><br />
<span style="font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;"></script></span></span><br />
<br />
Y solo resta la estructura html necesaria para que funcione:<br />
<br />
<span style="font-size: x-small;"><span style="font-family: "Courier New", Courier, monospace;"><div <span style="font-size: x-small;">class</span>="mislider" style="height<span style="font-size: x-small;">:</span> 100px; width: 400px;"></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "Courier New", Courier, monospace;"> <div></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "Courier New", Courier, monospace;"> <div><span style="font-size: x-small;">Item 1</span></div></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "Courier New", Courier, monospace;"> <div><span style="font-size: x-small;">Item 2</span></div></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "Courier New", Courier, monospace;"><span style="font-size: x-small;"><span style="font-family: "Courier New", Courier, monospace;"> <div><span style="font-size: x-small;">Item 3</span></div></span></span></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "Courier New", Courier, monospace;"><span style="font-size: x-small;"><span style="font-family: "Courier New", Courier, monospace;"><span style="font-size: x-small;"><span style="font-family: "Courier New", Courier, monospace;"> <div><span style="font-size: x-small;">Item 4</span></div></span></span> </span></span></span> </span><br />
<span style="font-size: x-small;"><span style="font-family: "Courier New", Courier, monospace;"> </div></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "Courier New", Courier, monospace;"></span></span><br />
<span style="font-size: x-small;"><span style="font-family: "Courier New", Courier, monospace;"></div> </span></span><br />
<br />
Solo deben tomar encuenta algunos aspectos:<br />
<br />
1. Deben poner un tamaño fijo para el DIV principal (en el ejemplo observamos que es el que tiene la clase "mislider").<br />
2. Si no especifican un tamaño fijo para los Slide estos se comportaran como lo haria un DIV con un display: inline-block.<br />
3. Pueden usar clases para los Slide, evitando sobre escribir las reglas CSSs display, position y float<br />
4. Tomen encuenta que el plugin crea las paginas necesarias para mostrar todo el contenido, en caso de que el contenido no sobrepase 1 slide, solo les creara 1 slide.<br />
<br />
<b>Descarga el ejemplo:</b><br />
<a href="https://docs.google.com/open?id=0BwftIQcYrJOWTjl2VEZYWlJpUEU">https://docs.google.com/open?id=0BwftIQcYrJOWTjl2VEZYWlJpUEU</a><br />
<br />
<b>Descarga SwipePlanes v1.2:</b><br />
Normal (13 KB): <a href="https://docs.google.com/open?id=0BwftIQcYrJOWTHFvQk8yQlVSY0E">https://docs.google.com/open?id=0BwftIQcYrJOWTHFvQk8yQlVSY0E</a><br />
Minima (7 KB): <a href="https://docs.google.com/open?id=0BwftIQcYrJOWSk9aWU9sTWFvbUU">https://docs.google.com/open?id=0BwftIQcYrJOWSk9aWU9sTWFvbUU</a><br />
<br />
Cualquier consulta hacerla, espero les sea de ayuda, pronto estare subiendo mejoras y nuevas funciones.<br />
<br />
Hasta la proxima!.<br />
<br />
<br />REMDhttp://www.blogger.com/profile/13427553350356694445noreply@blogger.com5