Problema con álbum JS

juanlaborde · #1 (**permalink**) 02/04/2013, 07:35

Estimados especialistas:
Apenas voy con php y tratando de hacer una serie de álbumes de fotos para un portafolio, me sugirieron que usara JS, me puse a investigar y encontré algo que se adaptaba a lo que necesitaba.
Esto funciona a la perfección pero el problema empieza con los includes.
Lo que tengo es una página php que contiene varios álbumes a través de includes y sólo funciona el primero, Es decir:

Si los pongo así:
<div id="fridays_2"><?php include_once('portafolio/web/fridays_2.php'); ?></div>
<div id="sm"><?php include_once('portafolio/web/sm.php'); ?></div>

Funciona: fridays_2

Y si lo pongo así:
<div id="sm"><?php include_once('portafolio/web/sm.php'); ?></div>
<div id="fridays_2"><?php include_once('portafolio/web/fridays_2.php'); ?></div>

Funciona: sm

Como comentaba necesito agregar varios includes en la misma página, pero no se que es lo que se está pisando. Les agradeceré la ayuda.

Copio el código que funciona correctamente.
------------------------------------------------------------------------------------
<title>bairesAGENCY</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

</head>
<body>

<div id="contenedor_web">
<div id="monitor"><img src="img/port/web/mac_monitor.png" width="833" height="650" /></div>
<div id="web"><img id="largeImage" src="img/port/web/fridays_2/galeria/fridays_2_01_large.jpg" /></div>

<div id="thumbs">
<img class="thumb_fridays_2_01" src="img/port/web/fridays_2/galeria/fridays_2_01_thumb.jpg" />
<img class="thumb_fridays_2_02" src="img/port/web/fridays_2/galeria/fridays_2_02_thumb.jpg" />
<img class="thumb_fridays_2_03" src="img/port/web/fridays_2/galeria/fridays_2_03_thumb.jpg" />
<img class="thumb_fridays_2_04" src="img/port/web/fridays_2/galeria/fridays_2_05_thumb.jpg" />
<img class="thumb_fridays_2_05" src="img/port/web/fridays_2/galeria/fridays_2_08_thumb.jpg" />
<img class="thumb_fridays_2_06" src="img/port/web/fridays_2/galeria/fridays_2_09_thumb.jpg" />
<img class="thumb_fridays_2_07" src="img/port/web/fridays_2/galeria/fridays_2_10_thumb.jpg" />
<img class="thumb_fridays_2_08" src="img/port/web/fridays_2/galeria/fridays_2_12_thumb.jpg" />
</div>

<script>
$('#thumbs').delegate('img','click', function(){
$('#largeImage').attr('src',$(this).attr('src').re place('thumb','large'));
});
</script>

</div>
</body>
</html>
------------------------------------------------------------------------------------

Kamae · #2 (**permalink**) 02/04/2013, 09:43

Hola buenas!

Pues es bastante probable que haya algún error en el PHP que incluyes y por eso el segundo no te cargue, porque lo que estás haciendo a priori parece correcto. ¿Tienes activada la directiva "display_errors" en "On" en tu fichero php.ini?

Haz una prueba tonta, crea 2 ficheros PHP nuevos y simplemente haz 2 echo distintos, luego cárgalos a ver si te va.

Saludos

juanlaborde · #3 (**permalink**) 03/04/2013, 17:32

Funciona bien lo que me dices.
Si tengo activados los errores y warnings, según esto todo está bien.
ademas los includes los hace correctamente pero por alguna razón el script jala sólo en el que pongo primero.

:(

juanlaborde · #4 (**permalink**) 03/04/2013, 17:35

PHP 1

<!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" />
<title>bairesAGENCY</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<link href="../../css/template_web.css" rel="stylesheet" type="text/css" />
<link href="../../css/general.css" rel="stylesheet" type="text/css" />
<link href="../../css/texto.css" rel="stylesheet" type="text/css" />
<link href="../../css/colores.css" rel="stylesheet" type="text/css" />

</head>
<body>

<div id="contenedor_web">
<div id="monitor"><img src="img/port/web/mac_monitor.png" width="833" height="650" /></div>
<div id="web"><img id="largeImage" src="img/port/web/sm/galeria/sm_00_large.jpg" /></div>

<div id="thumbs">
<img class="thumb_sm_01" src="img/port/web/sm/galeria/sm_01_thumb.jpg" />
<img class="thumb_sm_02" src="img/port/web/sm/galeria/sm_02_thumb.jpg" />
<img class="thumb_sm_03" src="img/port/web/sm/galeria/sm_03_thumb.jpg" />
<img class="thumb_sm_04" src="img/port/web/sm/galeria/sm_04_thumb.jpg" />
<img class="thumb_sm_05" src="img/port/web/sm/galeria/sm_05_thumb.jpg" />
<img class="thumb_sm_06" src="img/port/web/sm/galeria/sm_06_thumb.jpg" />
<img class="thumb_sm_07" src="img/port/web/sm/galeria/sm_07_thumb.jpg" />
<img class="thumb_sm_08" src="img/port/web/sm/galeria/sm_08_thumb.jpg" />
</div>

<script>
$('#thumbs').delegate('img','click', function(){
$('#largeImage').attr('src',$(this).attr('src').re place('thumb','large'));
});
</script>

<div id="sombra_thumb" class="sombra_sm_thumb_01"></div>
<div id="sombra_thumb" class="sombra_sm_thumb_02"></div>
<div id="sombra_thumb" class="sombra_sm_thumb_03"></div>
<div id="sombra_thumb" class="sombra_sm_thumb_04"></div>
<div id="sombra_thumb" class="sombra_sm_thumb_05"></div>
<div id="sombra_thumb" class="sombra_sm_thumb_06"></div>
<div id="sombra_thumb" class="sombra_sm_thumb_07"></div>
<div id="sombra_thumb" class="sombra_sm_thumb_08"></div>

<div id="sitio_hd" class="esp_bt lila texto_11 texto_blanco bold centrado inter_letra_1"><a href="portafolio/web/sm_big.html" target="_blank">VER PROYECTO HD</a></div>
<div id="sitio_en_linea" class="esp_bt lila texto_11 texto_blanco bold centrado inter_letra_1"><a href="http://www.ediciones-sm.com.mx" target="_blank">VER SITIO EN LÍNEA</a></div>
<div id="site_hd" class="eng_bt rosa_intenso texto_11 texto_blanco bold centrado inter_letra_1"><a href="portafolio/web/sm_big.html" target="_blank">VIEW HD PROJECT</a></div>
<div id="site_online" class="eng_bt rosa_intenso texto_11 texto_blanco bold centrado inter_letra_1"><a href="http://www.ediciones-sm.com.mx" target="_blank">WIEV SITE ONLINE</a></div>

</div>

</body>
</html>

juanlaborde · #5 (**permalink**) 03/04/2013, 17:41

PHP 2

<!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" />
<title>bairesAGENCY</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<link href="../../css/template_web.css" rel="stylesheet" type="text/css" />
<link href="../../css/general.css" rel="stylesheet" type="text/css" />
<link href="../../css/texto.css" rel="stylesheet" type="text/css" />
<link href="../../css/colores.css" rel="stylesheet" type="text/css" />

</head>
<body>

<div id="contenedor_web">
<div id="monitor"><img src="img/port/web/mac_monitor.png" width="833" height="650" /></div>
<div id="web"><img id="largeImage" src="img/port/web/fridays_2/galeria/fridays_2_01_large.jpg" /></div>

<div id="thumbs">
<img class="thumb_fridays_2_01" src="img/port/web/fridays_2/galeria/fridays_2_01_thumb.jpg" />
<img class="thumb_fridays_2_02" src="img/port/web/fridays_2/galeria/fridays_2_02_thumb.jpg" />
<img class="thumb_fridays_2_03" src="img/port/web/fridays_2/galeria/fridays_2_03_thumb.jpg" />
<img class="thumb_fridays_2_04" src="img/port/web/fridays_2/galeria/fridays_2_05_thumb.jpg" />
<img class="thumb_fridays_2_05" src="img/port/web/fridays_2/galeria/fridays_2_08_thumb.jpg" />
<img class="thumb_fridays_2_06" src="img/port/web/fridays_2/galeria/fridays_2_09_thumb.jpg" />
<img class="thumb_fridays_2_07" src="img/port/web/fridays_2/galeria/fridays_2_10_thumb.jpg" />
<img class="thumb_fridays_2_08" src="img/port/web/fridays_2/galeria/fridays_2_12_thumb.jpg" />
</div>

<script>
$('#thumbs').delegate('img','click', function(){
$('#largeImage').attr('src',$(this).attr('src').re place('thumb','large'));
});
</script>

<div id="sombra_thumb" class="sombra_fridays_2_thumb_01"></div>
<div id="sombra_thumb" class="sombra_fridays_2_thumb_02"></div>
<div id="sombra_thumb" class="sombra_fridays_2_thumb_03"></div>
<div id="sombra_thumb" class="sombra_fridays_2_thumb_04"></div>
<div id="sombra_thumb" class="sombra_fridays_2_thumb_05"></div>
<div id="sombra_thumb" class="sombra_fridays_2_thumb_06"></div>
<div id="sombra_thumb" class="sombra_fridays_2_thumb_07"></div>
<div id="sombra_thumb" class="sombra_fridays_2_thumb_08"></div>

<div id="sitio_hd" class="esp_bt lila texto_11 texto_blanco bold centrado inter_letra_1"><a href="portafolio/web/sm_big.html" target="_blank">VER PROYECTO HD</a></div>
<div id="sitio_en_linea" class="esp_bt lila texto_11 texto_blanco bold centrado inter_letra_1"><a href="http://www.ediciones-sm.com.mx" target="_blank">VER SITIO EN LÍNEA</a></div>
<div id="site_hd" class="eng_bt rosa_intenso texto_11 texto_blanco bold centrado inter_letra_1"><a href="portafolio/web/sm_big.html" target="_blank">VIEW HD PROJECT</a></div>
<div id="site_online" class="eng_bt rosa_intenso texto_11 texto_blanco bold centrado inter_letra_1"><a href="http://www.ediciones-sm.com.mx" target="_blank">WIEV SITE ONLINE</a></div>

</div>

</body>
</html>

juanlaborde · #6 (**permalink**) 03/04/2013, 17:47

Perdón por la burrada que voy a preguntar pero de JS no se nada de nada, puede ser que los scripts se estén pisando al estar en los dos php, debería quitarlos de los php y llamarlos desde otro include una sola vez?.

acabo de probar de quitar el js en el php1 y dejarlo en el php2.
Luego lo quite en el 2 y lo dejé en el 1, el resultado es siempre igual, sólo funciona en el primer include.

juanlaborde · #7 (**permalink**) 03/04/2013, 17:58

Bueno sigo reportando mis pruebas, las mas estúpidas las dejo de lado pero las que creo que pueden aportar, acá van.
Descartaría la posibilidad de problemas en los php incluidos porque incluso hago dos veces el include del php1 y uno funciona y el otro no.
Lo mismo si hago dos veces el include del php2.

juanlaborde · #8 (**permalink**) 03/04/2013, 18:15

Ok, metiendo mano ya lo encontré y lo comparto por si a alguien le sirve. Era una tontería.
Este es el script:

<script>
$('#thumbs').delegate('img','click', function(){
$('#largeImage').attr('src',$(this).attr('src').re place('thumb','large'));
});
</script>

No se si estos (#thumbs #largeImage) sean ID, variables o que catso porque como comenté no se nada de js pero simplemente no pueden llamarse igual en un php que en otro.

Si el primer script es así:
#thumbs
#largeImage

El segundo debe ser así
#thumbs2
#largeImage2