Búsqueda personalizada
noviembre 28, 2008

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

  • carousel.js
  • carousel.css
  • effects.js
  • prototype.js
  • application.css

Descargar

En nuestro encabezado hacemos la llamada a los archivos correspondientes

PLAIN TEXT
JavaScript:

  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

PLAIN TEXT
HTML:

  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.

PLAIN TEXT
JavaScript:

  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. }
  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.

PLAIN TEXT
CSS:

  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. }
  10. #html-carousel .carousel-list li img {
  11. border:1px solid #999;
  12. display:block;
  13. }
  15. #html-carousel {
  16. margin-bottom: 10px;
  17. float: left;
  18. width: 500px;
  19. height: 144px;
  20. }
  22. /* BUTTONS */
  23. #prev-arrow-container, #next-arrow-container {
  24. float:left;
  25. margin: 0px;
  26. padding: 0px;
  27. }
  29. #next-arrow {
  30. cursor:pointer;
  31. }
  33. #prev-arrow {
  34. cursor:pointer;
  35. }
  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. }
Publicado en Galerías,Javascript,scripts | 2 Comments
noviembre 28, 2008

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

1884179144_decc290d10_o.jpg

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  – Descarga Completa Version Oficial – Ver demo oficial

PLAIN TEXT

HTML:
  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

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

Nuestra imagen y nuestro script

PLAIN TEXT
HTML:
  2. <div class=“Photo fn-container” id=“PhotoContainer”>
  3. <img src=“foot/0.jpg” width=“300″ height=“243″ galleryimg=“no”>
  6. /* create the Photo Note Container */
  7. var notes = new PhotoNoteContainer(document.getElementById(‘PhotoContainer’));
  8. /* create a couple of notes, and add them to the container */
  9. var note1 = new PhotoNote(‘boca’,3,new PhotoNoteRect( 180,113,60,60));
  10. note1.onsave = function (note) { return 1; };
  11. note1.ondelete = function (note) { return true; };
  12. var note2 = new PhotoNote(‘nariz’,3,new PhotoNoteRect(259,111,15,15));
  13. note2.onsave = function (note) { return 1; };
  14. note2.ondelete = function (note) { return true; };
  15. notes.AddNote(note1);
  16. notes.AddNote(note2);
  17. function AddNote()
  18. {
  19. var newNote = new PhotoNote(‘Agrega tu texto y acomodalo en una seccion.’,-1,new PhotoNoteRect(10,10,50,50));
  20. newNote.onsave = function (note) { return 1; };
  21. newNote.ondelete = function (note) { return true; };
  22. notes.AddNote(newNote);
  23. newNote.Select();
  24. }
  25. </script>
  26. </div>
Publicado en Fotografía,Javascript,scripts | Responder
noviembre 28, 2008

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.

Demo – Descarga

Uso:

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

PLAIN TEXT
JavaScript:

  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

PLAIN TEXT
HTML:

  1. <p id = “holder”>
  2. <img src = “imagen.jpg” />
  3. </p>
  4. <script type=“text/javascript”>
  5. new Reflect3D(‘holder’);
  6. </script>
Publicado en Javascript,scripts | Responder
Página 2 de 27123451020...Última »
goto top

Novedades