Eres Diseñador Web? Entra aqui

En este tutorial vamos a crear una galería de pantalla completa con jQuery.
Estos proyectos son solo para Taringa.net, si los ves en otros lugares porfavor escribe un MP para resolver el problema, y otras cosa es que no he creado el programa por lo que no voy a dar los archivos aun, y por otro lado pido unos clicks en la publicidad de mi blog ya que tengo una oferta de trabajo en Madrid-España y soy de Venezuela-Tachira y no tengo los suficientes recursos para viajar al exterior, ya tengo mi pasaporte y mi visa, pero no dispongo del dinero necesario, asi que si me puedes ayudar con unos clicks en la publicidad te lo sabria agradecer, no es obligatorio, si no quieren no los hagan, solo es para ayudarme, mil gracias y les recomiendo que sigan este post para que vean lo nuevo que le agrege como los links de descargas.

Ok ahora empezemos:


1. Un Vistaso al Codigo HTML:

En primer lugar, vamos a añadir un elemento de carga que queremos mostrar cuando las imágenes se están cargando:
<div id="tf_loading" class="tf_loading"></div>

Entonces, vamos a crear un contenedor de todas las imágenes que se mostrarán en pantalla completa:
<div id="tf_bg" class="tf_bg">
    <img src="images/1.jpg" alt="Image 1" longdesc="images/thumbs/1.jpg" />
    <img src="images/2.jpg" alt="Image 2" longdesc="images/thumbs/2.jpg"/>
    <img src="images/3.jpg" alt="Image 3" longdesc="images/thumbs/3.jpg"/>
    <img src="images/4.jpg" alt="Image 4" longdesc="images/thumbs/4.jpg"/>
    <img src="images/5.jpg" alt="Image 5" longdesc="images/thumbs/5.jpg"/>
    <img src="images/6.jpg" alt="Image 6" longdesc="images/thumbs/6.jpg"/>
    <div class="tf_pattern"></div>
</div>

Vamos a utilizar el atributo "longdesc" para indicar la ruta a la miniatura correspondiente. El elemento div último servidor como el patrón de superposición.

A continuación, vamos a añadir un contenedor de los contenidos que se muestran en la esquina inferior izquierda de la pantalla.
<div id="tf_content_wrapper" class="tf_content_wrapper">
    <div class="tf_content" id="content1" style="display:block;">
        <h2>Dreamer</h2>
        <p>Far far away, behind the word mountains, ... </p>
    </div>
    <div class="tf_content" id="content2">
        ...
    </div>
    ...
</div>

Cada caja con una partida será en el interior de un elemento con la clase "tf_content".

La estructura de la imagen en miniatura en la parte derecha de la pantalla vemos de la siguiente manera:
<div id="tf_thumbs" class="tf_thumbs">
    <span id="tf_zoom" class="tf_zoom"></span>
    <img src="images/thumbs/1.jpg" alt="Thumb1"/>
</div>

La duración de cualquiera tendrá la clase "tf_zoom" o "tf_fullscreen" dependiendo de en qué modo estamos in

Y, por último, vamos a añadir algunos elementos para la navegación:
<div id="tf_next" class="tf_next"></div>
<div id="tf_prev" class="tf_prev"></div>

Echemos un vistazo a el CSS.

2. El CSS:

Después de hacer un reset simple del cuerpo y html, vamos a definir el estilo para el contenedor de imágenes a todo:
.tf_bg{
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
}

El contenedor se fijará y ocupar toda la pantalla. Las imágenes en el interior será de la posición absoluta y la anchura real y la altura se calculará de forma dinámica en nuestra función de jQuery:
.tf_bg img{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    z-index: 1;
    display:none;
}

El patrón también lo hará ser absoluta y tienen una imagen de fondo repetida:
.tf_pattern{
    position:absolute;
    width:100%;
    height:100%;
    background:transparent url(../images/pattern.png) repeat top left;
    z-index:2;
}

Vamos a colocar el contenido en absoluto, también:
.tf_content{
    position:absolute;
    bottom:50px;
    left:50px;
    z-index:10;
    display:none;
}

El título del contenido tendrá un tipo de letra diferente, que vamos a integrar con el API de Google Fuente. Volveremos sobre esto más adelante.
.tf_content h2{
    color:#fff;
    font-size:90px;
    padding:0;
    margin:0;
    font-family: 'Dancing Script', arial, serif;
    text-shadow:1px 1px 2px #000;
}

El apartado de los contenidos se han repetido una imagen como fondo y algunos bonita caja-y la sombra de texto:
.tf_content p{
    color:#fff;
    padding:0;
    margin:0;
    background:transparent url(../images/bg_content.png) repeat top left;
    padding:40px;
    width:500px;
    font-family: 'PT Sans Narrow', arial, serif;
    font-size:20px;
    line-height:25px;
    text-transform:uppercase;
    text-shadow:2px 2px 1px #000;
    -moz-box-shadow:1px 1px 5px #202020;
    -webkit-box-shadow:1px 1px 5px #202020;
    box-shadow:1px 1px 5px #202020;
    border:4px solid #fff;
}

El contenedor de imágenes en miniatura se coloca en el centro de la pantalla en el lado derecho. Logramos que con el establecimiento de la parte superior al 50% y el margen superior a la mitad negativa de su altura. Daremos el contenedor una reflexión, que se puede ver en los navegadores WebKit:
.tf_thumbs{
    position:absolute;
    z-index:12;
    right:50px;
    top:50%;
    margin-top:-79px;
    border:4px solid #fff;
    -moz-box-shadow:1px 1px 5px #202020;
    -webkit-box-shadow:1px 1px 5px #202020;
    box-shadow:1px 1px 5px #202020;
    -webkit-box-reflect:
        below 5px
        -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(transparent),
            color-stop(0.6, transparent),
            to(rgb(18, 18, 18))
        );
}
.tf_thumbs img{
    display:block;
}

Los elementos de navegación se encuentra junto al contenedor de miniaturas:
.tf_next,
.tf_prev{
    width:35px;
    height:14px;
    position:absolute;
    top:50%;
    right:320px;
    z-index:100;
    cursor:pointer;
    background:transparent url(../images/nav.png) no-repeat top left;
    opacity:0.5;
}
.tf_next{
    background-position:0px -14px;
    margin-top:80px;
}
.tf_prev{
    background-position:0px 0px;
    margin-top:-55px;
}
.tf_next:hover,
.tf_prev:hover{
    opacity:0.9;
}

Los pequeños iconos de zoom y modo de pantalla completa aparecerá en la esquina superior derecha de la miniatura:
.tf_zoom,
.tf_fullscreen{
    width:20px;
    height:20px;
    position:absolute;
    top:6px;
    right:6px;
    cursor:pointer;
    z-index:100;
    opacity:0.6;
    background:transparent url(../images/icons.png) no-repeat top left;
}
.tf_zoom{
    background-position:0px -20px;
}
.tf_fullscreen{
    background-position:0px 0px;
}
.tf_zoom:hover,
.tf_fullscreen:hover{
    opacity:0.9;
}

El elemento de carga se situará en el centro de la pantalla:
.tf_loading{
    position:fixed;
    top:50%;
    left:50%;
    margin:-30px 0px 0px -30px;
    width:60px;
    height:60px;
    background:#fff url(../images/loader.gif) no-repeat center center;
    z-index:999;
    opacity:0.7;
}

Y eso fue todo el estilo. Echemos un vistazo a las JavaScript.


3. El JavaScript

En primer lugar, vamos a incluir los siguientes scripts:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.flip.js"></script>
<script type="text/javascript" src="js/jquery-mousewheel-3.0.4/jquery.mousewheel.min.js"></script>

Entonces, vamos a añadir la función de precarga de las imágenes:
(function($) {
    $.fn.preload = function(options) {
        var opts     = $.extend({}, $.fn.preload.defaults, options);
        o            = $.meta ? $.extend({}, opts, this.data()) : opts;
        var c        = this.length,
            l        = 0;
        return this.each(function() {
            var $i    = $(this);
            $('<img/>').load(function(i){
                ++l;
                if(l == c) o.onComplete();
            }).attr('src',$i.attr('src'));
        });
    };
    $.fn.preload.defaults = {
        onComplete    : function(){return false;}
    };
})(jQuery);

En nuestra función de jQuery, vamos primero caché de algún elemento y definir algunas variables:
var $tf_bg                = $('#tf_bg'),
    $tf_bg_images        = $tf_bg.find('img'),
    $tf_bg_img            = $tf_bg_images.eq(0),
    $tf_thumbs            = $('#tf_thumbs'),
    total                = $tf_bg_images.length,
    current                = 0,
    $tf_content_wrapper    = $('#tf_content_wrapper'),
    $tf_next            = $('#tf_next'),
    $tf_prev            = $('#tf_prev'),
    $tf_loading            = $('#tf_loading');

Entonces, vamos a la precarga de las imágenes:
$tf_bg_images.preload({
    onComplete    : function(){
        $tf_loading.hide();
        init();
    }
});

La siguiente función se mostrará la primera imagen e iniciar algunos eventos:
function init(){
    //get dimentions for the image, based on the windows size
    var dim    = getImageDim($tf_bg_img);
    //set the returned values and show the image
    $tf_bg_img.css({
        width    : dim.width,
        height    : dim.height,
        left    : dim.left,
        top        : dim.top
    }).fadeIn();

    //resizing the window resizes the $tf_bg_img
    $(window).bind('resize',function(){
        var dim    = getImageDim($tf_bg_img);
        $tf_bg_img.css({
            width    : dim.width,
            height    : dim.height,
            left    : dim.left,
            top        : dim.top
        });
    });

    //expand and fit the image to the screen
    $('#tf_zoom').live('click',
    function(){
        if($tf_bg_img.is(':animated'))
            return false;

        var $this    = $(this);
        if($this.hasClass('tf_zoom')){
            resize($tf_bg_img);
            $this.addClass('tf_fullscreen')
            .removeClass('tf_zoom');
        }
        else{
            var dim    = getImageDim($tf_bg_img);
            $tf_bg_img.animate({
                width    : dim.width,
                height    : dim.height,
                top        : dim.top,
                left    : dim.left
            },350);
            $this.addClass('tf_zoom')
            .removeClass('tf_fullscreen');
        }
    }
    );

    //click the arrow down, scrolls down
    $tf_next.bind('click',function(){
        if($tf_bg_img.is(':animated'))
            return false;
        scroll('tb');
    });

    //click the arrow up, scrolls up
    $tf_prev.bind('click',function(){
        if($tf_bg_img.is(':animated'))
            return false;
        scroll('bt');
    });

    //mousewheel events - down / up button trigger the scroll down / up
    $(document).mousewheel(function(e, delta) {
        if($tf_bg_img.is(':animated'))
            return false;

        if(delta > 0)
            scroll('bt');
        else
            scroll('tb');
        return false;
    });

    //key events - down / up button trigger the scroll down / up
    $(document).keydown(function(e){
        if($tf_bg_img.is(':animated'))
            return false;

        switch(e.which){
            case 38:
                scroll('bt');
                break;    

            case 40:
                scroll('tb');
                break;
        }
    });
}

La siguiente función se encarga de mostrar la imagen anterior o siguiente:
function scroll(dir){
    //if dir is "tb" (top -> bottom) increment current,
    //else if "bt" decrement it
    current    = (dir == 'tb')?current + 1:current - 1;

    //we want a circular slideshow,
    //so we need to check the limits of current
    if(current == total) current = 0;
    else if(current < 0) current = total - 1;

    //flip the thumb
    $tf_thumbs.flip({
        direction    : dir,
        speed        : 400,
        onBefore    : function(){
            //the new thumb is set here
            var content    = '<span id="tf_zoom" class="tf_zoom"></span>';
            content        +='<img src="' + $tf_bg_images.eq(current).attr('longdesc') + '" alt="Thumb' + (current+1) + '"/>';
            $tf_thumbs.html(content);
        }
    });

    //we get the next image
    var $tf_bg_img_next    = $tf_bg_images.eq(current),
    //its dimentions
    dim                = getImageDim($tf_bg_img_next),
    //the top should be one that makes the image out of the viewport
    //the image should be positioned up or down depending on the direction
    top    = (dir == 'tb')?$(window).height() + 'px':-parseFloat(dim.height,10) + 'px';

    //set the returned values and show the next image
    $tf_bg_img_next.css({
        width    : dim.width,
        height    : dim.height,
        left    : dim.left,
        top        : top
    }).show();

    //now slide it to the viewport
    $tf_bg_img_next.stop().animate({
        top     : dim.top
    },1000);

    //we want the old image to slide in the same direction, out of the viewport
    var slideTo    = (dir == 'tb')?-$tf_bg_img.height() + 'px':$(window).height() + 'px';
    $tf_bg_img.stop().animate({
        top     : slideTo
    },1000,function(){
        //hide it
        $(this).hide();
        //the $tf_bg_img is now the shown image
        $tf_bg_img    = $tf_bg_img_next;
        //show the description for the new image
        $tf_content_wrapper.children()
        .eq(current)
        .show();
    });
    //hide the current description
    $tf_content_wrapper.children(':visible')
    .hide()

}

La función de cambiar el tamaño animará la imagen a un tamaño de pantalla de la instalación:
function resize($img){
    var w_w    = $(window).width(),
    w_h    = $(window).height(),
    i_w    = $img.width(),
    i_h    = $img.height(),
    r_i    = i_h / i_w,
    new_w,new_h;

    if(i_w > i_h){
        new_w    = w_w;
        new_h    = w_w * r_i;

        if(new_h > w_h){
            new_h    = w_h;
            new_w    = w_h / r_i;
        }
    }
    else{
        new_h    = w_w * r_i;
        new_w    = w_w;
    }

    $img.animate({
        width    : new_w + 'px',
        height    : new_h + 'px',
        top        : '0px',
        left    : '0px'
    },350);
}[code]

La última función nos dará las dimensiones de una imagen y su posición correcta:
[code]function getImageDim($img){
    var w_w    = $(window).width(),
    w_h    = $(window).height(),
    r_w    = w_h / w_w,
    i_w    = $img.width(),
    i_h    = $img.height(),
    r_i    = i_h / i_w,
    new_w,new_h,
    new_left,new_top;

    if(r_w > r_i){
        new_h    = w_h;
        new_w    = w_h / r_i;
    }
    else{
        new_h    = w_w * r_i;
        new_w    = w_w;
    }

    return {
        width    : new_w + 'px',
        height    : new_h + 'px',
        left    : (w_w - new_w) / 2 + 'px',
        top        : (w_h - new_h) / 2 + 'px'
    };
}

Y eso es todo! Esperamos que hayan disfrutado el tutorial y aprender algo nuevo hoy!