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
Compartir Articulo: