0

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:

slider1

Al presionar un indicador:

slider2

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,

1 respuesta 1

0

No puedo evaluar que tan eficiente sea esto pero para mi proposito funciona perfectamente,

Lo he solucionado de la siguiente forma,

  • guardo las imagenes en una variable $img1, $img2...
  • En vista que al presionar los indicadores si me muestra el Preview entonces asumi que por default le agrega un display:block al indicador activo y un display:none a los demas.
  • Por lo tanto cree una clase llamada oculto con la propiedad display:none y agregue esta propiedad a los Preview> two, three, four.

De esta forma al cargar la pagina queda activo el Preview> one, y los demas se ocultan hasta que los indicadores se activen.

             <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)){
                                    $valorN=$row['id_terreno'];
                                    $img1=$row['img_path_terrenodetails1'];
                                    $img2=$row['img_path_terrenodetails2'];
                                    $img3=$row['img_path_terrenodetails3'];
                                    $img4=$row['img_path_terrenodetails4'];
                            ?>
                            <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ó imagen para este terreno.";
                            }
                            } else{
                            echo "$sql. " . mysqli_error($link);
                            }
                            ?>

                        </ul>
                        <!-- Este es el preview, cada preview recibe el id del indicador> one,two... -->
                        <div class="contentImgVisor">


                            <div id="one" class="imgContent dic"><img
                                    src="<?php echo $img1?>" alt=""></div>
                            <div id="two" class="imgContent dic oculto"><img
                                    src="<?php echo $img2?>" alt=""></div>
                            <div id="three" class="imgContent dic oculto"><img
                                    src="<?php echo $img3?>" alt=""></div>
                            <div id="four" class="imgContent dic oculto"><img
                                    src="<?php echo $img4?>" alt=""></div>


                        </div>
                    </div>

Saludos cordiales

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.