[ un desarrollo de PATAGONIA CREATIVE ]

Archivos en Categoria: Scripts

  • Javascript | Scripts

    07 /11 / 2007 - 1:18 am

    Publicado por Nikko.

    • 15
    • 1.555

    Social Link

    3D image reflection – Javascript para dar reflejos 3D a nuestras imágenes

     

    reflecxion.jpg

    3d image reflection un discreto Javascript que mediante prototype + script.aculo.us nos permitirá dar reflejos a nuestras imágenes y evitar con esto tener que perder tiempo editándolas de forma individual. Su utilización es realmente muy sencilla y lso resultados realmente agradables. Probado en Firefox, Opera e IE. Preloading en imágenes antes de la reflexión.

    DemoDescarga

     

    Uso:

    en nuestro encabezado dentro de las etiquetas < Head > incluir prototype, script.aculo.us y el script reflexión

     

     

    1. <script src="javascript/prototype.js" type="text/javascript"></script>
    2.  <script src="javascript/scriptaculous.js?load=builder" type="text/javascript"></script>
    3. <script src="javascript/reflection.js" type="text/javascript"></script>

    contenido

    1. <p id = "holder">
    2.         <img src = "imagen.jpg" />
    3.     </p>
    4.     <script type="text/javascript">    
    5.         new Reflect3D('holder');
    6.     </script>

    Via Anieto2k

  • Fotonotes – JavaScript para agregar notas en imágenes online al estilo Flickr

    Photo Notes es una librería JavaScript que nos permite agregar pequeñas notas a nuestras imágenes al estilo Flickr, pero lo mejor es que nos permite visualizar en tiempo real, actualizar, y manipular nuestras notas online.

    Ver demo - Descarga Completa Version Oficial – Ver demo oficial

    Descarga JavaScript – PhotoNotes.js
    Descarga CSS – PhotoNotes.css

    Utilizando el código es bastante sencillo: En nuestro ejemplo..demo

    En nuestro encabezado

    1. <script src="foot/PhotoNotes.js" type="text/javascript"></script>
    2. </p>
    3. <link href="foot/PhotoNotes.css" rel="stylesheet" type="text/css">

    Estructura
    Boton agregar texto

    1. <input name="button" type="button" style="margin-left: 30px;" onClick="AddNote();" value="agregar texto" />

    Nuestra imagen y nuestro script

    1. <br>
    2.             <div class="Photo fn-container" id="PhotoContainer">
    3.                 <img src="foot/0.jpg" width="300" height="243" galleryimg="no">
    4.             <br>
    5.             <script>
    6.                 /* create the Photo Note Container */
    7.                 var notes = new PhotoNoteContainer(document.getElementById('PhotoContainer'));
    8.                
    9.                 /* create a couple of notes, and add them to the container */
    10.                 var note1 = new PhotoNote('boca',3,new PhotoNoteRect( 180,113,60,60));
    11.                 note1.onsave = function (note) { return 1; };
    12.                 note1.ondelete = function (note) { return true; };
    13.                
    14.                 var note2 = new PhotoNote('nariz',3,new PhotoNoteRect(259,111,15,15));
    15.                 note2.onsave = function (note) { return 1; };
    16.                 note2.ondelete = function (note) { return true; };
    17.                
    18.                 notes.AddNote(note1);
    19.                 notes.AddNote(note2);
    20.                
    21.                 function AddNote()
    22.                 {
    23.                     var newNote = new PhotoNote('Agrega tu texto y acomodalo en una seccion.',-1,new PhotoNoteRect(10,10,50,50));
    24.                     newNote.onsave = function (note) { return 1; };
    25.                     newNote.ondelete = function (note) { return true; };
    26.                     notes.AddNote(newNote);
    27.                     newNote.Select();
    28.                 }
    29.                
    30.        
    31.             </script>
    32. </div>

  • Prototype Carousel Class

    Prototype Carousel Class, Una excelente galería carrusel basada en la de Bill Scott’s Carousel component., esta vez utilizando Prototype/script.aculo.us.

    Esta versión (0.26) incluye:

    • Actualizacion con script.aculo.us
    • ScrollTo (0,25) (gracias a Stéphane Brun)
    • Ajax manejador ( “antes”, “después”)
    • Animación ( “antes”, “después”)
    • Ajax o contenido estático
    • Orientación horizontal
    • Y más … :)

    Lo archivos que necesitamos descargar para crearla VER DEMO

    En nuestro encabezado hacemos la llamada a los archivos correspondientes

     

    1. <script src="js/prototype.js" type="text/javascript"></script>
    2. <script src="js/effects.js" type="text/javascript"></script>
    3. <script src="js/carousel.js" type="text/javascript"></script>
    4. <link href="css/carousel.css" media="all" rel="Stylesheet" type="text/css">
    5. <link href="css/application.css" media="all" rel="Stylesheet" type="text/css">

    A continuación el código HTML, JS y también la inhabilitación de los botones de las funciones de animación y el CSS, para este carrusel

    1. <div id="prev-arrow-container">
    2.   <img id="prev-arrow-small" class="left-button-image" src="/images/left-enabled.gif"/>
    3. </div>
    4. <div class="carousel-component" id="small-carousel">
    5.   <div class="carousel-clip-region">
    6.     <ul class="carousel-list">
    7.       <li><img alt="Image1" src="/images/small_icons/image1.png" /></li>
    8.       <li><img alt="Image2" src="/images/small_icons/image2.png" /></li>
    9.      <li><img alt="Image1" src="/images/small_icons/image3.png" /></li>
    10.       <li><img alt="Image2" src="/images/small_icons/image4.png" /></li>
    11.      <li><img alt="Image1" src="/images/small_icons/image5.png" /></li>
    12.       <li><img alt="Image2" src="/images/small_icons/image6.png" /></li>
    13.       ...etc etc
    14.     </ul>
    15.   </div>
    16. </div>
    17. <div id="next-arrow-container" >
    18.     <img id="next-arrow-small" class="right-button-image" src="/images/right-enabled.gif"/>
    19. </div>
    20. <script type="text/javascript">
    21.   Event.observe(window, "load", initCarousel);
    22.   function initCarousel() {      
    23.     var carousel = new Carousel("ajax-carousel",  {url: "/update", buttonStateHandler: buttonStateHandler, animParameters: {duration: 0.5}});
    24.   }
    25. </script>

    En caso de que deseemos hacer uso de otras funciones (esto es opcional), Javascript para habilitar o deshabilitar los botones de transición.

    1. function buttonStateHandler(button, enabled) {
    2.  if (button == "prev-arrow")
    3.    $('prev-arrow').src = enabled ? "images/left3-enabled.gif" : "images/left3-disabled.gif"
    4.  else
    5.    $('next-arrow').src = enabled ? "images/right3-enabled.gif" : "images/right3-disabled.gif"
    6. }
    7.  
    8. function animHandler(carouselID, status, direction) {
    9.   var region = $(carouselID).down(".carousel-clip-region")
    10.   if (status == "before") {
    11.     Effect.Fade(region, {to: 0.3, queue: { position:'end', scope: "carousel" }, duration: 0.2})
    12.   }
    13.   if (status == "after") {
    14.     Effect.Fade(region, {to: 1, queue: { position:'end', scope: "carousel" }, duration: 0.2})
    15.   }
    16. }

    Esto es sólo una porcion de las opciones predeterminadas en carousel.css, y el cual podremos modificar a nuestro antojo.

    1. #html-carousel .carousel-list li {
    2.     width: 106px;
    3.     border: 0px solid green;
    4.     padding: 10px;
    5.     padding-top:  15px;
    6.     margin: 0;
    7.     color: #3F3F3F;
    8. }
    9.  
    10. #html-carousel .carousel-list li img {
    11.     border:1px solid #999;
    12.     display:block;
    13. }
    14.  
    15. #html-carousel {
    16.     margin-bottom: 10px;
    17.     float: left;
    18.     width: 500px;
    19.     height: 144px;
    20. }
    21.  
    22. /* BUTTONS */
    23. #prev-arrow-container, #next-arrow-container {
    24.     float:left;
    25.     margin: 0px;
    26.     padding: 0px;
    27. }
    28.  
    29. #next-arrow {
    30.     cursor:pointer;
    31. }
    32.  
    33. #prev-arrow {
    34.     cursor:pointer;
    35. }
    36.  
    37. /* Overlay */
    38. #overlay {
    39.   width: 200px;
    40.   height: 80px;
    41.   background-color:  #FFF;
    42.   position: absolute;
    43.   top: 25px;
    44.   left: 150px;
    45.   padding-top: 10px;
    46.   z-index: 100;
    47.   color: #000;
    48.   border:1px dotted #000;  
    49.     text-align: center;
    50.     font-size: 24px;
    51.   filter:alpha(opacity=80);
    52.     -moz-opacity: 0.8;
    53.     opacity: 0.8;
    54. }

  • Videobox, muestra videos en dialogo externo

    Seguro que casi todos conocéis el script Lightbox (del que también hay plugin para wordpress) con el cual se pueden mostrar imágenes en un dialogo externo a la página, muy útil por lo “limpio” de los resultados en vez de tener que hacerlo con un tosco pop-up. Videobox hace exactamente lo mismo pero para videos, es tan parecido a Lightbox que está basado en él y está hecho con la misma librería, mootools, añadiendo el uso de swfobject para gestionar los vídeos. La instalación es simple, descargar los archivos necesarios, llamarlos desde el header y usar añadiendo en el enlace a las imágenes la etiqueta rel=”vidbox”. En la página viene explicado, si no sabes ingles con el traductor de google será suficiente para entender lo que dicen. Se puede usar con vídeos de YouTube, Metacafe, Google Video e iFilm.

    Enlace: Videobox: Lightbox for videos, Youtube, Metacafe, Google Video, iFilm

  • FrogJS – Galería en Javascript

    FrogJS es una simple librería Javascript que nos permitirá crear una simple galería de imágenes. Su simpleza quizás nos puede engañar, ya que detrás de ella se esconden bonitos efectos de transición que la hacen muy agradable. FrogJS no es un sustituto de otras galerías en las cuales podremos mostrar miniaturas en imágenes como Lightbox JS, sino una manera distinta de crear presentación de imágenes a través de galerías.

    Instalacion:

    1. Descargar FrogJS v1.1, descomprimir y subir los archivos a tu servidor web.
    2. En nuestro header hacemos la llamada a los archivos que necesitaremos para la galería.

    1. <script src="scripts/prototype.js" type="text/javascript"> </script>
    2. <script src="scripts/scriptaculous.js?load=effects" type="text/javascript"> </script>
    3. <script src="scripts/frog.js" type="text/javascript"> </script>

    Ahora solo basta insertar nuestro código html para crear la galería en miniatura. Podremos utilizar tantas imágenes como lo deseemos.

    1. <div id="FrogJS">
    2.     <a href="images/1.jpg" title="mi web" rel="http://www.xyberneticos.com">
    3.         <img src="images/1_thumb.jpg" alt="Caption" />
    4.     </a>
    5.     <a href="images/2.jpg" title="Credit">
    6.         <img src="images/2_thumb.jpg" alt="logos" />
    7.     </a>
    8. </div>

  • JQuery: jqGalScroll 2.0 (Galería de fotos)

    jQuery jsGalScroll es un Plugin que nos permitirá agrupar imágenes y convertirlas en una especie de galería de fotos con paginación.

    Ver DemoDescarga Ejemplo

    En nuestro encabezado

     

    1. <script type="text/javascript" src="jquery-latest.pack.js"></script>
    2. <script type="text/javascript" src="jquery.easing.1.2.js"></script>
    3. <script type="text/javascript" src="jqGalScroll.js"></script>
    4. <style type="text/css" media="screen">
    5.         @import url(jqGalScroll.css);
    6. </style>
    7. <script type="text/javascript">
    8.     $(document).ready(function(){
    9.         $("ul.jqGalScroll").jqGalScroll({height:268,width:400,ease:'easeInOutCubic',speed:1000});
    10.     });
    11. </script>

    Nota: En height (alto)y width (ancho) podremos configurar el tamaño que tendrán las imágenes.
    En “speed” la velocidad de transición entre las imágenes.

    Ya en nuestro contenido, agregamos nuestras imágenes y una pequeña descripción de cada una de ellas.

    1. <ul class="jqGalScroll">
    2.            <li><img src="common/img/alamos_en_otonio.jpg" alt="Alamos en Otoño" /></li>
    3.         <li><img src="common/img/chapelco_verano.jpg" alt="Chapelco - San Martin de los Andes - Verano" /></li>
    4.         <li><img src="common/img/gch_chapelco12.jpg" alt="Chapelco bajo Nieve" /></li>
    5.         <li><img src="common/img/ch_rafting01.jpg" alt="El rafting en la zona" /></li>
    6.         <li><img src="common/img/foto.jpg" alt="Naturaleza en Neuquen - Argentina" /></li>
    7.        
    8. </ul>

  • 5 bonitos Scripts para tus proyectos web

    Algunos bonitos script para implementar en varios de tus proyectos web y hacer tus proyectos muchos más interactivos. Esta lista fue seleccionada por simplex-media y la he visto gracias a rubendomfer.

    ReMooz

    ReMooz es otra forma de implementar a nuestras Web los famosos lightbox, inclusive con algunas cositas extras. ReMooz nos permite visualizar una imagen miniatura, al hacer click sobre una de ella, verla en tamaño normal o completo. Lo genial es que estas nuevas ventanas que se abren (mostrando la imagen), pueden ser acomodadas en diferentes partes de la pantalla moviéndolas con el ratón, e inclusive podremos abrir varias imágenes a la misma vez, algo que con otros sistemas de lightbox a veces no podemos hacer.

    Lenguaje: JS/CSS
    Framework: MooTools
    Demo: ReMooz Demo
    Web: ReMooz Project Page

    Coda-Slider

    Coda-Slider, nos permite Mostar el contenido de nuestra Web de una forma completamente diferente, con un bonito sistema deslizante. La interactividad se logra mediante Tab basados en scroller. JQuery que nos permite también utilizar un sistema de navegación en los laterales, utilizando el ratón. Coda-Slider es sin duda una forma interesante a tener en cuenta si lo que buscas es dar a tu Web algo completamente diferente. Las características de Coda-Slider, se basan en la Web de Coda.

    Lenguaje: JS/CSS
    Framework: jQuery
    Demo: Coda-slider Demo
    Web: Coda-slider Project Page

    35mm Photo Viewer

    Si buscamos herramientas con las cuales crear nuestra galería de imágenes, a estas alturas puede que se torne difícil elegir con que implementarlas. Seguro que debido a que son tantas las opciones que encontraremos, y todas ellas, una es más increíble que otra. En fin 35mm Photo Viewer será otra opción a tener en mente, posee un gran número de skin, su carga es realmente muy rápida, posee la función de realizar búsquedas, así como un sistema de indexación de la página. Actualizarla también es muy sencillo. Compatible con IE5-7, Safari, Firefox y Netscape 7.

    Lenguaje: DHTML/CSS/XMLST
    Demo: 35mm Demo
    Web: 35mm Project Page

    Autocompleter

    Autocompleter es una librería que nos permite agregar a nuestros formularios un sistema de autocompletado de palabras a medida que se van escribiendo.

    Lenguaje:XHTML/JSON JavaScript
    Framework: MooTools
    Demo: Autocompleter Demo
    Web: Autocompleter Project Page

    yShout

    yShout es un script que nos permite insertar a nuestro blog un sistema de Chat basado en Ajax. Lo bueno es que nos permite configurar cantidad de cosas, tanto en funcionalidad como en diseño del mismo, pero lo mejor aun es que es fácil de instalar, y no utiliza base de datos. Lo malo es que para descargarlo primero necesitaremos dar una donación a quien lo ha creado. Pero el trabajo que se le ha dedicado a su desarrollo lo vale.

    Lenguaje: PHP/AJAX
    Demo: yShout Live Example
    Web: yShout Project Page


Pagina 23 de 25« Portada...10...171819202122232425