[ un desarrollo de PATAGONIA CREATIVE ]

Archivos en Categoria: Javascript

  • liScroll, muestra mensajes horizontales en movimiento

    Para eso sirve liScroll, un plugin basado en jQuery con el cual podremos trasformar una lista de elementos desordenados en un “desplazador” horizontal, para noticias, eventos, noticias destacadas o lo que queramos. Aquí tenéis una demo. Vamos a ver como implementarlo.

    Lo primero es descargar el script y jquery (usar botón derecho>guardar enlace como en ambos casos) y crear un .html, guardarlo con el nombre que prefiráis. Seguido incluimos las dos librerías entre las etiquetas head /head:

    1. <script type="text/javascript" src="jquery-1.2.1.min.js"></script>
    2. <script type="text/javascript" src="jquery.li-scroller.1.0.js"></script>

    Creamos la estructura para llamar al script, también entre head /head:

    1. <script type="text/javascript">
    2. $(function(){
    3.     $("ul#ticker01").liScroll();
    4. });
    5. </script>

    Y los estilos que nos proporcionan (para cambiar el aspecto esto será lo que modificaremos)

    1. <style type="text/css">
    2. /* liScroll style declarations */
    3.  
    4. .tickercontainer { /* the outer div with the black border */
    5. border: 1px solid #000;
    6. background: #fff;
    7. width: 738px;
    8. height: 27px;
    9. margin: 0 auto;
    10. padding: 0
    11. overflow: hidden;
    12. }
    13. .tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
    14. position: relative;
    15. left: 10px;
    16. top: 8px;
    17. width: 718px;
    18. overflow: hidden;
    19. }
    20. ul.newsticker { /* that's your list */
    21. position: relative;
    22. left: 750px;
    23. font: bold 10px Verdana;
    24. list-style-type: none;
    25. margin: 0;
    26. padding: 0;
    27. }
    28. ul.newsticker li {
    29. float: left; /* important: display inline gives incorrect results when you check for elem's width */
    30. margin: 0;
    31. padding: 0;
    32. background: #fff;
    33. }
    34. ul.newsticker a {
    35. white-space: nowrap;
    36. padding: 0;
    37. color: #ff0000;
    38. font: bold 10px Verdana;
    39. margin: 0 50px 0 0;
    40. }
    41. ul.newsticker span {
    42. margin: 0 10px 0 0;
    43. }
    44. </style>

    Finalmente creamos la estructura html entre body /body:

    1. <ul id="ticker01">
    2.     <li><span>10/10/2007</span><a href="#/ogt/content/news/News183.complete">The first thing that most Javascript programmers</a></li>
    3.     <li><span>10/10/2007</span><a href="#/ogt/content/news/News175.complete">End up doing is adding some code</a></li>
    4.     <li><span>10/10/2007</span><a href="#/ogt/content/news/News177.complete">The code that you want to run</a></li>
    5.     <li><span>08/10/2007</span><a href="#/ogt/content/news/News176.complete">Inside of which is the code that you want to run</a></li>
    6.     <li><span>08/10/2007</span><a href="#/ogt/content/news/News178.complete">Right when the page is loaded</a></li>
    7. </ul>

    Si queremos aumentar o disminuir la velocidad en la que se muestran los elementos, añadiremos la función “travelocity”, quedando de esta manera:

    1. $(function(){
    2.     $("ul#ticker01").liScroll({travelocity: 0.15});
    3. });

    Enlace liScroll (a jQuery News Ticker made easy) 1.0

    Escrito por redactor invitado: Elías Notario
    Blog: diarioTHC

  • Variado DOS: Fuentes free y Slideflow

    Segunda entrega de recursos varios que han aparecido por la red (estas entregas continuarán en el futuro).

    El primero de ellos es un recopilatorio salido de desingvitality con 10 sitios donde descargar infinidad de fuentes gratuitas, de todos los tipos, estilos y tamaños que nos podamos imaginar, cumpliendo todos los sitios la premisa de ser de alta calidad.
    [Enlace: Screw Paying: The 10 Free Font Websites Every Designer Should Save]

    El segundo va de galerías, tema tratado en numerosas ocasiones por nikko. Su nombre es Slideflow, galería basada en javascript y muy similar a ImageFlow, con unos resultados vistosos y no complicada de implementar. Además de todo esto incluye un archivo atn (acciones para photoshop), para poder modificar nuestras imágenes y dejarlas listas para usar en Slideflow.
    [Enlace: AJAX Image Gallery powered by Slideflow (like Cover Flow)]

    Escrito por redactor invitado: Elías Notario
    Blog: diarioTHC

  • Usando MooTools : Agregar info extra en imágenes y generando galerías con lighbox

    mooLabeler, script desarrollado con MooTools que básicamente nos permitirá agregar a nuestras imagen un poco de información extra. El efecto es sencillo, pero agradable. Se activa al pasar nuestro ratón sobre la imagen, generando un efecto de desplazamiento y agregando en la parte inferior el texto que hemos agregado en nuestro atributo “title” que acompaña a nuestra imagen.
    Al bajar los archivos he notado que también nos brinda otro archivo con el cual podremos generar Lightbox agradables utilizando MooTools.
    Agregar info. extra en nuestras imágenes, haciendo uso del atributo “title”. Ver demo

    moolabeler.jpg

    Instalacion:
    Descargamos el script mooLabeler, Y alojaremos los archivos en nuestro servidor.
    Realizar la llamada correspondientes al script, y añadir un poco de css. Copiamos y pegamos el siguiente código dentro de nuestra etiqueta < head >

    1. <style>
    2.             .imageLabel
    3.             {
    4.                 position:relative;
    5.             }
    6.             .divLabel
    7.             {
    8.                 position:absolute;
    9.                 background:#ffffff;
    10.                 border:1px solid #000000;
    11.                 padding: 3px;
    12.                
    13.             }
    14.         </style>
    15.         <script type="text/javascript" src="mootools.release.57.js"></script>
    16.         <script type="text/javascript">
    17.             /**
    18.              * @author Bruno 'Shine' Figueiredo - http://www.brunofigueiredo.com
    19.              * @version 1.0
    20.              */
    21.            
    22.             var mooLabeler = {
    23.                 setup: function()
    24.                 {
    25.                     document.getElements("img").each(function(image){
    26.                         if (image.title && image.title.length > 0)
    27.                         {                                              
    28.                             // attach over event
    29.                             image.onmouseover = mooLabeler.showLabel.bindAsEventListener(image);
    30.                            
    31.                             // attach out event
    32.                             image.onmouseout = mooLabeler.hideLabel.bindAsEventListener(image);
    33.                                                        
    34.                             // create label container
    35.                             var divLbl = new Element("span");
    36.                             divLbl.setProperty("class","divLabel");
    37.                            
    38.                             // set position
    39.                             divLbl.setStyle("top",image.getTop()+parseInt(image.getStyle("height"))-10+"px");
    40.                             divLbl.setStyle("left",image.getLeft()+"px");
    41.                            
    42.                             // set correct size based on borders and padddings
    43.                             var borderL = parseInt(divLbl.getStyle("border-left-width"));
    44.                             var borderR = parseInt(divLbl.getStyle("border-right-width"));
    45.                             var paddingL = parseInt(divLbl.getStyle("padding-left"));
    46.                             var paddingR = parseInt(divLbl.getStyle("padding-left"));
    47.                            
    48.                             var imgW = parseInt(image.getStyle("width"));
    49.                                                                                
    50.                             divLbl.setStyle("width", imgW-((borderL+borderR)+(paddingL+paddingR)) +"px");
    51.                             divLbl.setHTML(image.title);
    52.                             divLbl.injectAfter(image);
    53.                             image.title = "";
    54.                            
    55.                             // sets image and label effects
    56.                             image.efx = {
    57.                                 img : image.effects({duration: 200, transition: Fx.sineOut}),
    58.                                 lbl : divLbl.effects({duration: 200, transition: Fx.sineOut})
    59.                             };
    60.                             divLbl.setOpacity(0);
    61.                         }
    62.                     });
    63.                 },
    64.                
    65.                 showLabel: function()
    66.                 {
    67.                     this.efx.img.clearTimer();
    68.                     this.efx.img.custom({'top': [parseInt(this.getStyle('top')), -10]});
    69.                    
    70.                     this.efx.lbl.clearTimer();
    71.                     this.efx.lbl.custom({'opacity': [parseInt(0), 1]});                
    72.                 },
    73.                
    74.                 hideLabel: function()
    75.                 {
    76.                     this.efx.img.clearTimer();
    77.                     this.efx.img.custom({'top': [parseInt(this.getStyle('top')), 0]});
    78.                    
    79.                     this.efx.lbl.clearTimer();
    80.                     this.efx.lbl.custom({'opacity': [parseInt(this.getStyle('opacity')), 0]});
    81.                 }
    82.             }
    83.            
    84.             window.onload = function(){
    85.                 mooLabeler.setup();
    86.             };
    87.         </script>

    Uso. Aprovechamos nuestro atributo title

    1. <img src="imagen.jpg" class="imageLabel" title="Viste ¡!! Como te lo prometí." />


    Galeria: Generar Lightbox con MooTools.
    Ver demo

    lighbox.jpg

    Instalacion:
    Descargamos el script, Y alojaremos los archivos en nuestro servidor.
    Realizar la llamada correspondientes al script, Copiamos y pegamos el siguiente código dentro de nuestra etiqueta < head >

    1. <script type="text/javascript" src="mootools.release.52.js"></script>
    2.         <script type="text/javascript">
    3.             /**
    4.              * @author Bruno 'Shine' Figueiredo - http://www.brunofigueiredo.com
    5.              * @version 1.0
    6.              */
    7.            
    8.                
    9.             /**
    10.              * Handles the image gallery
    11.              */
    12.             var galleryManager =
    13.             {
    14.                 /**
    15.                  * the overlay html element
    16.                  */
    17.                 objOverlay:null,
    18.                 /**
    19.                  * the gallery html element
    20.                  */
    21.                 objGallery:null,
    22.                 /**
    23.                  * the image container html element
    24.                  */
    25.                 objImageContainer:null,
    26.                 /**
    27.                  * the image html element
    28.                  */
    29.                 objImage:null,
    30.                 /**
    31.                  * overlay opacity effects object
    32.                  */
    33.                 efxOverlay:null,
    34.                 /**
    35.                  * image container opacity effects object
    36.                  */
    37.                 efxImageContainer:null,
    38.                 /**
    39.                  * image container width effects object
    40.                  */
    41.                 efxImageContainerW:null,
    42.                 /**
    43.                  * image container height effects object
    44.                  */
    45.                 efxImageContainerH:null,
    46.                 /**
    47.                  * image effects object
    48.                  */
    49.                 efxImage:null,
    50.                
    51.                 /**
    52.                  * shows the overlay html element
    53.                  */
    54.                 show: function()
    55.                 {
    56.                     this.efxOverlay.custom(0,0.8);
    57.                     this.objGallery.setStyle("display","");
    58.                 },
    59.                
    60.                 /**
    61.                  * hides the overlay html element
    62.                  */
    63.                 hide: function()
    64.                 {              
    65.                     this.efxOverlay.hide();
    66.                 },
    67.                 /**
    68.                  * Setups the gallery
    69.                  */
    70.                 setup: function()
    71.                 {
    72.                     // gets the Body
    73.                     var objBody = document.getElementsByTagName("body").item(0);
    74.                    
    75.                     // creates overlay and sets its properties
    76.                     this.objOverlay = new Element("div");
    77.                     this.objOverlay.id = "overlay";
    78.                     this.objOverlay.setStyle("width",Window.getWidth());
    79.                     this.objOverlay.setStyle("height",Window.getHeight());
    80.                     objBody.appendChild(this.objOverlay);
    81.                    
    82.                     // creates overlay opacity effects
    83.                     this.efxOverlay = this.objOverlay.effect("opacity",{duration:300});
    84.                     this.efxOverlay.hide();
    85.                    
    86.                     // attach click event to overlay
    87.                     this.objOverlay.addEvent("click",galleryManager.close);
    88.                    
    89.                     // creates gallery div
    90.                     this.objGallery = new Element("div");
    91.                     this.objGallery.id = "imgGallery";
    92.                     this.objGallery.setStyle("display","none");
    93.                     objBody.appendChild(this.objGallery);
    94.                     this.objGallery.addEvent("click",galleryManager.close);
    95.                                        
    96.                     // creates image container div inside de gallery div
    97.                     this.objImageContainer = new Element("div");
    98.                     this.objImageContainer.id = "imageContainer";
    99.                     this.objGallery.appendChild(this.objImageContainer);
    100.                     this.objImageContainer.addEvent("click",galleryManager.close);
    101.                     // creates the image container effects
    102.                     this.efxImageContainer = this.objImageContainer.effect("opacity",{duration:300});
    103.                     this.efxImageContainerW = this.objImageContainer.effect("width",{duration:600});
    104.                     this.efxImageContainerH = this.objImageContainer.effect("height",{duration:600, onComplete:function(){
    105.                         galleryManager.efxImage.custom(0,1);}});
    106.                     this.efxImageContainer.hide();
    107.                    
    108.                     // creates the image element inside the imageContainer div
    109.                     this.objImage = new Element("img");
    110.                     this.objImage.id = "img";
    111.                     this.objImageContainer.appendChild(this.objImage);
    112.                     this.objImage.addEvent("click",galleryManager.close);
    113.                     //creates the image effects
    114.                     this.efxImage = this.objImage.effect("opacity",{duration:300});
    115.                     this.efxImage.hide();
    116.                    
    117.                     // gets all images to be handle by this
    118.                     document.getElements("a").each(function(anchor){
    119.  
    120.                         if (anchor.rel.toLowerCase().match("mootoolsgallery"))
    121.                         {                          
    122.                             // attach click event
    123.                             anchor.onclick = galleryManager.loadImage.bindAsEventListener(anchor);
    124.                         }
    125.                     });
    126.        
    127.                 },
    128.                
    129.                 /**
    130.                  * Loads the image viewer
    131.                  */
    132.                 loadImage: function()
    133.                 {
    134.                     galleryManager.show();
    135.                     var imgToLoad = new Image();
    136.                     imgToLoad.onload = function(){
    137.                         galleryManager.objImageContainer.setStyle("top","20px");
    138.                         galleryManager.efxImageContainer.custom(0,1);
    139.                         galleryManager.efxImageContainerH.custom(galleryManager.objImageContainer.offsetHeight,imgToLoad.height);
    140.                         galleryManager.efxImageContainerW.custom(galleryManager.objImageContainer.offsetWidth,imgToLoad.width);
    141.                         galleryManager.objImage.src=imgToLoad.src;
    142.                     };
    143.                     imgToLoad.src = this.href;
    144.                     return false;
    145.                 },
    146.                
    147.                 /**
    148.                  * closes the image viewer
    149.                  */
    150.                 close: function()
    151.                 {
    152.                     galleryManager.efxImage.hide();
    153.                     galleryManager.efxImageContainer.hide();
    154.                     galleryManager.objGallery.setStyle("display","none");
    155.                     galleryManager.hide();
    156.                 }
    157.             }
    158.            
    159.             window.onload = function()
    160.             {
    161.                 galleryManager.setup();
    162.             }
    163.         </script>

    tambien agregamos un poco de estilo

    1. <style type="text/css" media="screen">
    2.             #imgGallery{
    3.                 position: absolute;
    4.                 top: 40px;
    5.                 left: 0;
    6.                 width: 100%;
    7.                 z-index: 100;
    8.                 text-align: center;
    9.                 line-height: 0;
    10.             }
    11.    
    12.             #overlay
    13.             {
    14.                 position: absolute;
    15.                 top: 0;
    16.                 left: 0;
    17.                 z-index: 90;
    18.                 width: 100%;
    19.                 height: 100%;
    20.                 background-color: #000;
    21.                 filter:alpha(opacity=60);
    22.                 -moz-opacity: 0.6;
    23.                 opacity: 0.6;
    24.             }
    25.            
    26.             #imageContainer{
    27.                 position: relative;
    28.                 background-color: #fff;
    29.                 width: 250px;
    30.                 height: 250px;
    31.                 margin: 0 auto;
    32.                 padding:10px;
    33.             }
    34.            
    35.             img{
    36.                 border:none;
    37.             }
    38.            
    39.         </style>

    Uso:

    1. <a href="foto_grande.jpg" rel="mooToolsGallery" title="titulo foto"><img src="Foto_miniatura.jpg"/></a>

    Via anieto2k

  • jquery Hover Sub Tag Cloud – Organizar nubes etiquetas agregando sub contenido dentro de ellas.

    tag-cloud.jpg

    Utilizar las nubes de etiquetas correctamente en nuestro sitio sin duda hará que nuestros visitantes logren visualizar fácilmente los principales temas de nuestro blog. Pero he visto en varios blog que las nube de etiquetas se han convertido en una sección con mas de 200 palabras claves, algo que a veces hace que una simple búsqueda de un tema específico se transforme en todo una travesía, es por ello que en estos casos, opto siempre por guiarme directamente por las categorías.
    Pero, si en el diseño de nuestro blog hemos optado por dejar de lado las categorías para trabajar de lleno con las nubes de etiquetas como referencia de navegación, pero algo que no hemos prevenido era obtener tantas palabras de referencia, una buena opción será organizar estas etiquetas utilizando en cada una de ellas sub-etiquetas. Diciéndolo de otro modo, utilizar en las nubes de etiquetas un tema central que contenga subtemas relacionados. Algo que a menudo solemos utilizar con las categorías agregando subcatgorias.
    Yendo al grano, jquery Hover Sub Tag Cloud será una buena forma de organizar estas etiquetas. Una librería que utilizando jquery nos permitira por un lado reducir o aumentar el tamaño de las palabras claves de la nube de etiquetas, y por otro lado añadir a estas etiquetas una especie de tooltips donde mostraremos los subtemas. Y como es de imaginar, un poco de CSS para personalizar el estilo que deseamos obtener. ver demo

    Instalacion:
    Descargamos el script jquery Hover Sub Tag Cloud, Y alojaremos los archivos que encontraremos dentro en nuestro servidor.
    Y lo segundo que haremos será realizar la llamada correspondientes al script, Copiamos y pegamos el siguiente código dentro de nuestra etiqueta < head >

    1. <script type="text/javascript" src="jquery-1.js"></script>
    2.         <script type="text/javascript" src="hovertip.js"></script>
    3.         <script type="text/javascript">
    4.             // initialize tooltips in a seperate thread
    5.             $(document).ready(function() {
    6.               window.setTimeout(hovertipInit, 1);
    7.              });
    8.         </script>

    Junto con ello también agregaremos la llama a la hoja de estilo, con la cual personalizaremos colores, estilo y demás. Archivo que también encontramos dentro de la carpeta.

    1. <style type="text/css" media="all">@import "css.css";</style>

    Si le realizamos una pequeña mirada a la hoja d estilo veremos lo fácil que es personalizar los tamaños de nuestras fuentes, las cuales formaran parte de las etiquetas, como así también las imágenes utilizadas en nuestros tooltips.

    1. /* classes for tooltips */
    2.  
    3. .hovertip {
    4.     position: absolute;
    5.     display: none; /* in case javascript is disabled */
    6.     width: 270px;
    7.     height:350px;
    8.     background: url('sub-bg.png') no-repeat;
    9.     font-size: 12px;
    10.     z-index: 100;
    11.     margin-left: 5px;
    12.     margin-top: 10px;
    13.     }
    14. .hovertip_target {
    15.                  font-style: italic;
    16. }
    17.  .hovertip_target:hover {
    18.                         text-decoration: none;
    19.                       cursor:help;
    20. }
    21. .nav, .nav * {
    22.     margin:0;
    23.     padding:0;
    24. }
    25. #cloud{
    26.     float: left;
    27.     position:absolute;
    28.     line-height:1.0;
    29.     background: url('bg.gif') no-repeat;
    30.     width:380px;
    31.     height:333px;
    32.     padding:80px 40px 40px 40px;
    33. }
    34. .nav {
    35.     float: left;
    36.     position:absolute;
    37.     line-height:1.0;
    38.     width:310px;
    39.     height:333px;
    40.     padding:0px;
    41. }
    42. .nav ul {
    43.     width:160px;   
    44.     list-style:none;   
    45.     background:#fff; /*IE6 needs this*/
    46. }
    47. .nav li {
    48.     float: left;
    49.     list-style:none;   
    50.     position:relative;
    51. }
    52. .nav a {
    53.     color: #fff;
    54.     text-decoration:none;
    55.     display:block;
    56. }
    57. .nav li ul {
    58.     left:0;
    59.     top:-999em;
    60.     width: 180px;
    61.     padding-top:50px;
    62.     height:190px;
    63.     background: url('sub-bg.png') no-repeat;
    64.     position:absolute;
    65.     list-style:none;
    66.     z-index:100;
    67.     text-align: center;
    68.     }
    69.  
    70.  
    71. ul.hovertip li {
    72.     display:inline;
    73.     list-style:none;
    74. }
    75. ul.hovertip li a{ text-decoration:none; font-style:italic}
    76. ul.hovertip {width:200px; padding-top:30px; padding-left:10px; height:95px; padding-bottom:20px; display:block}
    77.  
    78. a.size1 {
    79.     font-size:25px;
    80.     padding: 10px;
    81.     color:#804D40;
    82. }
    83. a.size1:hover {
    84.     color:#E13728;
    85. }
    86. a.size2 {
    87.     padding: 7px;
    88.     font-size:20px;
    89.     color:#B9251A;
    90. }
    91. a.size2:hover {
    92.     color:#E13728;
    93. }
    94.  
    95.  
    96. a.size3 {
    97.     padding: 5px;
    98.     font-size:35px;
    99.     color:#C4876A;
    100. }
    101.  
    102. a.size3:hover {
    103.     color:#E13728;
    104. }
    105.  
    106. a.size4 {
    107.     padding: 5px;
    108.     font-size:15px;
    109.     color:#B46A47;
    110. }
    111.  
    112. a.size4:hover {
    113.     color:#E13728;
    114. }
    115.  
    116. a.size5 {
    117.     padding: 5px;
    118.     font-size:25px;
    119.     color:#E13728;
    120. }
    121. a.size5:hover {
    122.     color:#B46A47;
    123. }
    124. a.size6 {
    125.     padding: 0px;
    126.     font-size:12px;
    127.     color:#77625E
    128. }
    129. a.size6:hover {
    130.     color:#E13728;
    131. }
    132. a.size-sub1 {
    133.     padding: 20px;
    134.     font-size:12px;
    135.     color:#804D40;
    136. }
    137. a.size-sub1:hover {
    138.     color:#fff;
    139. }
    140. a.size-sub2 {
    141.     padding: 25px;
    142.     font-size:20px;
    143.     color:#E13728;
    144. }
    145. a.size-sub2:hover {
    146.     color:#fff;
    147. }
    148. a.size-sub3 {
    149.     padding: 10px;
    150.     font-size:18px;
    151.     color:#804D40;
    152. }
    153. a.size-sub3:hover {
    154.     color:#fff;
    155. }
    156. a.size-sub4 {
    157.     padding: 15px;
    158.     font-size:25px;
    159.     color:#fff;
    160. }
    161. a.size-sub4:hover {
    162.     color:#E13728;
    163. }

    Y por ultimo la estructura, aquí ya empezaremos a agregar el contenido. Nuestra etiqueta central y las sub-etiquetas dentro de ella. Para de esta forma organizar muy bien todo el contenido de nuestro sitio. Construir una etiqueta que contenga sub-etiquetas, seria algo así.

    1. <div id="cloud">
    2.             <ul class="nav">
    3.            
    4.                 <li>
    5.                     <a class="size1" href="#" id="j1">nombre etiqueta principal</a>
    6.                     <ul style="display: block;" class="hovertip" target="j1">
    7.                         <li><a class="size-sub1" href="#">etiqueta secundaria 1 </a></li>
    8.                         <li><a class="size-sub2" href="#">etiqueta secundaria 2</a></li>
    9.                         <li><a class="size-sub3" href="#">etiqueta secundaria 3</a></li>
    10. etc....
    11.                     </ul>
    12.                 </li>
    13.          
    14.             </ul>
    15.         </div>

    La clase class=”size1″, que puede ser size2, size3, size4, etc. nos permite dar a la etiqueta central un tamaño diferente, para que resalte del resto.

  • ImageFlow, Otra galería en JavaScript para crear tu Coverflow

    imageflow.jpg

    ImageFlow es otra bonita galería basada en JavaScript y la cual por su aspecto sin duda quedaría bien en cualquier proyecto online que tengamos en mente. ImageFlow es muy similar en varios aspectos con MooFlow aunque cuenta con algunas diferencias o algunos agregados. ImageFlow nos permite navegar entre las imágenes utilizando el scroll de nuestro ratón o bien utilizando un sistema de navegación integrado a la galería y el cual moveremos esta vez, de forma manual con nuestro ratón. Esto permite al usuario desplazarse bien entre cada una de las imágenes, yendo de un lado a otro. También se han hecho muchas mejoras con respecto al div contenedor de la galería, lo que garantiza que el desplazamiento producido por nuestro ratón, solo se produzca al estar sobre el div que contiene a la misma. Su utilización es sumamente fácil y los efectos que hacen a la galería muy agradables. ImageFlow y MooFlow son dos galerías que tranquilamente podríamos comparar por su similitud, y ver así, cual de las dos se asemeja mas, a lo que deseamos conseguir para nuestro proyecto online.

    Ver demoDescarga demo
    Instalacion:
    Descargamos el script ImageFlow
    y como es costumbre, lo primero que haremos será realizar la llamada correspondientes al script, Copiamos y pegamos el siguiente código dentro de nuestra etiqueta < head >

    1. <script type="text/javascript" src="js/imageflow.js"></script>

    agregamos un poco de estilo

    1. <style type="text/css">
    2. img {
    3.     position:absolute;
    4.     top:0px;
    5.     border:none;
    6. }
    7. h1 {
    8.     text-align:center;
    9. }
    10. a{
    11.     color:#fff;
    12. }
    13. .none{
    14.     visibility:hidden;
    15. }
    16. .none div{
    17.     display:none;
    18. }
    19. .clear{
    20.     clear:both;
    21. }
    22. #images{
    23.     visibility:hidden;
    24. }
    25. #loading{
    26.     margin-top:50px;
    27.     text-align:center;
    28.     width:100%;
    29. }
    30. #loading img{
    31.     margin-top:10px;
    32.     position:relative;
    33. }
    34. #captions{
    35.     position:relative;
    36.     text-align:center;
    37.     z-index:10000;
    38. }
    39. #scrollbar{
    40.     visibility:hidden;
    41.     position:relative;
    42.     border-bottom:1px solid #b3b3b3;
    43.     z-index:10001;
    44. }
    45. #scrollbar_slider{
    46.     position:absolute;
    47.     margin-top:-7px;
    48.     margin-left:-7px;
    49.     z-index:10002;
    50.     background-image:url(slider.png);
    51.     background-repeat:no-repeat;
    52.     width:14px;
    53.     height:14px;   
    54. }
    55. #imageflow{
    56. background-color:#000;
    57.     margin-left:350px;
    58.     text-align:left;
    59.         color: #fff;
    60. }
    61. </style>

    Por ultimo la estructura de nuestra galeria

    1. <div id="imageflow">
    2.     <div id="loading">
    3.         <b>Loading images</b><br/>
    4.         <img src="loading.gif" width="208" height="13" alt="loading" />
    5.     </div>
    6.     <div id="images">
    7.         <img src="img/img001.png" alt="Image 1" />
    8.         <img src="img/img002.png" alt="Image 2" />
    9.         <img src="img/img003.png" alt="Image 3" />
    10.         <img src="img/img002.png" alt="Image 4" />
    11.         <img src="img/img003.png" alt="Image 5" />
    12.         <img src="img/img001.png" alt="Image 6" />
    13.         <img src="img/img002.png" alt="Image 7" />
    14.         <img src="img/img003.png" alt="Image 8" />
    15.         <img src="img/img002.png" alt="Image 9" />
    16.         <img src="img/img001.png" alt="Image 10" />
    17.     </div>
    18.     <div id="captions"></div>
    19.     <div id="scrollbar">
    20.         <div id="slider"></div>
    21.     </div>
    22. </div>
    23.  
    24. <div class="clear"></div>

  • Crossfader: Script que produce un efecto de desvanecimiento en un cuadro de texto rotando contenido

    crossfader.jpg

    Crossfader.js es una bonita libreria JavaScript que nos permitirá de forma dinámica ir mostrando en un lapso de tiempo determinado diferentes tipos de mensajes. Por ejemplo al estilo de gif animado, solo que aquí mediante Crossfader iremos agregando todo tipo de contenido de forma individual. Usando un poco la imaginación podrás utilizarlo para mostrar todo tipo de contenido que desees, artículos destacados, o publicidad que vaya cambiando cada cierta cantidad de segundos.

    Ver Demo

    Instalacion
    Descargamos el script Crossfader
    y como es costumbre, lo primero que haremos será realizar las llamadas correspondientes al script y hoja de estilos utilizadas. Copiamos y pegamos el siguiente código dentro de nuestra etiqueta < head >

    1. <script type="text/javascript" src="js/bsn.Crossfader.js"></script>

    Nuestro css

    1. <style type="text/css">
    2.  
    3.     div.cf_wrapper
    4.     {
    5.         position: relative;
    6.     }
    7.    
    8.     div.cf_element
    9.     {
    10.         width: 400px;
    11.         height: 250px;
    12.         background-color: #eee;
    13.         border:  1px solid #ccc;
    14.     }
    15.    
    16.     div.cf_element div.content
    17.     {
    18.         padding: 10px;
    19.     }
    20.  
    21.     div.cf_element div.content h3
    22.     {
    23.         padding-top: 0;
    24.         margin-top: 0;
    25.     }
    26.  
    27. </style>

    Por ultimo la estructura con la cual comenzaremos a agregar todo tipo de contenido

    1. <div class="cf_wrapper">
    2.         <div class="cf_element" id="cf1">
    3.           <div class="content">
    4.                 <h3>Titulo 1</h3>
    5.               <p> aqui todo nuestro contenido correspondiente al titulo 1 </p>
    6.             </div>
    7.         </div>
    8.  
    9.  
    10.         <div class="cf_element" id="cf2">
    11.             <div class="content">
    12.                 <h3> Titulo 2</h3>
    13.              <p> Aqui todo nuestro contenido correspondiente al titulo 2 </p>
    14.             </div>
    15.         </div>
    16.        
    17.     </div>
    18.  
    19. <script type="text/javascript">
    20.     var cf = new Crossfader( new Array('cf1','cf2'), 500, 2000 );
    21. </script>

    Como vez cada elemento en el contenido posee un ID que lo identifica ej cf1 o cf2. También puedes ver que al final de la estructura mediante javascript especificamos que elementos deseamos mostrar y por supuesto dar el efecto fade.

    1. new Array('cf1','cf2')

    Pues esto es muy simple, a medida que agregamos mas contenido en la estructura EJ:

    1. <div class="cf_element" id="cf3">
    2.             <div class="content">
    3.                 <h3> Titulo 3</h3>
    4.              <p> Aqui todo nuestro contenido correspondiente al titulo 3 </p>
    5.             </div>
    6.         </div>

    Daremos otro numero al ID que lo identifica, y lo agregaremos en el array tambien

    1. var cf = new Crossfader( new Array('cf1','cf2','cf3'), 500, 2000 );

    Fuente freakgroup

  • MooFlow – Galeria basada en Javascript con aspecto a iTunes de Apple

    mooflow.jpg

    MooFlow. un extraordinario script desarrollado bajo MooTools que nos permitirá crear una galería de imágenes con un aspecto muy agradable. MooFlow posee varias características a favor, una de ellas lo ligero que es, pero lo mas agradable o mejor dicho lo que llamara muy rápido la atención de nuestros ojos, son los bonitos efectos de transición y la forma de visualizar cada una de las imágenes de nuestra galería, Similar en apariencia a iTunes de Apple o Finders CoverFlow. Es compatible con Safari, internet explorer 6 y 7, Firefox (and its mozilla friends), Opera y Camino. Coverflow sin duda es una buena opción para tus proyectos.

    Ver demoDescarga MooFlow Demo Oficial

    Instalacion:

    Descargamos los script: MooFlow.js y mootools.

    Los alojamos en nuestro servidor o en la carpeta deseada y realizamos la llamada a ellos, copiando y pegando el siguiente código dentro de nuestra etiqueta < Head >

    1. <script type="text/javascript" src="mootools-beta-1.2b1.js"></script>
    2. <script type="text/javascript" src="MooFlow.js"></script>
    3. <script type="text/javascript">
    4. //<![CDATA[
    5. /* MooFlow */
    6. var mf;
    7. window.addEvent('load', function(){
    8.     mf = new MooFlow({
    9.         container: 'MooFlow',
    10.         imgContainer: 'images',
    11.         images: '#images img',
    12.         caption: 'captions'
    13.     });
    14. });
    15. //]]>
    16. </script>

    Contenido o estructura de nuestra galería

    1. <div id="MooFlow">
    2.   <div id="images">
    3.     <img src="foto1.jpg" alt="01" title="Esta es mi foto 1" />
    4.     <img src="foto2.jpg" alt="01" title="Esta es mi foto 2" />
    5.     <img src="foto3.jpg" alt="01" title="Esta es mi foto 3" />
    6.     ....etc
    7.   </div>
    8.   <div id="captions"></div>
    9. </div>

    Fuentes Anieto2k | freakgroup


Pagina 9 de 13« Portada...5678910111213