Paso más información haver si aclaro un poco más.
Aqui pongo el codigo como lo tengo puesto ahora en la pagina final.
Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>ColorBox Examples</title>
<style type="text/css">
body{font:12px/1.2 Verdana, Arial, san-serrif; padding:0 10px;}
a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
h2{font-size:13px; margin:15px 0 0 0;}
</style>
<link media="screen" rel="stylesheet" href="css/colorbox.css" />
<script src="scripts/jquery-1.4.4.min.js"></script>
<script src="scripts/jquery.colorbox.js"></script>
<script>
$(document).click(function(){
if($(window).width()>1080){
$(".example10").colorbox({innerWidth:"687px", innerHeight:"475px", iframe:true});
}
if($(window).width()<=1080 && $(window).width()>800){
$(".example10").colorbox({innerWidth:"1030px", innerHeight:"712px", iframe:true});
}
if($(window).width()<=800){
$(".example10").colorbox({innerWidth:"687px", innerHeight:"475px", iframe:true});
}
});
</script>
</head>
<body>
<p><a class='example10' href="gulfs.html">Outside Webpage (Iframe)- GULFS</a></p>
...
la idea és que al poner unas 1000 fotos no tenga que crear un css con cada una de las medidas que quiero la imagen, sino que me lo coja directamente haciendo la misma función que he puesto en el primer comentario, o que me coja las medidas directamente o algo así.
Muchas gracias.