Ajustar lightbox a la ventana

[_Halder_]

Vereis soy un principiante, hice un master de dos meses de web pero el tiempo da para lo que da, asi que ahora estoy peleandome con mi portfolio, que es la finalidad.

Mi problema es que use css y jquery para hacer un simple lightbox (y de suerte), el problema viene a que algunas imagenes son demasiado grandes para algunas pantallas, y en pantallas pequeñas se ven a tamaño original y solo cabe 1/4 en la pantalla, necesito que cada imagen se ajuste a las ventanas pequeñas, se reescale o algo, o poner unos controles para hacer zoom...

Use este tutorial:
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/super-simple-lightbox-with-css-and-jquery/

Y mi, pagina, la pagina con el problema es esta:
http://mario-cg.com/proyectos/proyectouno/puno.html

Gracias de antemano y se que sera una tonteria para vosotros pero soy principiante! xd

[_Halder_]

la pagina

[URL="http://mario-cg.com/proyectos/proyectouno/puno.html"]http://mario-cg.com/proyectos/proyectouno/puno.html[/URL]

HTML

Código HTML:

<div id="items">
                    	<ul id="imagenes">
                            <li id="imagenuno" class="a"><a class="lightbox_trigger" href="img/Yo_dia.jpg" title="Daylight_01"><img id="dluno" src="img/Yo_dia.jpg" alt="Daylight_01" title="Daylight_01"/></a></li>
                            <li id="imagendos" class="a"><a class="lightbox_trigger" href="img/yo_noche.jpg" title="Daylight_02"><img id="dldos" src="img/yo_noche.jpg" alt="Daylight_02" title="Daylight_02"/></a></li>
                            <li id="imagentres"><a class="lightbox_trigger" href="img/maleta.jpg" title="Daylight_03"><img id="dltres" src="img/maleta.jpg" alt="Daylight_03" title="Daylight_03"/></a></li>
                            <li id="imagencuatro"><a class="lightbox_trigger" href="img/madrid.jpg" title="Daylight_04"><img id="dlcuatro" src="img/madrid.jpg" alt="Daylight_04" title="Daylight_04"/></a></li>
                        </ul>
                    </div> 

HTML, esta parte del html no esta en la pagina en si, porque esta includo en el jqueri, pero para poder modificar el css hace falta conocerlo

Código HTML:

<div id="lightbox">
    <p>Click to close</p>
    <div id="content">
        <img src="#" />
    </div>
</div> 

CSS

Código:

div#lightbox {
			position:fixed; /* keeps the lightbox window in the current viewport */
			top:0; 
			left:0; 
			width:100%; 
			height:100%; 
			background:url(overlay.png) repeat; /* esto es una imagen de un pixel con transparencia */
			text-align:center;
		}
div#lightbox p{
    text-align:right;
    color:#fff;
    margin-right:20px;
    font-size:12px;
}

JAVASCRIPT

// JavaScript Document
jQuery(document).ready(function($) {

$('.lightbox_trigger').click(function(e) {

//prevent default action (hyperlink)
e.preventDefault();

//Get clicked link href
var image_href = $(this).attr("href");

/*
If the lightbox window HTML already exists in document,
change the img src to to match the href of whatever link was clicked

If the lightbox window HTML doesn't exists, create it and insert it.
(This will only happen the first time around)
*/

if ($('#lightbox').length > 0) { // #lightbox exists

//place href as img src value
$('#content').html('<img src="' + image_href + '" />');

//show lightbox window - you could use .show('fast') for a transition
$('#lightbox').show();
}

else { //#lightbox does not exist - create and insert (runs 1st time only)

//create HTML markup for lightbox window
var lightbox =
'<div id="lightbox">' +
'<p>Click to close</p>' +
'<div id="content">' + //insert clicked link's href into img src
'<img src="' + image_href +'" />' +
'</div>' +
'</div>';

//insert lightbox HTML into page
$('body').append(lightbox);
}

});

//Click anywhere on the page to get rid of lightbox window
$('#lightbox').live('click', function() { //must use live, as the lightbox element is inserted into the DOM
$('#lightbox').hide();
});

});

VERSION DE JQUERI
jquery-1.6.2.min.js