I'm doing a Preview of images, using the path of the images that I save in a MySQL table. The images load fine and the indicators above the Preview work as they should. The problem is that when I reload the Preview page for the first time, it shows me all the indicator images and not just 1 by default. Until the moment I press an indicator it works as it is supposed to.
When loading the page:
Pressing an indicator:
My code:
<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>
tables used in the process:
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));
Should I add a field called ID to the Land table and do another while in the Preview based on this ID? I would appreciate any ideas or comments.
Cheers,
I can't assess how efficient this is but for my purpose it works perfectly,
I have solved it in the following way,
In this way, when loading the page, the Preview> one is active, and the others are hidden until the indicators are activated.
Best regards