[ un desarrollo de PATAGONIA CREATIVE ]

Archivos en Categoria: Javascript

  • Javascript | Scripts

    22 /05 / 2008 - 6:13 pm

    Publicado por Nikko.

    • 15
    • 1.823

    Social Link

    The Lightbox Clones – Comparación de varios script para generar Lightbox

    lighclones.jpg

    Se que hay script realmente asombrosos, pero uno de los que más suelo ver son aquellos que nos permiten crear Lightbox, sea en un blog o porfolios personales. Y en r3elacion a ellos, debo admitir que cada dia cuesta mas decidir de que forma generarlos. Esto, debido ha que cada dia surgue una nueva librería que nos permite conseguir los mismos resultados. Sea con jQuery, Prototype + Scriptaculous, Mootools, YUI, etc. Quizás la mejor forma de dar con la librería que realmente se ajustara a nuestra necesidades, sea comparando cada una de ellas, con ello, ver cual es la que mejor se adapta a lo que buscamos, y cual lograremos manipular de la mejor forma posible. Pero si no deseas dedicar tiempo probando cada una de ellas, planetOzh ha creado una bonita tabla comparando cada uno de los script donde podrás ver sus características principales con facilidad. Sin duda será muy útil para ayudarte a decir por cual optar, a la hora de diseñar tu porfolio personal.

    Enlace The Lightbox Clones Matrix

    fuente webresourcesdepot

  • Window Growl 2.0 – Enviar mensajes emergentes mediante javascript

    wingrowl.jpg

    Window Growl es un bonito Script diseñado por Daniel Mota que nos permite enviar mensajes emergentes por medio de javascript. Es realmente muy fácil de emplear y sobre todo muy practico. Podemos usarlo creo que para cantidad de cosas, mostrar información personal o adicional, alertas, etc. Debo admitir, me encanto. Por cierto, podemos configurar diversas cosas, por ejemplo: la cantidad de segundos que deseamos se muestren nuestros mensajes emergentes.
    Ver DemoDescarga Ejemplo – Mas informacion Window Growl By Daniel Mota
    Instalacion:
    Realizamos las llamadas correspondientes desde nuestro encabezado

    1. <script type="text/javascript" src="growl/mootools-1.js"></script>
    2. <script type="text/javascript" src="growl/growl-compressed.js"></script>
    3. <link rel="stylesheet" href="growl/css.css" type="text/css">

    Uso:

    1. <a href="#" id="smoke" title="Show msg Smoke">Ver demo Smoke.</a>
    2. <a href="#" id="bezel" title="Show msg Bezel">Ver demo Bezel.</a>
    1. <script type="text/javascript">
    2.         $('smoke').onclick = function() {
    3.             Growl.Smoke({});
    4.             return false;
    5.         };
    6.        
    7.         $('bezel').onclick = function() {
    8.             Growl.Bezel({
    9.                 title: 'Window.Growl<br />By Daniel Mota'
    10.             });
    11.             return false;
    12.         };
    13.         var Log = {
    14.           save: function() {
    15.               new Request.HTML({url:'/log/save'}).post({'refer':document.referrer,'title':document.title});
    16.           }
    17.         };
    18.         Log.save();
    19.     </script>

  • MooRainbow – Crear nuestro propio selector de colores

    rainbow.jpg

    MooRainbow un poderoso Javascript utilizando también mootools que nos permitirá montar en nuestra Web, un bonito selector de colores, donde podremos visualizar y elegir aquellos colores que serán útiles para nuestros proyectos. Inclusive permite una personalización realmente muy fácil, y brinda agradables variantes a la hora de ser utilizado.

    • MooRainbow es completamente personalizable a través de un fichero CSS.
    • MooRainbow mantiene limpio su DOM y genera XHTML y CSS válido
    • MooRainbow proporciona, como contrapartida, un objeto que contiene RGB, HSB y HEX del color seleccionado.
    • MooRainbow es realmente rápido gracias a mootools.
    • MooRainbow funciona bien en Firefox / Safari / Opera / IE

    Ver demoDescarga Demo – Mas info moorainbow

    Instalacion:
    Descargamos los archivos a utilizar (mi demo incluye todo) y realizamos la llamada correspondiente a ellos desde nuestro encabezado.

    1. <script type="text/javascript" src="js/mootools-release.js"></script>
    2. <script type="text/javascript" src="js/mooRainbow.js"></script>

    Incluyendo también el llamado a la hoja de estilo

    1. <link type="text/css" rel="stylesheet" href="mooRainbow.css">

    Ahora debemos crear un nuevo objeto MooRainbow. Lo haremos dentro de nuestra etiqueta < head >

    1. <script type="text/javascript">
    2.     window.addEvent('domready', function() {
    3.     var r = new MooRainbow('myRainbow', {
    4.         'startColor': [58, 142, 246],
    5.         'onChange': function(color) {
    6.             $('myInput').value = color.hex;
    7.         }
    8.     });
    9. });
    10.  
    11. </script>

    Para finalizar, ya podremos insertar nuestra estructura en body. O mejor dicho nuestro selector de colores MooRainbow, donde deseamos mostrarlo en nuestra web. La forma de hacerlo:

    1. <label>
    2.     <img id="myRainbow" src="images/rainbow.png" alt="[r]" width="16" height="16" />
    3.     <input id="myInput" name="myInput" type="text" size="13" />
    4. </label>

    Este selector que acabamos de insertar aquí, es algo así como su versión estándar. En mi demo, seria el ejemplo numero UNO. Una pequeña imagen, que al hacer clic sobre ella abrirá nuestro selector de colores, y un casillero que almacenara los valores Hexadecimal de cada color que hemos seleccionado.
    Pero MooRainbow posee otras variantes, u otra forma de utilizar nuestro selector. Me remitiré solo ha comentar los demos que he creado. Lo que seria el ejemplo DOS de mi demo. Básicamente, una imagen que nuevamente abrirá nuestro selector de colores (pro cierto, esta vez mucho mas pequeño), pero evitando almacenar en un casillero los valores hexadeciamles generados al seleccionar cada color. Lo que significa, que si deseamos un color o el valor de un tono, lo obtendremos directamente copiándolo desde el mismo selector, ya que posteriormente no quedara almacenados en ningún casillero. De todas sigue siendo muy útil, al acostumbrarnos, y es otra buena opción, dependiendo el fin que deseamos darle a cada uno de estos selectores en cuestión.
    Instalacion ejemplo DOS:
    Si bien al comienzo hemos realizado la llamada a un fichero css, esta vez necesitaremos insertar unas líneas más de css para este demo. El código lo encontraran aquí.
    Una vez agregado las líneas de código css nuevas, nuevamente necesitaremos crear un objeto desde nuestro encabezado. Dentro de nuestra etiqueta < Head >

    1. <script type="text/javascript">
    2. window.addEvent('domready', function() {
    3. var demo3 = new MooRainbow('demo3', {
    4.     id: 'myDemo3',
    5.     imgPath: 'images/'
    6.     });
    7. });
    8. </script>

    y por ultimo, la imagen que abrirá nuestro selector de colores en nuestro contenido

    1. <label>
    2.     <img id="demo3" src="images/rainbow.png" rainbow.png" alt="[r]" width="16" height="16" class="rain" id="demo3" />
    3.     Click en el arco iris para abrir la paleta de colores miniatura
    4. </label>

    De todas formas, podrán ver y probar desde el demo a descargar

  • How To Page Peel Effect – Agregar efectos creativos a las esquinas de tu web

    peeleffect.jpg

    How To Page Peel Effect, es un agradable efecto que solemos ver en mas de una Web. El mismo consiste en un efecto que se produce al pasar nuestro ratón sobre la esquina superior de nuestra web, algo similar al doblar una hoja de papel, y en el cual podremos agregar información extra o publicidad creativa. How To Page Peel Effect se logra a partir de javascript + imágenes + .sfw (flash). Por lo general estos script suelen ser de pago, es mas, en una oportunidad los necesite y debo admitir que en su momento no encontré ninguno gratuito en la red. Por suerte hoy, podremos encontrar en hongkiat este script totalmente gratuito, y a ellos le sumaremos otras alternativas que acabo de ver en Diariothc.

    Descarga y mas Info: Create A Peel Away Effect On Website [How To]

    Otros script alternativos:

  • iBox v2.13 – Otra alternativa para generar Lightbox

    ibox.jpg

    iBox v2.13 , un “ligero, rápido y flexible” Lightbox para tus proyectos.

    Ver demosDescarga

    Es compatible con los siguientes tipos de contenido:
    Imágenes
    Soporta las imágenes mostrándolas en una ventana flotante, como se caracteriza a todo Lightbox y automáticamente se ajusta a la ventana del navegador.
    Documentos
    Muestra los documentos vinculados de manera similar como las imágenes.
    Inline Contenedores
    IBox también puede mostrar los contenedores (por ejemplo DIVs ocultos) dentro de la misma página.
    Video de YouTube (Flash Video)
    IBox soporta la utilización de otros plugins. Los vídeos de YouTube se ofrecen como un ejemplo para que los desarrolladores logren hacer sus propios plugins.

    Gracias Luciana 

  • Mootools Styled Scrollbar – Dar estilo a la barra de desplazamiento de nuestros scrollbar

    styledscrollbar.jpg

    Pequeña pieza de javascript que crea un agradable Estilo para las barras de desplazamiento de nuestros scrollbar, utilizando Css y Mootools. Las barras de desplazamiento se pueden presentar con un estilo horizontal y / o vertical.

    Ver demoDescarga Ejemplo – Mas info Mootools CSS Styled Scrollbar

    No explico los pasos para usarlo, porque con el demo que arme y que pueden descargar es suficiente. Recuerden que también es necesario un poco de CSS y Mootools, en el ejemplo a descargar, se encuentra todo lo que necesitaran.
    El javascript

    1. <script type="text/javascript">
    2.             /* <![CDATA[ */
    3.            
    4.             function makeScrollbar(content,scrollbar,handle,horizontal,ignoreMouse){
    5.                 var steps = (horizontal?(content.getScrollSize().x - content.getSize().x):(content.getScrollSize().y - content.getSize().y))
    6.                 var slider = new Slider(scrollbar, handle, {   
    7.                     steps: steps,
    8.                     mode: (horizontal?'horizontal':'vertical'),
    9.                     onChange: function(step){
    10.                         // Scrolls the content element in x or y direction.
    11.                         var x = (horizontal?step:0);
    12.                         var y = (horizontal?0:step);
    13.                         content.scrollTo(x,y);
    14.                     }
    15.                 }).set(0);
    16.                 if( !(ignoreMouse) ){
    17.                     // Scroll the content element when the mousewheel is used within the
    18.                     // content or the scrollbar element.
    19.                     $$(content, scrollbar).addEvent('mousewheel', function(e){ 
    20.                         e = new Event(e).stop();
    21.                         var step = slider.step - e.wheel * 30; 
    22.                         slider.set(step);                  
    23.                     });
    24.                 }
    25.                 // Stops the handle dragging process when the mouse leaves the document body.
    26.                 $(document.body).addEvent('mouseleave',function(){slider.drag.stop()});
    27.             }
    28.                        
    29.             window.addEvent('domready', function(){            
    30.                 // -- first example, vertical scrollbar --
    31.                 makeScrollbar( $('content1'), $('scrollbar1'), $('handle1') );
    32.                 // -- second example, horizontal scrollbar --
    33.                 makeScrollbar( $('content2'), $('scrollbar2'), $('handle2'), true );
    34.                 // -- third example, horizontal and vertical scrollbars
    35.                 makeScrollbar( $('content3'), $('scrollbar3'), $('handle3'), false );
    36.                 makeScrollbar( $('content3'), $('scrollbar4'), $('handle4'), true, true ); 
    37.             });
    38.             /* ]]> */
    39.         </script>

  • Javascript image gallery

    jagallery.jpg

    JavaScript image gallery, una galería en javascript y escrito en jQuery que posee realmente un aspecto muy agradable. Carga las imágenes una a una, seleccionándolas desde un panel inferior desde sus miniaturas. Mediante la hoja de estilo galleria.css es realmente fácil personalizarla en caso de desearlo. No tengo duda que esta agradable galería, podrá ser una buena base para crear sus propias galerías con diseños realmente asombrosos.

    Ver Demo 1 – Ver Demo 2Descarga – Mas info monc


Pagina 6 de 13« Portada...2345678910...Ultima »