[ un desarrollo de PATAGONIA CREATIVE ]
Email Facebook Rss

Archivos en Categoria: Galerias

  • Diseño Web | Galerias | Javascript | Scripts

    29 /02 / 2008 - 6:01 pm

    Publicado por Nikko.

    • 15
    • 7.713

    Social Link

    Image transition manager, Agregar bonitas transiciones a nuestras imágenes

    image-transition.jpg

    The image transition manager, una biblioteca javascript basada en scriptaculous y prototype, que nos brinda otra opción para lograr bonitas transiciones en nuestras imágenes. Soporta transiciones como fading( desvanecimiento), appearing (que aparecen de la nada), Sliding (deslizamiento), growing and shrinking (reducción o viceversa).
    Características:

    • 8 (más por venir), efectos de transición
    • Imagen de precarga visible
    • Unobstrusive javascript
    • Fácil de implementar cada Transición
    • Probado en Firefox, Opera y IE6 / 7
    • No usa CSS, pero claro, será útil para darle un estilo mas agradable.

    VER DEMO - DESCARGA
    Comenzar a Usar:
    Como este javascript se basa en prototype y script.aculo.us, es necesario que realicemos las llamadas a ellos desde nuestro encabezado. < head >…
    Nota: ya que existen algunos problemas con la compatibilidad de scriptaculous 1,7 y prototype 1.5.1.1, se ha utilizado la versión 1.5.1.1 de prototype y 1.7.3 beta de scriptaculous. Se incluyen en el paquete de descarga.

    PLAIN TEXT
    JavaScript:
    <script src="javascript/prototype.js" type="text/javascript"></script>
    <script src="javascript/scriptaculous.js?load=effects" type="text/javascript"></script>

    Después de esto, es hora de incluir nuestro javascript que nos permitirá lograr las transiciones.

    PLAIN TEXT
    JavaScript:
    <script src="javascript/transition.js" type="text/javascript"></script>

    Agregamos la navegación para nuestras imágenes mediante hipervínculos, y añadiremos también el atributo “rel” donde especificaremos que transición deseamos para cada una de ellas Ej: rel="transition[blinddown]"

    PLAIN TEXT
    HTML:
    <ul>
    <li><a href="image1.jpg" rel="transition[switchoff]">image1.jpg</a></li>
    <li><a href="image2.jpg" rel="transition[slidedown]">image2.jpg</a></li>
    <li><a href="image3.jpg" rel="transition[blinddown]">image3.jpg</a></li>
    <li><a href="image4.jpg" rel="transition[slideright]">image4.jpg</a></li>
    <li><a href="image5.jpg" rel="transition[appear]">image5.jpg</a></li>
    <li><a href="image6.jpg" rel="transition[switch]">image6.jpg</a></li>
    <li><a href="image7.jpg" rel="transition[blinddown]">image7.jpg</a></li>
    <li><a href="image8.jpg" rel="transition[grow]">image8.jpg</a></li>
    <li><a href="image9.jpg" rel="transition[shrink]">image9.jpg</a></li>
                </ul>

    Creamos un div-elemento en el que tendrán lugar las transiciones

    PLAIN TEXT
    HTML:
    <div id="holder" style="border: 5px solid #999; width: 640px; height: 480px;float:left">
                    <img src="image1.jpg" />
                </div>

        <script type="text/javascript">
            oTransition = new Transition( 'holder', 'image1.jpg' );
        </script>

  • Diseño Web | Galerias | Javascript | Scripts

    17 /02 / 2008 - 9:06 pm

    Publicado por Nikko.

    • 15
    • 4.320

    Social Link

    mooSlideBox v3 – Otra forma de crear lightbox

    mooslidebox.jpg

    mooSlideBox v3 un pequeño script que podremos usar como extensión o bien como reemplazo del tradicional "lightbox". Creo que entonces es fácil deducir que mooSlideBox v3 nos permitirá lograr un efecto similar al logrado con lightbox. Solo que mooSlideBox presenta algunas variantes u otra buena forma de mostrar otro tipo de contenido, algo que podrá ser útil, sobre todo relacionado a porfolios y ese tipo de cosas. Básicamente nos permite luego de dar un click en un enlace, abrir un Div flotador en el cual podremos mostrar nuestras fotos y a la vez agregar una descripción larga y un titulo relacionado a esa imagen. La parte visual desde ya es muy agradable, mas aun, el efecto que se produce al hacer aparecer este div flotador o bien lightbox. mooSlideBox funciona en IE 6 / 7, Opera y Firefox.

    Ver Demo Funcionando - Descarga mi ejemplo (contiene todos los archivos) - Web mooSlideBox v3

    Instalacion:

    Lo primero sera descargar las librerias necesearias mootools.js y mooSlideX.js

    Realizaremos la llamada correspondiente a mootools, copiando y pegando el siguiente código dentro de nuestras etiquetas < Head > ….< / Head > ( en wordpress seria en el archivo Header.php).

    PLAIN TEXT
    JavaScript:
    <script language="javascript" type="text/ecmascript" src="mootools.js"></script>

    Para mostrar en un enlace el deslizador con una imagen, un título y una descripción de texto, podemos hacerlo llamando de esta manera:

    PLAIN TEXT
    HTML:
    <a href="images/foto2.jpg" rel="designSlide" rev="mycontent" title="Clickideas V2::Este es otro de los diseños creados, y que es el que seguramente estará unos meses online hasta terminar el que en realidad será el definitivo. Lo que me ha agradado de este, es que mas haya de lo elementos agregados en el diseño, ha quedado bastante limpio, sobre todo con los tonos pensados desde el principio. Eso si aun falta terminar detalles, pero la idea es básicamente lo que ven en esta previa."> Clickideas V2</a>

    <script language="javascript" type="text/ecmascript" src="mooSlideX.js">
    </script>

    Es decir que a nuestros enlaces añadimos la etiqueta rel = "designSlide". La diapositiva puede contener un título y una descripción. En el atributo “title” agregamos el nombre de titulo, separándolo de la descripción con un "::". Inclusive se puede ver que la llamada al script mooSlideBox lo haremos desde aquí.

  • Flash | Fotografia | Galerias | Herramientas

    12 /02 / 2008 - 2:05 am

    Publicado por Nikko.

    • 15
    • 4.277

    Social Link

    PictoBrowser – Montar tu galería flash con tus imágenes de flickr

    pictobrowser.jpg

    Si no desean tanto complicarse la vida a la hora de montar sus galerías en flash con sus imágenes almacenadas en Flickr les recomiendo PictoBrowser, una herramienta online que nos permitirá crear una agradable galería basada en flash con nuestras imágenes de Flickr, y lo mejor aun, sin complicaciones ni dolores de cabeza. Tan simple como ingresar al sitio, introducir nuestro nombre de usuario de Flickr, y comenzar a configurar o personalizar nuestra galería. Podremos optar por mostrar solo las imágenes de un determinado tags o etiqueta, cambiar colores (fondo, bordes, y demás), el ancho, el largo, etc. La verdad PictoBrowser me pareció una herramienta muy interesante, por un lado porque el resultado es muy agradable y por el otro porque es sumamente sencillo. Una vez que hemos configurado todo, solo deberemos copiar el código que nos generara el servicio y pegarlo en nuestro sitio web, de esta forma ya tendremos montado en nuestro blog, una bonita galería realizada en flash, en tan solo minutos.

    Enlace PictoBrowser

    Via Bitelia

  • Fuentes | Galerias | Javascript | Scripts

    03 /01 / 2008 - 3:42 pm

    Publicado por Elias.

    • 15
    • 1.539

    Social Link

    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

  • Diseño Web | Galerias | Javascript | Scripts

    18 /12 / 2007 - 12:03 am

    Publicado por Nikko.

    • 15
    • 15.851

    Social Link

    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 demo - Descarga 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 >

    PLAIN TEXT
    JavaScript:
    <script type="text/javascript" src="js/imageflow.js"></script>

    agregamos un poco de estilo

    PLAIN TEXT
    CSS:
    <style type="text/css">
    img {
        position:absolute;
        top:0px;
        border:none;
    }
    h1 {
        text-align:center;
    }
    a{
        color:#fff;
    }
    .none{
        visibility:hidden;
    }
    .none div{
        display:none;
    }
    .clear{
        clear:both;
    }
    #images{
        visibility:hidden;
    }
    #loading{
        margin-top:50px;
        text-align:center;
        width:100%;
    }
    #loading img{
        margin-top:10px;
        position:relative;
    }
    #captions{
        position:relative;
        text-align:center;
        z-index:10000;
    }
    #scrollbar{
        visibility:hidden;
        position:relative;
        border-bottom:1px solid #b3b3b3;
        z-index:10001;
    }
    #scrollbar_slider{
        position:absolute;
        margin-top:-7px;
        margin-left:-7px;
        z-index:10002;
        background-image:url(slider.png);
        background-repeat:no-repeat;
        width:14px;
        height:14px;   
    }
    #imageflow{
    background-color:#000;
        margin-left:350px;
        text-align:left;
            color: #fff;
    }
    </style>

    Por ultimo la estructura de nuestra galeria

    PLAIN TEXT
    HTML:
    <div id="imageflow">
        <div id="loading">
            <b>Loading images</b><br/>
            <img src="loading.gif" width="208" height="13" alt="loading" />
        </div>
        <div id="images">
            <img src="img/img001.png" alt="Image 1" />
            <img src="img/img002.png" alt="Image 2" />
            <img src="img/img003.png" alt="Image 3" />
            <img src="img/img002.png" alt="Image 4" />
            <img src="img/img003.png" alt="Image 5" />
            <img src="img/img001.png" alt="Image 6" />
            <img src="img/img002.png" alt="Image 7" />
            <img src="img/img003.png" alt="Image 8" />
            <img src="img/img002.png" alt="Image 9" />
            <img src="img/img001.png" alt="Image 10" />
        </div>
        <div id="captions"></div>
        <div id="scrollbar">
            <div id="slider"></div>
        </div>
    </div>

    <div class="clear"></div>

  • Fotografia | Galerias | Herramientas | Software

    15 /12 / 2007 - 12:37 am

    Publicado por Nikko.

    • 15
    • 1.582

    Social Link

    Pictomio, Organizador y visualizador 3D de imágenes para tu ordenador

    Si en nuestro ordenador poseemos cantidad y cantidad de fotografías, nunca esta de más tener a mano algún programita extra para gestionarlas. Pictomio es una aplicación gratuita que se suma a otras diseñadas para este fin. Con el podremos organizar la cantidad de imágenes que tenemos en nuestro ordenador a medida que podremos ir archivando cada una de ellas. Inclusive nos permitirá mirar todas nuestras fotos mediante Slideshows. Lo extraordinario en este ultimo caso, los Slideshows, es que Pictomio utiliza técnicas y efectos incorporadas en tarjetas graficas, lo que permite conseguir Slideshows 3D realmente maravillosos.

    Enlace Pictomio

    Via visualbeta

  • Diseño Web | Fotografia | Galerias

    12 /12 / 2007 - 4:00 am

    Publicado por Nikko.

    • 15
    • 2.681

    Social Link

    Panel gallery – Una bonita forma de mostrar nuestras imágenes

    pgallery.jpg

    Panel gallery nos ofrece una opción muy agradable para presentar nuestras imágenes. No se si cuanto a diseño, pero si en cuanto a originalidad. Panel gallery nos permite crear una especia de galería mediante paneles, al estilo de miniaturas. Salvo que con ella en vez de dar un click sobre una imagen y mostrarla a una resolución mayor, navegaremos sobre cada panel con nuestro Mouse, deslizándonos de un lado a otro de la imagen y visualizando parte por parte de la misma, hasta haber conseguido visualizarla por completo o bien, cada detalle. No recuerdo como se llama este tipo de efecto ni tampoco si me explico bien. Pero mirando el demo sin duda entenderán lo que acabo de explicar.

    Ver demo - Descarga ejemplo

     

    En nuestro encabezado agregamos el script

    PLAIN TEXT
    JavaScript:
    <script type="text/javascript">
    var xm = 0;
    var ym = 0;

    document.onmousemove = function(e){
        if (window.event) e=window.event;
        xm = e.clientX;
        ym = e.clientY;
    }

    var panel = {
        speed : .006,
        t : 0,
        O : [],
        over : false,

        run : function() {
            panel.t += panel.speed;
            for (var i = 0, o; o = panel.O[i]; i++)
                o.anim(i + panel.t);
        },

        init : function(){
            for (var i = 0, o; o = document.images[i]; i++){
                if (o.className.indexOf('panel')>= 0) {
                    if(o.parentNode.href != undefined) {
                        var div = document.createElement("a");
                        div.href = o.parentNode.href;
                    } else {
                        var div = document.createElement("div");
                    }
                    div.className = 'panel';
                    var img = document.createElement("img");
                    img.src = o.src;
                    img.className = 'imgPanel';
                    o.parentNode.replaceChild(div,o);
                    div.appendChild(img);
                    div.ims = img.style;
                    div.iw = img.width;
                    div.ih = img.height;
                    div.cx = -div.iw / 2;
                    div.cy = -div.ih / 2;
                    div.anim = function(t) {
                        nw = this.offsetWidth;
                        nh = this.offsetHeight;
                        if (panel.over == this){
                            for (var nx = 0, ny = 0, o = this; o != null; o = o.offsetParent) nx += o.offsetLeft, ny += o.offsetTop;
                            var x = Math.max(-this.iw + nw, Math.min(0, (-(xm - nx) * (this.iw - nw)) / nw));
                            var y = Math.max(-this.ih + nh, Math.min(0, (-(ym - ny) * (this.ih - nh)) / nh));
                            if (Math.abs(xm-nx-nw * .5)> nw || Math.abs(ym-ny-nh * .5)> nw ) panel.over = false;
                        } else {
                            var mx = (this.iw - nw) * .5;
                            var my = (this.ih - nh) * .5;
                            var x = -mx * (1 + Math.cos(t * 1.2));
                            var y = -my * (1 + Math.sin(t));
                        }
                        this.cx += (x - this.cx) * .1;
                        this.cy += (y - this.cy) * .1;
                        this.ims.left = Math.round(this.cx) + 'px';
                        this.ims.top  = Math.round(this.cy) + 'px';
                    }

                    div.onmouseover = function()
                    {
                        panel.over = this;
                    }
                    this.O.push(div);
                }
            }
            setInterval(panel.run, 32);
        }
    }

    onload = function ()
    {
        panel.init();
    }

    </script>

    un poco de CSS

    PLAIN TEXT
    CSS:
    <style type="text/css">

        #screen {
            position: absolute;
            left: 22%;
            top: 20%;
            width: 60%;
            height: 60%;
            background: #fff;
            overflow: hidden;
        }
        .panel {
            position: relative;
            float: left;
            width: 21%;
            height: 30%;
            margin: 1%;
            overflow: hidden;
        }
        .imgPanel {
            position: absolute;
            border: none;
            text-decoration: none;
        }

    </style>

    Por ultimo nuestra estructura

    PLAIN TEXT
    HTML:
    <div id="screen">

                <img class="panel" src="images/fl01.jpg" alt="">

        <img class="panel" src="images/slide110.jpg" alt="">
        <img class="panel" src="images/fl01.jpg" alt="">
                <img class="panel" src="images/fl01.jpg" alt="">

       

    </div>


Pagina 5 de 8«12345678»