Problema al mostrar imagenes desde una base de datos

mensajeescrito · #1 (**permalink**) 02/02/2014, 13:45

Hola a todos, verán tengo un codigo con el cual se pueden mostrar fotos extraidas desde una base de datos sql.

las muestra formando una tabla de 6 columnas (con lo cual muestra 6 fotos en el horizontal).

y de manera indefinida (mientras que hayan fotos en el vertical por eso he utlizado un if).

el problema lo tengo en que en la primera fila de la tabla me muestra las 5 primeras fotos pero la sexta foto de la primera fila no.

y ya a partir de la segunda, tercera, cuarta y siguientes filas en adelante de la tabla muestra perfectamente 6 fotos en cada horizontal.

alguien podria ayudarme con esto? llevo una semana entera con esto y no logro dar con la solucion, este es el codigo, mil gracias de antemano:

ah una cosa: se que en el siguiente codigo que pongo hay html , sql , y php pero todo depende de todo no puedo separar nada para ponerlo en este post.

Código PHP:

Ver original<table class="contenedor_opcs" border="0" cellpadding="0" cellspacing="5" id="tabla_microfotos" bgcolor="#000000">
   
                    <?php
                    
                        $fotos = mysql_query("SELECT id,foto,comentario_foto FROM fotos_bbdd",$conexion);   
 
        
                        $cuenta = 1;
                        while ($foto = mysql_fetch_array($fotos)) {
 
                                $mostrar_foto = $foto['foto'];  
 
                                $cuenta++;
                                
                                
                                if ($cuenta%6 == 1) { echo "</tr><tr>"; }
                                    
                                     echo "
                                
                                        <td align='center' valign='middle' height='133px' width='145px'>
                                        
                                            <div id=$cuenta>                                
                                        
                                                    <a href='#' onClick='muestra_oculta('dock2')' title=''>                                     
                                        
                                                             <img src = '$mostrar_foto' class='sombra_blanca' style='max-height: 105px; max-width: 115px;'>                             
                                        
                                                    </a>                                
                                        
                                            </div>                              
                                        
                                        </td>                               
 
                                    ";
                                
                                }
                                                
                    ?>
 
            </table>

Alexis88 · #2 (**permalink**) 02/02/2014, 14:55

Creo que con un poco más de orden, no tendrías ese inconveniente.

Código PHP:

Ver original<?php
$fotos = mysql_query("SELECT id,foto,comentario_foto FROM fotos_bbdd", $conexion);   
//Siempre debes comprobar que se hayan encontrado datos en la consulta
if (mysql_num_rows($fotos)){
?>
    <table class="contenedor_opcs" border="0" cellpadding="0" cellspacing="5" id="tabla_microfotos" bgcolor="#000000">
<?php
    $f = array();
    while ($row = mysql_fetch_array($fotos))
        $f[] = $row['foto'];
 
    $grupo = array_chunk($f, 6);
 
    foreach ($grupo as $sub_grupo){
?>
        <tr>
<?php
        foreach ($sub_grupo as $foto){        
?>
            <td align='center' valign='middle' height='133px' width='145px'>
                <a href='#' onClick='muestra_oculta('dock2')'>
                    <img src = '<?=$foto?>' class='sombra_blanca' style='max-height: 105px; max-width: 115px;' />                             
                </a>                                
            </td>
<?php
        }
?>
        </tr>
<?php
    }
?> 
    </table>
<?php
    //Siempre libera a la memoria de los datos de la consulta cuando ya no los necesites
    mysql_free_result($fotos);
}
else
    echo "No se encontraron datos en la consulta;
?>

Con la función array_chunk, divido las fotos en grupos de a 6, luego solamente es cuestión de recorrer cada grupo o array e ir imprimiendo sus 6 fotos.

Saludos

mensajeescrito · #3 (**permalink**) 02/02/2014, 17:20

Ha funcionado perfectamente!!!!!

Eres un fenomeno, mil gracias. por ayudarme y por enseñarme lo de la funcion array_chunk.

Y a recordarme que un codigo ordenado es mejor jejejee.

Pero te comento, cierto es que las miniaturas se muestran en filas de 6 fotos perfectamente.

La cuestion es que cuando hacia click en cada una de ellas la miniatura de foto se hacia grande y ahora no.

supongo que es debido a la reestructuracion del codigo que me has pasado.

el codigo que utilizo para ello me llevo un mes programarlo, ya se que es mejorable pero ahora no funciona

El efecto que hace el codigo siguiente que utilizo para ello es mostrar centrada en la pantalla un fondo negro con una opacidad mediana para que se vea un poco el fondo de la web, y la imagen sale

en grande centrada.

¿que puede ser alexis 88?

Código PHP:

Ver original<?php
                            
                                $fotos = mysql_query("SELECT id,foto,comentario_foto FROM fotos_bbdd",$conexion);   
                                 
 
                                  
                                $cuenta = 1;
                                while ($foto = mysql_fetch_array($fotos)) {
                                    
                                        $cuenta++;
                                        if ($cuenta%6 == 1) echo "</tr></tr>";
                                        
                                        $mostrar_foto = $foto['foto'];
                            ?>
                 
                            <!-- Bloque de contenido de cada imagen ======================================================================================= -->             
                          
                                        <div id="<?php echo 'foto_'.$cuenta; ?>" class="contenido" align="center">
                                       
                                        <!-- CENTRADO DE IMAGEN PARA TODOS LOS NAVEGADORES Y TAMAÑOS DE PANTALLA DE MANERA APROXIMADA===== -->                                                      
                                            <table style="border-collapse: collapse" width="1680px" height="1000px" border="4" bordercolor="#ffffff" class="negro_opacidad">
                                              <tr>
                                                <td align="center" valign="middle">     
                                        <!-- ======================================================================================= -->            
                                                
                                                <div class="contenido_foto">
                                               
                                                        <table border="0" class="tabla_fotos" style="background: #fff">
                                                        
                                                              <tr>
                                                              
                                                                <td colspan="2" align="center">
                    
                                                                        <?php echo "<img src = '$mostrar_foto' style='max-height: 450px; max-width: 800px;' class='efecto_polaroid'>" ?>                                                       
                                                                    
                                                                </td>
 
                                                              <tr/>
                                     
                                                              
     
                                                              <tr>                                                           
                                                              
                                                                <td align="left">
                                                    
                                                                    <!-- TITULAR ================== --> 
                                                                    
                                                                    <div class="titular_foto">
                    
                                                                        <?php echo $mostrar_id = $foto['id']; ?> <?php echo $mostrar_comentario_foto = $foto['comentario_foto']; ?><?php echo $cuenta; ?> 
                    
                                                                    </div>  
                           
                                                                </td>
                                                
                                                                <td align="right">
                                                                
                                                                        <!-- EL "a href" SIGUIENTE ES PARA QUE AL HACER CLICK EN UNA MINIATURA PARA HACERLA GRANDE EL MENÚ DOCK DESAPAREZCA EN ESE MOMENTO, 
                                                    
                                                                        LA PARTE DE JAVASCRIPT NECESARIA QUE FALTA ESTA EN EL INDEX SOBRE LA LINEA 122 APROXIMADAMENTE -->  
                                 
                                                                        <a href="#"onClick="muestra_oculta('dock2')" title="">  
                                                                                              
                                                                            <!-- BOTÓN CERRAR ============= --> 
                                                                            
                                                                             <div class="btn_cerrar_foto">
                                                                                                               
                                                                                 <div id="1"> <img src="imagenes/btn_cerrar_foto.png" alt="Cerrar foto"/> </div>
                                                     
                                                                             </div>
                                                                             
                                                                        </a> 
                                                                                        
                                                                </td>    
                                                                
                                                              </tr>
                                                              
                                                        </table>              
              
                                                 </div>
 
                                                 
                                        <!-- ======================================================================================= -->                                                         
                                                </td>
                                              </tr>
                                            </table>                        
                                        <!-- ======================================================================================= -->            
                                     
                                        </div>
                                  
                                
                                
                    <!-- Fin de Bloque repetidor de imagenes ======================================================================================= -->                                            
                                
                            <?php } ?>

Alexis88 · #4 (**permalink**) 02/02/2014, 18:40

Eso lo haría con un poco de jQuery, algo de CSS, un Div y un elemento Img, ambos ocultos. En el mismo documento en donde está la tabla con las filas de 6 imágenes, coloca los dos elementos ocultos después de la tabla:

Código HTML:

Ver original<div id = "fondo"></div>
<img id = "imagen" />

Ahora, aplico estilos al Div y al Img:

Código CSS:

Ver original#fondo, #imagen{
    display: none;
    position: absolute;
}
 
#fondo{
    background: rgba(0, 0, 0, 0.75);
    top: 0;
    left: 0;
    z-index: 1000;
}
 
#imagen{
    width: 20em;
    height: 15em;
    margin: -7.5em 0 0 -10em;
    top: 50%;
    left: 50%;
    z-index: 2000;
    background: #fff;
}
 
img:hover{
    cursor: pointer;
}

Y con jQuery, mostraremos las imágenes al darle un clic a cada una de ellas:

Código Javascript:

Ver original$("img").click(function(e){
    e.preventDefault();
    var ancho = $(window).width() * 2;
        alto = $(window).height() * 2;
 
    $("#fondo").css({
        "width": ancho,
        "height": alto
    });
 
    $("body").css("overflow", "hidden");
 
    $("#imagen").prop("src", $(this).prop("src"));
 
    $("#fondo, #imagen").fadeIn(1500);
});
 
$("#fondo").click(function(){
    $("#fondo, #imagen").fadeOut(1500);
    $("body").css("overflow", "auto");
});

Así es como se ve: http://jsbin.com/aSUnOwut/2

Para cerrar la imagen emergente y el fondo, solamente dale un clic al fondo. Con esto, los enlaces que le asignas a cada imagen, quedan sobrando.

Saludos

mensajeescrito · #5 (**permalink**) 06/02/2014, 10:47

Hola Alexis88, se que he tardado en contestar a tu ultimo post pero es que he intentado todo el tiempo implementar el codigo que has hecho y al fin con exito.

he digamos enrriquecido un poquico mas si cabe implementandole el efecto de slimbox con efecto diapositiva y queda francamente bien.

Pero tengo un pequeño problema sin resolver. veras si cada foto lleva acompañada de un titulo guardado en la bbdd a cada foto.

¿qué y donde tendría que ponerlo en el codigo ?

Lo he intentado de mil manera y no hallo la manera de que cuando la imagen que sea se hace grande vaya acompañada de un titulo y/o un comentario, en definitiva los datos que se piden en el "select", soy novato y me cuesta un horror cada vez que avanzo un poco.

puedes ayudarme con eso plis.

Código PHP:

Ver original<?php
                                    $fotos = mysql_query("SELECT id,foto,comentario_foto FROM fotos_bbdd", $conexion);  
                                    //Siempre comprobar que se hayan encontrado datos en la consulta
                                    if (mysql_num_rows($fotos)){
                                    ?>
                                        <table class="contenedor_opcs" border="0" cellpadding="0" cellspacing="5" id="tabla_microfotos" bgcolor="#000000">
                                       
                                    <?php
                                        $f = array();
                                        while ($row = mysql_fetch_array($fotos))
                                            $f[] = $row['foto'];
                                     
                                        $grupo = array_chunk($f, 6);
                                     
                                        foreach ($grupo as $sub_grupo){
                                    ?>
                                            <tr>
                                    <?php
                                            foreach ($sub_grupo as $foto){        
                                    ?>
                                                 <td align='center' valign='middle' height='133px' width='145px'>
                                   
                                   
                                  <!--style='max-height: 450px; max-width: 800px;'-->                                           
               
                                               
                                                    <a href='<?=$foto?>' rel='lightbox' title='<?php echo $foto ?>'>
                             
                                                            <img src = '<?=$foto?>' class='sombra_blanca' style='max-height: 105px; max-width: 115px;' />
                                                            
                                                    </a>   
                           
                                      
                                                </td>
                                    <?php
                                            }
                                    ?>
                                            </tr>
                                    <?php
                                        }
                                    ?>
                                        </table>
                                    <?php
                                        //Siempre liberar a la memoria de los datos de la consulta cuando ya no necesite
                                        mysql_free_result($fotos);
                                    }
                                    else
                                        echo 'No se encontraron datos en la consulta';
                                    ?>

Una cosa mas tengo la siguiente linea de css para restringir el tamaño de las fotos

a unos pixeles de ancho y alto como maximos cuando la imagen se agranda al hacer click sobre la miniatura.

el asunto es que me pasa lo mismo por mas que intento meter esta linea de codigo para ello , no me lo detecta , ¿en donde fallo?

Código CSS:

Ver originalstyle='max-height: 450px; max-width: 800px;'

gracias por tu paciencia y tu ciencia

mensajeescrito · #6 (**permalink**) 07/02/2014, 01:31

Se que es poca cosa pero me está volviendo loco.
No logro ver de que manera implementar lo que me falta para que me muestre el titulo y el comentario de la foto.

Alexis88 · #7 (**permalink**) 07/02/2014, 13:22

Cita:

Iniciado por mensajeescrito

Pero tengo un pequeño problema sin resolver. veras si cada foto lleva acompañada de un titulo guardado en la bbdd a cada foto.

¿qué y donde tendría que ponerlo en el codigo ?

Añádelo al array:

Código PHP:

Ver original$i = 0;
while ($row = mysql_fetch_array($fotos)){
    $f[$i]["foto"] = $row['foto'];
    $f[$i]["titulo"] = $row['titulo'];
    $i++;
}

Y ya con esto puedes colocar la foto y el título:

Código PHP:

Ver original<tr>
<?php
foreach ($sub_grupo as $foto){        
?>
    <td align='center' valign='middle' height='133px' width='145px'>
        <h3><?=$foto["titulo"]?></h3>
        <img src = '<?=$foto["foto"]?>' class='sombra_blanca' style='max-height: 105px; max-width: 115px;' />                    
    </td>
<?php
}
?>
</tr>

Cita:

Iniciado por mensajeescrito

Una cosa mas tengo la siguiente linea de css para restringir el tamaño de las fotos a unos pixeles de ancho y alto como maximos cuando la imagen se agranda al hacer click sobre la miniatura. El asunto es que me pasa lo mismo por mas que intento meter esta linea de codigo para ello , no me lo detecta , ¿en donde fallo?

Código CSS:

Ver originalstyle='max-height: 450px; max-width: 800px;'

Probablemente el código que utilizas para agrandar las imágenes sea el que se imponga a la línea de código que me muestras, en tal caso, modifica el código para agrandar las imágenes.

Saludos

mensajeescrito · #8 (**permalink**) 08/02/2014, 12:57

Alexis88 eres un fenómeno.

Es perfecto, sale perfecto me has ayudado cantidad.

Te estoy enormemente agradecido.