Galeria prettyphoto paginada con PHP, Jquery y CSS3

Este es un proyecto que realicé hace unos días y que vi necesario compartir con ustedes, los archivos pueden ser descargado desde aquí, (estan documentados) ahora si deseas ver el demo haz click sobre la siguiente imagen:

Ver Demo

Es una paginación de fotografías con php que crea capas según la cantidad de elementos que indique, en el demo solo mostramos 6 elementos o fotos por cada capa, pero ese número es configurable, así como los colores y medidas.

Objetivo: Crear una paginación con Jquery que permita al usuario seleccionar el número de la capa a visualizar sin necesidad de recargar la página web.

A continuación lo necesario:

Dentro del head:

1
2
3
4
5
6
7
<!-- Lo que hace el trabajo -->
<link rel="stylesheet" href="css/galeria.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/paginacion.js" type="text/javascript"></script>
<script src="js/prettyphoto.js" type="text/javascript"></script>
<!-- end lo que hace el trabajo -->

Dentro del Body:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<div id="galeria_johan">
<!-- Puedes eliminarlo -->
<a href="http://www.johanpina.com.ve/galeria-prettyphoto-paginada-con-php-jquery-y-css3/">Ver tutorial</a> <a href="../galeria-prettyphoto-paginada-con-php-jquery-y-css3.rar">Descargar</a>
<hr>
<!-- End Puedes eliminarlo no abuses -->

<h1>Galeria prettyphoto paginada con PHP, Jquery y CSS3</h1>
<div>
<?php
$hay=0;                 /* Me va indicar la cantidad de página o capa en este caso para luego ejecutarlo en la paginación */
$yi=1;                  /* mejor no es tocarlo, lo utilice para llevar el control de las cantidades de imágenes que puedo mostrar por cada página */
$imgi=0;                /* lo puedes eliminar cuando adapte la consulta desde una tabla (DB) lo uses es para intercambiar las imágenes de muestras */
$cantidad_por_page=6;   /* cantidad de fotos que se mostrará por */
for($i=1;$i<=18;$i++){  /* lo puedes cambiar por el while de consulta */
if($yi==1){
$hay++; echo "<div class="pagi".$hay."">";      /* inicio la capa o la página, esto solo se hace cuando $yi=1,
que es mi control de fotografías la clase pagi1, pagi2, ..., pagin */

if($hay>3) $imgi=1; else $imgi++;                 /* borra esto cuando haga una consulta desde una table (BD) */
}
?>
<a href="images/muestra/fo_<?php echo $imgi;?>.jpg" rel="prettyPhoto[gallery]

"
><span></span>
<img src="images/muestra/thumb/fo_<?php echo $imgi;?>.jpg" width="215" alt="" />
</a>
<?php
if($yi==$cantidad_por_page){ $yi=1; echo "</div>"; }else $yi++;  /* cierro la capa o pagina iniciada con $yi=1; aquí la cerramos cuando se cumpla la cantidad de fotos permitida */
}
if(($yi<$cantidad_por_page)&&($yi>1)) echo "</div>";                 /* en caso de que no cierre el div dentro del ciclo, lo hará aquí de forma que evitamos perjudicar otras capas
Se utiliza ya que no siempre se va a cumplir que $yi sea igual a $cantidad_por_page y en el caso que se cumpla
$yi no puede quedar ni menor a la $cantidad_por_page, ni mayor a 1, ya que cuando $yi es igual a $cantidad_por_page,
$yi pasa a ser 1
*/

if($hay>1){                                                           /* Si solo hay una (1) página ¿Para que lo voy a ejecutar? */
echo "<section class="pagination pagi-photo"> ";
echo "<a class="prev"></a>";
for($i=1;$i<=$hay;$i++){                                         /* creo el número de paginas o capas creadas anteriormente guiandome por la variable $hay */
if($i==1) $ajaok="class="current a".$i."""; else $ajaok="class="a".$i.""";   /* Agrego por defecto la calse current a la página nro 1 al resto no,
ahora bien la clase a1, a2, a3, ..., an la voy a utilizar para agregarle la clase current
en el momento que el usuario le hagaa click
*/

echo "&nbsp;<a name="pagi".$i."" ".$ajaok.">".$i."</a>";                          /* Cómo name le agrego pagi1, pagi2, pagi3, ..., pagin, me ayudará a mostrar la capa
o página seleccionada
*/

}
echo "&nbsp;<a class="next"></a>";
echo "</section>";
}
?>
<input type="hidden" name="cant_pagfoto" id="cant_pagfoto" value="<?php echo $hay;?>">   <!-- me va a guardar el total de página creada -->
</div> <!-- end photo-big -->
<!-- Puedes eliminarlo -->
<div style="clear:both"></div>
<hr>
<a href="http://www.johanpina.com.ve/galeria-prettyphoto-paginada-con-php-jquery-y-css3/">Ver tutorial</a> <a href="../galeria-prettyphoto-paginada-con-php-jquery-y-css3.rar">Descargar</a>
<!-- End Puedes elimnarlo -->
</div><!-- end galeria_johan -->

Aquí paginacion.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(document).ready(function(){
$('#galeria_johan .photo-big div').hide().eq(0).show();    /* Muestro solo la primera capa o pagina, las demás quedan ocultas (hide) */
$('#galeria_johan .photo-big .pagi-photo a.prev').hide();  /* El link prev o anterior lo oculot, ya que por defecto la primera página a mostrar es la nro 1 */
$("a[rel^='prettyPhoto']").prettyPhoto();                  /* para activar el zoom de las imágenes con el plugin prettyPhoto de Jquery */
$(function() {
$('#galeria_johan .photo-big .pagi-photo a').each(function(){                    /* Recorro todos los links creados (Paginación: prev 1 2 3 ... next) */
$(this).click(function() {                                                   /* Cuando el usuario hace click en uno de ellos */
total_page=$("input#cant_pagfoto").attr("value");                        /* Conozco la cantidad de páginas o capas creadas que la guarde en el único campo hidden */
actual_page=$("#galeria_johan .photo-big .pagi-photo a.current").html();/* Conozco la pág actual o activa ya que me va a servir como guía en caso de que hayan dado click en next o prev */
evaluar=$(this).attr("class");                                            /* A este enlace es que le voy a agregar la clase current */
mostrar=$(this).attr("value");                                            /* Es la capa que vamos a mostrar */
siguiente=parseInt(actual_page)+1;
anterior=parseInt(actual_page)-1;
if(evaluar=="next") proxima_page=siguiente;                                /* he creado una variable llamada proxima_page obvio que si el usuario ha dado click en next es la siguiente*/
else if(evaluar=="prev") proxima_page=anterior;                         /* Si el usuario ha dado click en prev es la página o capa anterior que desea visualizar */
else proxima_page=$(this).html();                                       /* de lo contario la pagina que desea visualizar es la que le ha dado click, puede ser el 2,3,4, o n*/
$("#galeria_johan .photo-big div").hide();                                /* Ocultamos las capas de fotografías de forma general */
$("#galeria_johan .photo-big .pagi"+proxima_page).show();               /* Mostramos la página o capa que indicarón que querian visualizar */
$("#galeria_johan .photo-big .pagi-photo a.current").removeClass("current");     /* removemos o quitamos la clase current, al enlace que tenia la clase current */
$("#galeria_johan .photo-big .pagi-photo a.a"+proxima_page).addClass("current"); /* agregamos la clase current a quien al enlace que realmente le corresponda */

if(proxima_page==total_page) $('#galeria_johan .photo-big .pagi-photo a.next').hide(); else $('#galeria_johan .photo-big .pagi-photo a.next').show(); /* si es la última página no mostramos el enlace next*/
if(proxima_page==1) $('#galeria_johan .photo-big .pagi-photo a.prev').hide(); else $('#galeria_johan .photo-big .pagi-photo a.prev').show();          /* Si la página o capa es la 1 para que vamos a mostrar el enlace prev */
})
})
});
})

Aquí galeria.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
a.boton{
padding:5px;
background:#000;
color:#FFF;
}
#galeria_johan{
width:900px;    /* ancho del contenedor que va a ocupar la galeria */
margin:0 auto;
}
#galeria_johan a{
text-decoration:none;
cursor:pointer;
}
#galeria_johan .photo-big {
width: 800px;     /* ancho de la galeria */
}
#galeria_johan a.photo {
float: left;
width: 215px;     /* ancho del thumbnail */
position: relative;
border-bottom: 2px solid #ededed;  /* border bottom color del thumbnail */
border-top: 1px solid #ededed;     /* border top color del thumbnail */
box-shadow: 0 0 0 transparent inset;
margin:3px;                          /* espacio entre cada thumbnail */
}
#galeria_johan a.photo img {
float: left;
position: relative;
z-index: 5;
opacity: 0.6;                    /* lo que permite opacar los thumnails puedes jugar desde 0.1 a 1 */
}
#galeria_johan a.photo span {
opacity: 0;
position: absolute;
left: 50%;
top: 50%;
z-index: 10;
width: 91px;
height: 91px;
background: url(../images/lens.png) no-repeat;     /* aquí llamamos a la imagen lupa que aparece al hacer hove sobre el thumbnail debes tener cuidado si la cambias de carpeta */
margin-left: -45px;
margin-top: -45px;
}
#galeria_johan a.photo:hover  {
box-shadow: 0 4px 0 #19abee, 0 -4px 0 #19abee;  /* shadow y color que aparece en el top y bottom cuando haces hover sobre el thumbnail  */
}
#galeria_johan a.photo:hover img {
opacity: 1;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
#galeria_johan a.photo:hover span {
opacity: 1;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
/* PAGINACION */
#galeria_johan .pagination {
float: left;
width: 100%;
margin: 10px 0 60px 0;
text-align: center;
}
#galeria_johan .pagination a {
padding: 5px 8px;
text-decoration: none !important;
font-style: normal !important;
font-size: 0.688em;
color: white;
opacity:1;
}
#galeria_johan .pagination a:hover,
#galeria_johan .pagination a.current,
#galeria_johan .pagination a.prev:hover,
#galeria_johan .pagination a.next:hover {
background-color: #242840;             /* color de fondo cuando pasas el cursor o cuando esta activa la página */
}
#galeria_johan .pagination a.current {
font-weight: bold;
}
#galeria_johan .pagination a.prev {
background: url(../images/arrow-nav.png) 8px -49px no-repeat;
padding: 5px 9px;
}
#galeria_johan .pagination a.next {
background: url(../images/arrow-nav.png) 8px -163px no-repeat;
padding: 5px 9px;
}
#galeria_johan .pagination a,
#galeria_johan .pagination a.prev,
#galeria_johan .pagination a.next{
background-color:#19abee;              /* color de fondo de cada enlace o link de paginación */
}
#galeria_johan .pagination span {
font-size: 0.688em;
}
#galeria_johan .pagination a.prev:hover {
background-position: 8px 8px;
}
#galeria_johan .pagination a.next:hover {
background-position: 8px -106px;
}

A continuación puedes ver el ejemplo en marcha haciendo click aqui o descargarlo desde aquí.

Si te parece útil por favor no olvides compartirlo :).

17 pensamientos en “Galeria prettyphoto paginada con PHP, Jquery y CSS3”

  1. Hola Johan! en primer lugar gracias por tu Trabajo!
    He insertado tu galeria de imagens en mi web, però no consigo canviar las miniaturas que se muestran en la portada, y tampoco se como añadir mas imagenes, me podrias echar una mano?
    Saludos

    1. Hola Jesús, puedes implementarlo desde una consulta a una base de datos MySQL. En la documentación hago la orientación en la línea que puedes agregar el while de la consulta.

      Es la forma más cómoda de hacerlo, otra forma es que haga todo manual o que agregues las otras fotos indicando el nombre de las mismas un número correlativo y en donde dice:

      1
      for($i=1;$i<=18;$i++){

      cambias el número 18 por la cantidad de fotos a imprimir, siendo ese valor la última foto a mostrar.

  2. Hola Johan! en primer lugar gracias por tu rapida respuesta, tengo la base de datos creada con las imagenes subidas,pero no se como hacer la consulta, podrias guiarme un poco mas o sabes donde puedo adquirir esos conocimientos?
    Gracias!!

    SaLUDOS

    1. Hola Jesús, visite tu sitio web y ya vi en donde quieres implementar la galería, si quieres agrega la tabla de galería que estas usando, en caso que no tenga avísame y me atreveré a crear un post para brindarte la solución. Por favor dame detalle de lo que necesitas.

  3. Hola Johan eres muy amable, gracias por tu ayuda, Mira tengo esta base de datos:

    Base de dades s15f98e6_creacionbd
    Estructura de la taula tblslider
    Columna Tipus Nul Defecte
    idcontador int(11) No
    strImagenGrande varchar(100) No
    strImagenPequena varchar(100) No
    strTitulo varchar(200) No
    strSubtitulo varchar(200) No
    strMenu varchar(200) No
    strLink varchar(200) No
    intOrden int(11) Si NULL
    intEstado int(11) Si NULL

    y lo que necesito es que de muestren en la galeria las imagenes cargadas en la base de datos como “strImagenGrande” el titulo “strTitulo” el Link “strLink” el orden donde se mostrara “intOrden” etc…

    No se si me explico?
    Lo de subir las imagenes a la base de datos lo tengo claro, però no se como hacer que se muestren el la galeria…

    Gracias! un saludo!!

  4. buen dia johan, bastante bueno tu codigo, quisiera saber como hago para que me muestre todas las imagenes de la carpeta y no repita en la priemra pagina la numero fo_1 y asi en la dos y tres… gracias

    1. Hola Elvin, hay dos formas de hacerlo, la primera es consultando desde una base de datos o supongamos que son 18 fotos las que necesitas mostrar organizada en 6 por cada página, puedes colocar como nombre a cada foto de la siguiente forma fo_1,fo_2,fo_3… fo_18, y cambia del código la siguiente línea (aproximadamente la línea 51):

      1
      if($hay>3) $imgi=1; else $imgi++;

      por

      1
      $imgi++;

      Al probarlo por favor avísanos si te sirvió.

        1. Hola Serena, solucione tu problema, en realidad la variable $imgi++; debe estar fuera del IF,

          ojo: esta linea:
          if($hay>3) $imgi=1; else $imgi++; que esta dentrio del IF
          debes borrarla o dejarla como comentario.

          Salludos

  5. gracias estoy tratando de integrarla ami pagina.. estoy empezando en esto y la verdad soy fatal.. espero llegar a tener la calidad tuya.. xq los espacio, margenes, estilos es una ensalada q cuesta, pero con empeño. creo q hare algo decente

  6. Hola. No se hacen consultas a base de datos para consultar las fotos que quiero cargar. Por lo tanto veo un poco raro pudiendolo hacer sin usar php. y con mucho menos codigo.

    1. De todas maneras gracias por el aporte. Estoy buscando una galeria que haga lo mismo q esta pero consultando base de datos. Creo q con este codigo podre adaptar una consulta.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*