boton mostra mas en html5

javierconesa23 · #1 (**permalink**) 08/09/2016, 21:36

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

sustentio · #2 (**permalink**) 09/09/2016, 13:13

necesitas javascript para eso, incluso con CSS pudieras hacer algo, pero con Javascript es sencillo