Ejemplo de galería de imágenes en PHP
Fecha Publicación:
17 de Julio de 2019
Fecha Modificación:
05 de Octubre de 2019
Galeria Imagenes puertas madera
<div id="ctn_conte_dinamico_my_gallery">
<?php
$sql_plantillas = "Select * FROM plantillas_web order by orden_plantilla asc" ;
//echo $sql_seccion ;exit;
$rs_plantillas = db_query($sql_plantillas);
while ($row_plantillas=db_fetch_array($rs_plantillas))
{
?>
<div class="ctn_imagen_compartir_redes">
<figure itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="<?=$row_plantillas['imagen_thumbnail'];?>" width="250">
<figcaption class="adorno">
<p>Fig.1 - París de noche (Enero de 2016)</p>
</figcaption>
</figure>
</div>
<?php
} // fin while
?>
</div>
Los Estilos
<style>
#ctn_conte_dinamico_my_gallery {width: 100%;display: flex;Justify-content: Space-between;
Flex-wrap: wrap; padding: 10px 20px;}
#ctn_conte_dinamico_my_gallery figure img:hover { opacity: 0.8; }
#ctn_conte_dinamico_my_gallery .ctn_imagen_compartir_redes { width: calc((100% - 30px)/4);
flex: none;box-sizing: border-box;margin-bottom: 30px; display: flex;justify-content: center;
flex-wrap: wrap; background-color: #52250B; color: #fff;}
#ctn_conte_dinamico_my_gallery figure {width: 100%;border-top: 4px solid #52250B;}
#ctn_conte_dinamico_my_gallery figure a {/* width: 100%; */ color: #fff;}
#ctn_conte_dinamico_my_gallery img {width: 100%;max-width: 100%;display: flex;margin: 0 auto;}
#ctn_conte_dinamico_my_gallery figcaption { font-size: 20px;
text-align: center; width: 100%; font-weight: 500; display: flex; justify-content: space-between; }
#ctn_conte_dinamico_my_gallery figcaption p { display: flex;text-align: center;margin: 0 auto;padding: 10px;}
#ctn_conte_dinamico_my_gallery .adorno::after {content: ""; bottom: 0; right: 0;
border-style: solid; border-width: 0 0 30px 30px; border-color: transparent transparent #FFB24E transparent;}
@media all and (min-width: 600px) and (max-width: 1280px) {
#ctn_conte_dinamico_my_gallery .ctn_imagen_compartir_redes { width: calc((100% - 200px)/4) !important;
height: auto /*315px !important*/;margin-bottom: 20px !important; }
}
@media all and (max-width: 400px) {
#ctn_conte_dinamico_my_gallery .ctn_imagen_compartir_redes {width: calc((90%)/2);}
}
</style>
Articulo : 956 - Veces Leidas