hola buenas tengo el siguiente codigo que me muestra unas imagenes en 3 tipos de categorias , :
Todas, Creciones y eventos :
Código HTML:
<div class="container">
<div class="gallery-filters">
<a href="#" class="gallery-filter gallery-filter-active" data-filter="*">Totes</a>
<a href="#" class="gallery-filter " data-filter=".menu">Creacions </a>
<a href="#" class="gallery-filter" data-filter=".rest">Events</a>
</div>
<div class="bold-separator"><span></span></div>
<div class="row">
<div class="col-md-12">
<div class="gallery-items three-coulms grid-small-pad popup-gallery">
<?php
$galeria=array(
/* MENU */
array(
'nombre' => 'G-menu-1.JPG',
'categoria' => 'menu'
),
array(
'nombre' => 'G-menu-2.JPG',
'categoria' => 'menu'
),
array(
'nombre' => 'G-menu-3.JPG',
'categoria' => 'menu'
),
array(
'nombre' => 'G-menu-4.JPG',
'categoria' => 'menu'
),
array(
'nombre' => 'G-menu-5.JPG',
'categoria' => 'menu'
),
array(
'nombre' => 'G-menu-6.JPG',
'categoria' => 'menu'
),
array(
'nombre' => 'G-menu-7.JPG',
'categoria' => 'menu'
),
/* RESTAURANT */
array(
'nombre' => 'G-restaurant-1.JPG',
'categoria' => 'rest'
),
array(
'nombre' => 'G-restaurant-2.JPG',
'categoria' => 'rest'
),
array(
'nombre' => 'G-restaurant-3.JPG',
'categoria' => 'rest'
),
array(
'nombre' => 'G-restaurant-4.JPG',
'categoria' => 'rest'
),
array(
'nombre' => 'G-restaurant-5.JPG',
'categoria' => 'rest'
),
array(
'nombre' => 'G-restaurant-6.JPG',
'categoria' => 'rest'
)
);
?>
<!-- 1 -->
<?php
$i=1;
foreach($galeria as $g){
?>
<div class="gallery-item <?php echo $g['categoria']; ?>">
<div class="grid-item-holder">
<div class="box-item">
<a href="<?php echo site_url('static/img/'.$g['nombre']); ?>" title="Image information">
<span class="overlay"></span>
<i class="fa<?php if($i>1){ ?> fa-search<?php } else { ?> fa-play<?php } ?>"></i>
<img src="<?php echo site_url('static/img/'.$g['nombre']); ?>" alt="">
</a>
</div>
</div>
</div> lo que me gustria hacer es, por ejempo que se mostraran solo 3 imagenes y si hubiera mas en la categoria , que se mostrara un boton para desplegar las imagenes restantes.
Gracias de antemano
PD: es un codigo de una pagina en html5