Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Ajustar lightbox a la ventana

Estas en el tema de Ajustar lightbox a la ventana en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/09/2012, 06:20
 
Fecha de Ingreso: septiembre-2012
Mensajes: 2
Antigüedad: 12 años, 3 meses
Puntos: 0
Mensaje Ajustar lightbox a la ventana

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
  #2 (permalink)  
Antiguo 08/09/2012, 08:40
 
Fecha de Ingreso: septiembre-2012
Mensajes: 2
Antigüedad: 12 años, 3 meses
Puntos: 0
Respuesta: Ajustar lightbox a la ventana

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
Cita:
// 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

Etiquetas: escalar, imagenes, lightbox
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:17.