[ un desarrollo de PATAGONIA CREATIVE ]

Archivos en Categoria: Javascript

  • facelift – Para reemplazar textos por imagenes

    facelift.jpg

    Facelift es otro script que al igual que sIFR (basado en Flash), nos permite remplazar las fuentes (texto) de nuestra web por otras más originales y sin preocuparnos si nuestros usuarios poseen esas “fuentes” cargadas en sus ordenadores personales. Facelift no utiliza flash, sino que remplaza nuestras fuentes por imágenes, lo que puede ser toda una ventaja. Los resultados son realmente buenos y podremos definir colores ó diferentes tipografías para ciertas partes de nuestros textos.

    Fuente infectedfx

  • Easy Slider – Plugin jQuery ideal para tu porfolio

    easyslider.jpg

    Otro agradable plugin jQuery para agregar a nuestra extensa lista. Easy Slider, como llama a este plugin Alen Grakalic, nos permitirá deslizar horizontalmente o verticalmente tanto imágenes como cualquier otro contenido que se nos ocurra. Es completamente configurable tan solo con CSS, lo que permite una integración realmente simple a nuestro sitio. Si desean ver una idea de cómo podrían llegar a implementar Easy Slider en sus porfolios, basta con visitar templatica, otro de los sitios de Alen Grakalic, donde ha logrado integrar Easy Slider de una forma maravillosa.

    Demos

    Mas Info Easy SliderDescarga ejemplos

    Uso:

    1. <script type="text/javascript" src="js/jquery.js"></script>
    2. <script type="text/javascript" src="js/easySlider.packed.js"></script>
    3. <script type="text/javascript">
    4.     $(document).ready(function(){  
    5.         $("#slider").easySlider({
    6.             orientation:'vertical'
    7.         });
    8.     });
    9. </script>

    agregando estilo

    1. /* Easy Slider */
    2.  
    3.     #slider ul, #slider li{
    4.         margin:0;
    5.         padding:0;
    6.         list-style:none;
    7.         }
    8.     #slider, #slider li{
    9.         /*
    10.             define width and height of container element and list item (slide)
    11.             list items must be the same size as the slider area
    12.         */
    13.         width:696px;
    14.         height:241px;
    15.         overflow:hidden;
    16.         }
    17.     span#prevBtn{}
    18.     span#nextBtn{}                 
    19.  
    20. /* // Easy Slider */

    Contenido

    1. <div id="slider">
    2.         <ul>               
    3.             <li><a href="#"><img src="images/01.jpg" alt="Descripcion" /></a></li>
    4.             <li><a href="#"><img src="images/02.jpg" alt="Descripcion" /></a></li>
    5.             <li><a href="#"><img src="images/03.jpg" alt="Descripcion" /></a></li>
    6.             <li><a href="#"><img src="images/04.jpg" alt="Descripcion" /></a></li>
    7.             <<li><a href="#"><img src="images/05.jpg" alt="Descripcion" /></a></li>        
    8.         </ul>
    9.     </div>

    El script automáticamente agregara la navegación “anterior” y “próximo”, pero se le ha asignado un ID (identificación) que pueden utilizar para darle un poco de estilo mediante CSS

    1. <span id="prevId"><a href="javascript:void(0);">Previous</a></span>
    2. <span id="nextBtn"><a href="javascript:void(0);">Next</a></span>

  • Crear un Widget Amazon Books con jQuery y XML

    amazonboxxml.jpg

    Create an Amazon Books Widget with jQuery and XML, un fabuloso tutorial paso a paso que nos permitirá crear un Widget Amazon Books con jQuery y XML, algo así como una caja donde exponer nuestros productos totalmente navegable mediante su carrusel. Inclusive nos permitirá añadir una breve descripción del producto, algo que lo torna mucho más interesante. Requiere de JavaScript y jQuery, esta ultima diseñada para recorrer documentos XML con facilidad, archivo que utilizaremos para actualizar los datos en nuestro widget de productos.

    Ver demoDescarga demo – Mas info Create an Amazon Books Widget
    Uso
    Realizar las llamadas desde nuestro encabezado < head > – Observar que se hace referencia a la ubicación del archivo book.xml, documento que utilizaremos para actualizar los datos de nuestro widgets:

    1. <script language="javascript" type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
    2. <script language="javascript" type="text/javascript" src="js/books.js"></script>
    3. <script language="javascript" type="text/javascript">
    4.  
    5.     $(function(){
    6.         BOOKS.init({
    7.             xmlPath : "data/books.xml",
    8.             imgPath : "images",
    9.             perView : 4
    10.         });
    11.     });
    12.  
    13. </script>

    Un poco de estilo

    1. #books {
    2.     width: 515px; /* optional */
    3. }
    4. #books img {
    5.     border: 0;
    6. }
    7. #books .clear_both {
    8.     clear: both;
    9. }
    10. #books .float_left,
    11. #books  ul li {
    12.     float: left;
    13.     display: inline;
    14. }
    15. #books .float_right {
    16.     float: right;
    17. }
    18. #books .overclear {
    19.     width: 100%;
    20.     overflow: hidden;
    21. }
    22.  
    23. /* styles */
    24.  
    25. #books .buttons {
    26.     position: relative;
    27.     height: 30px;
    28.     margin: 0 0 5px 0;
    29. }
    30. #books .prev {
    31.     position: absolute;
    32.     top: 0;
    33.     left: 0;
    34.     visibility: hidden;
    35. }
    36. #books .next {
    37.     position: absolute;
    38.     top: 0;
    39.     right: 0;
    40. }
    41. #books .showing {
    42.     margin: 5px 60px 0 60px;
    43.     text-align: center;
    44.     font-size: .8em;
    45. }
    46. #books .top {
    47.     background: url(../images/books_top.gif) repeat-x;
    48. }
    49. #books .inner {
    50.     padding: 0 0 0 20px;
    51.     margin: 0 0 -20px 0;
    52.     background: url(../images/books_left_mid.gif) repeat-y;
    53. }
    54. #books  ul {
    55.     margin: 0;
    56.     padding: 0;
    57.     list-style-type: none;
    58.     background: url(../images/books_right_mid.gif) repeat-y top right;
    59. }
    60. #books  ul li {
    61.     display: none;
    62.     position: relative;
    63.     margin: 0;
    64.     padding: 0 20px 20px 0;
    65.     font-size: .8em;
    66.     z-index: 1;
    67. }
    68. #books  ul li.loader {
    69.     display: block;
    70.     float: none;
    71.     height: 115px;
    72.     margin: 0 0 20px -20px;
    73.     background: url(../images/books_loader.gif) no-repeat center center;
    74. }
    75. #books  ul li a.info {
    76.     position: absolute;
    77.     bottom: 20px;
    78.     right: 20px;
    79. }
    80. #books  ul li a.thumb {
    81.     display: block;
    82.     border: 1px solid #ddd;
    83. }
    84. #books  ul li a.thumb img {
    85.     display: block;
    86.     margin: 0;
    87.     padding: 3px;
    88. }
    89. #books .btm {
    90.     background: url(../images/books_btm.gif) repeat-x;
    91. }
    92. .books_tool_tip {
    93.     display: none;
    94.     position: absolute;
    95.     top: 0;
    96.     left: 0;
    97.     width: 350px;
    98.     z-index: 9999;
    99. }
    100. .books_tool_tip .books_pointer_left {
    101.     position: absolute;
    102.     top: 0;
    103.     left: 0;
    104.     width: 10px;
    105.     height: 10px;
    106.     background: url(../images/books_pointer_left.gif);
    107. }
    108. .books_tool_tip .books_pointer_right {
    109.     position: absolute;
    110.     top: 0;
    111.     right: 0;
    112.     width: 10px;
    113.     height: 10px;
    114.     background: url(../images/books_pointer_right.gif);
    115. }
    116. .books_tool_tip .inner {
    117.     border: 1px solid #ddd;
    118.     padding: 15px 15px 3px 15px;
    119.     margin: 0 0 0 9px;
    120.     background: #fff;
    121. }
    122. .books_tool_tip .inner_right {
    123.     margin: 0 9px 0 0;
    124. }
    125. .books_tool_tip .inner p {
    126.     font-size: .8em;
    127.     margin: 0;
    128.     padding: 0 0 12px 0;
    129. }

    Contenido

    1. <div id="books">
    2.         <div class="overclear buttons">
    3.             <a href="#" class="prev"><img src="images/books_prev.gif" width="40" height="30" alt="Previous" /></a>
    4.             <div class="showing"><!-- showing --></div>
    5.             <a href="#" class="next"><img src="images/books_next.gif" width="40" height="30" alt="Next" /></a>
    6.         </div>
    7.         <div class="overclear top">
    8.             <img src="images/books_left_top.gif" width="20" height="20" alt="" class="float_left" />
    9.             <img src="images/books_right_top.gif" width="20" height="20" alt="" class="float_right" />
    10.         </div>
    11.         <div class="inner">
    12.             <ul class="overclear">
    13.                 <li class="loader"><!-- loader --></li>
    14.             </ul>
    15.         </div>
    16.         <div class="overclear btm">
    17.             <img src="images/books_left_btm.gif" width="20" height="20" alt="" class="float_left" />
    18.             <img src="images/books_right_btm.gif" width="20" height="20" alt="" class="float_right" />
    19.         </div>
    20.     </div>

  • Deploy – Una forma fácil de crear la base de tus proyectos web

    deplay.jpg

    Deploy, una aplicación web open source que nos permitirá crear la base de nuestros proyectos web de la forma más simple posible. Básicamente nos permite crear una estructura base, incluyendo archivos y carpetas donde alojaremos nuestras imágenes, plugin jQuery, archivos incluídos, y demás opciones. Es muy simple y no hay mucho que pueda explicar, al ingresar al sitio por primera vez, veremos las opciones que nos ofrece Deploy, simplemente deberemos ir seleccionado aquellas que deseamos agregar a nuestro proyecto, y automáticamente se nos generara un archivo ZIP, listo para ser descargado que contendrá todos los archivos que hemos seleccionado. Sin duda, ya no comenzaras tus proyectos desde cero, nunca más.

    Enlace  Deploy

    Via webmasterlibre

  • s3Slider: slideshows basados en jQuery

    s3slider.jpg

    ¿Aun con ganas de testear más opciones para generar tus “slideshows”? Con s3Slider jQuery plugin tienes una opción mas para agregar a tu extensa lista, un script escrito en jQuery con opciones muy interesantes y efectos muy atractivos. Sin dejar de lado la opción de añadir fragmentos de texto que acompañen nuestras fotos.

    Ver demosdescarga – Via webintentavisual-blast.
    Uso:
    Descargar y alojar los archivos en nuestro servidor, luego realizar la llamada correspondiente desde nuestro “head”

    1. <script type="text/javascript" src="js/jquery.js"></script>
    2. <script type="text/javascript" src="js/s3Slider.js"></script>
    3. <script type="text/javascript">
    4.     $(document).ready(function() {
    5.         $('#slider').s3Slider({
    6.             timeOut: 3000
    7.         });
    8.     });
    9. </script>

    Un poco de estilo CSS – En este caso para el ejemplo N° 1

    1. #slider {
    2.     width: 410px; /* important to be same as image width */
    3.     height: 300px; /* important to be same as image height */
    4.     position: relative; /* important */
    5.     overflow: hidden; /* important */
    6. }
    7. #sliderContent {
    8.     width: 410px; /* important to be same as image width or wider */
    9.     position: absolute;
    10.     top: 0;
    11.     margin-left: 0;
    12. }
    13. .sliderImage {
    14.     float: left;
    15.     position: relative;
    16.     display: none;
    17. }
    18. .sliderImage span {
    19.     position: absolute;
    20.     font: 10px/15px Arial, Helvetica, sans-serif;
    21.     padding: 10px 13px;
    22.     width: 384px;
    23.     background-color: #000;
    24.     filter: alpha(opacity=70);
    25.     -moz-opacity: 0.7;
    26.     -khtml-opacity: 0.7;
    27.     opacity: 0.7;
    28.     color: #fff;
    29.     display: none;
    30. }
    31. .clear {
    32.     clear: both;
    33. }
    34. .sliderImage span strong {
    35.     font-size: 14px;
    36. }
    37. .top {
    38.     top: 0;
    39.     left: 0;
    40. }
    41. .bottom {
    42.     bottom: 0;
    43.     left: 0;
    44. }

    y por ultimo: Nuestra estructura

    1. <div id="slider">
    2.         <ul id="sliderContent">
    3.             <li class="sliderImage">
    4.                 <img src="images/410/3.jpg" alt="3" />
    5.                 <span class="bottom"><strong>Title text 2</strong><br />Content text...</span>
    6.             </li>
    7.             <div class="clear sliderImage"></div>
    8.         </ul>
    9.     </div>

  • Free CSS Drop-Down Menu Framework – Para montar menús desplegables

    200810301512.jpg

    Free CSS Drop-Down Menu, un Framework que nos permitirá montar menús desplegables a nuestros proyectos web de forma sumamente simple. En cuanto a estilos, posee múltiple opciones para adaptarlos lo mejor posible a las estructuras de tus proyectos. Para IE6 necesitas cargar jQuery, incluido también el pack. Sin duda es una muy buena opción para organizar tanto contenido de navegación que puedas llegar a tener. El archivo a descargar posee todos los ejemplos.

    Ver DemosDescarga

    Fuente webmasterlibre | carlosleopoldo

  • Typeface.js – Atractiva opción a sIFR

     

    typ23.jpg

    typeface.js un interesante Script que nos ofrece otra solución para la gestión de tipografías; básicamente nos permitirá utilizar cualquier tipo de fuente en nuestros proyectos, sin preocuparnos si nuestros usuarios la tendrán instalada en sus ordenadores o no. Y todo, sin utilizar Flash, como el popular sIFR que seguramente mucho de ustedes conocerá, con typeface.js bastara con escribir en HTML y CSS como si nuestros usuarios tuvieran la fuente instala localmente. Para comenzar a utilizarlo solo debemos cargar la biblioteca typeface.js y namefont. typeface.js (fuentes q encontraremos en el sitio). Recomiendo que indaguen porque es muy interesante.

    Mas info typeface.jsDemosFonts – Via ajaxian

    1. <script type="text/javascript" src="typeface-0.10.js"></script>
    2. <script type="text/javascript" src="helvetiker_regular.typeface.js"></script>
    3. <div class="myclass typeface-js" style="font-family: Helvetiker">
    4.     Text here in Helvetiker font...
    5. </div>


Pagina 3 de 13123456789...Ultima »