Tengo un problema con el plugin Pretty Photo. Sucede que si a un div le pongo un class y le especifico el .class en el código jQuery para que me haga el efecto si funciona. Pero no funciona si al div le pongo un "id" y le especifico el #id. No entiendo, por lo que sé de jQuery, esto si debería de funcionar pero no lo hace.
Necesito que sea en ID porque tengo otro código Javascript que es un carrusel que a fuerzas le tengo que poner el ID, entonces cuando le de clic en las fotos quiero que trabaje el Pretty Photo.
Saludos
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="css/photo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/carrusel1.js"></script>
<script type="text/javascript" src="js/carruselconf.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" charset="utf-8">
//AQUÍ ES DONDE ESPECIFICO EL ID O LA CLASE A LLAMAR DESDE EL DOM
$(document).ready(function(){
$("#carousel1 a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'});
});
</script>
<title>Entusiasma</title>
</head>
<body>
<div id="entusiasma">
</div>
<div id="menu">
</div>
//AQUÍ ESTÁ EL ID AL QUE ESTOY LLAMANDO
<div id="carousel1">
<a href="images/1.jpg" rel="prettyPhoto[gallery1]" title=""><img alt="imagen 1" src="images/thumb1.jpg" /></a>
<a href="images/2.jpg" rel="prettyPhoto[gallery1]" title=""><img alt="imagen 1" src="images/thumb2.jpg" /></a>
<a href="images/3.jpg" rel="prettyPhoto[gallery1]" title=""><img alt="imagen 1" src="images/thumb3.jpg" /></a>
<a href="images/4.jpg" rel="prettyPhoto[gallery1]" title=""><img alt="imagen 1" src="images/thumb4.jpg" /></a>
<a href="images/5.jpg" rel="prettyPhoto[gallery1]" title=""><img alt="imagen 1" src="images/thumb5.jpg" /></a>
</div>
</body>
</html>