Hum, todavía le falta algo
¿Hay que dar display:none a todas las fotos menos la primra, o cómo? Aquí está el código completo, he quitado muchas fotos para abreviarlo:
Código PHP:
Ver original<!DOCTYPE HTML>
<html>
<head>
<title> </title>
<link rel
="stylesheet" href
="estilos.css" type
="text/css" media
="all" /> <link href
="css/lightbox.css" rel
="stylesheet" /> <script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<script>
$(function(){
$('img.thumbnail').click(function() {
$('#bigImg').attr('src', $(this).attr('src').replace(/\.jpg/, 'Big.jpg'));
// Change name and show
}).first().click(); // And activate the first one
});
</script>
</head>
<body>
<div class="contenedor">
<div class="ficha">
<div class="grande" width="510" height="380">
<a href="cuisine/gr(1).jpg" data-lightbox="foto"><img id="bigImg" src="cuisine/500px(1).jpg"></a>
<a href="cuisine/gr(2).jpg" data-lightbox="foto"><img id="bigImg" src="cuisine/500px(2).jpg"></a>
<a href="cuisine/gr(3).jpg" data-lightbox="foto"><img id="bigImg" src="cuisine/500px(3).jpg"></a>
<a href="cuisine/gr(4).jpg" data-lightbox="foto"><img id="bigImg" src="cuisine/500px(4).jpg"></a>
<a href="cuisine/gr(5).jpg" data-lightbox="foto"><img id="bigImg" src="cuisine/500px(5).jpg"></a>
<a href="cuisine/gr(6).jpg" data-lightbox="foto"><img id="bigImg" src="cuisine/500px(6).jpg"></a>
</div>
<div class="sellos">
<a href="#"><img class="thumbnail" src="cuisine/120px(1).jpg"></a>
<a href="#"><img class="thumbnail" src="cuisine/120px(2).jpg"></a>
<a href="#"><img class="thumbnail" src="cuisine/120px(3).jpg"></a>
<a href="#"><img class="thumbnail" src="cuisine/120px(4).jpg"></a>
<a href="#"><img class="thumbnail" src="cuisine/120px(5).jpg"></a>
<a href="#"><img class="thumbnail" src="cuisine/120px(6).jpg"></a>
</div>
</div>
</body>
</html>