Estoy realizando un Preview de imágenes, usando la ruta de las imágenes que guardo en una tabla MySQL. Las imágenes se cargan bien y los indicadores arriba del Preview funciona como debería. El problema es que al recargar la página el Preview por primera vez, me muestra todas las imágenes de los indicadores y no únicamente 1 por defecto. Hasta el momento en el que presiono un indicador funciona como se supone que funcione.
Al cargar la página:
Al presionar un indicador:
Mi codigo:
<div class="leftSideAct">
<!-- Estos son los indicadores, cada indicador tiene un id> one,two... -->
<ul class="previewImg">
<?php
$sql = "SELECT t.id_departamento, t.nombre_terreno, td.id_terreno, td.direccion_terrenodetails, td.area_terrenodetails, td.categoria_terrenodetails, td.descripcion_terrenodetails, td.servicios_terrenodetails, td.img_path_terrenodetails1,td.img_path_terrenodetails2,td.img_path_terrenodetails3,td.img_path_terrenodetails4 FROM terrenos as t INNER JOIN terrenodetails as td ON t.id_terreno = td.id_terreno WHERE td.id_terreno=$terrenoValue";
if($result = mysqli_query($link, $sql)){
if(mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_array($result)){
?>
<li class="dataToggle imgVisor" data-img="one"><img
src="<?php echo $row['img_path_terrenodetails1']?>" alt=""></li>
<li class="dataToggle imgVisor" data-img="two"><img
src="<?php echo $row['img_path_terrenodetails2']?>" alt=""></li>
<li class="dataToggle imgVisor" data-img="three"><img
src="<?php echo $row['img_path_terrenodetails3']?>" alt=""></li>
<li class="dataToggle imgVisor" data-img="four"><img
src="<?php echo $row['img_path_terrenodetails4']?>" alt=""></li>
<?php
}
mysqli_free_result($result);
} else{
echo "No se encontró ninguna imagen.";
}
} else{
echo "$sql. " . mysqli_error($link);
}
?>
</ul>
<!-- Este es el preview, cada preview recibe el id del indicador> one,two... -->
<!-- Soy conciente que estoy cargando las 4 imagenes en este while, deberia usar el ID del indicador desde la base de datos para desplegar esta imagen? -->
<div class="contentImgVisor">
<?php
$sql = "SELECT t.id_departamento, t.nombre_terreno, td.id_terreno, td.direccion_terrenodetails, td.area_terrenodetails, td.categoria_terrenodetails, td.descripcion_terrenodetails, td.servicios_terrenodetails, td.img_path_terrenodetails1,td.img_path_terrenodetails2,td.img_path_terrenodetails3,td.img_path_terrenodetails4 FROM terrenos as t INNER JOIN terrenodetails as td ON t.id_terreno = td.id_terreno WHERE td.id_terreno=$terrenoValue";
if($result = mysqli_query($link, $sql)){
if(mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_array($result)){
?>
<div id="one" class="imgContent dic"><img
src="<?php echo $row['img_path_terrenodetails1']?>" alt=""></div>
<div id="two" class="imgContent dic"><img
src="<?php echo $row['img_path_terrenodetails2']?>" alt=""></div>
<div id="three" class="imgContent dic"><img
src="<?php echo $row['img_path_terrenodetails3']?>" alt=""></div>
<div id="four" class="imgContent dic"><img
src="<?php echo $row['img_path_terrenodetails4']?>" alt=""></div>
<?php
}
mysqli_free_result($result);
} else{
echo "No se encontró ninguna imagen.";
}
} else{
echo "$sql. " . mysqli_error($link);
}
?>
</div>
</div>
tablas usadas en el proceso:
CREATE TABLE terrenos(
id_terreno int not null AUTO_INCREMENT,
...
PRIMARY KEY(id_terreno),
INDEX(id_departamento), foreign key(id_departamento) references departamentos(id_departamento));
CREATE TABLE terrenodetails(
id_terrenodetails int not null AUTO_INCREMENT,
id_terreno int not null,
...
img_path_terrenodetails1 varchar(200),
img_path_terrenodetails2 varchar(200),
img_path_terrenodetails3 varchar(200),
img_path_terrenodetails4 varchar(200),
PRIMARY KEY (id_terrenodetails),
INDEX(id_terreno), foreign key(id_terreno) references terrenos(id_terreno));
Deberia agregarle un campo llamado ID a la tabla Terrenos y hacer otro while en el Preview en base a este ID? Agradeceria cualquier idea o comentario,
Saludos,