Comunidad de diseño web y desarrollo en internet online

Galería de imágenes con php

Citar            
MensajeEscrito el 26 Ene 2009 09:51 pm
Originalmente en 2005 realicé un pequeño script en php que me permitia montar una simple galería de imagenes con php , el cual hoy fue comentado en este post del foro de php y mysql del cual recibi varios reportes de inconvenientes y comentarios a ver si los podia solucionar.

Eso me incentivo a mejorarlo un poco (porque se le pueden agregar muchisimas cosas mas, cosa que no descarto haré en un futuro no muy lejano) y resulto lo siguiente.

Básicamente se trata de un script totalmente parametrizado, hasta el css tiene parametros definidos al principio del script con el unico fin de que con solo modificar unas pocas variables disponer de una galeria de fotos simple pero efectiva.

Debo aclarar que no soy programador profesional, sino todo lo contrario, lo mio es empírico 100%, ensayo - error. :lol:

Código :

<?php
/// Definicion de variables de configuracion
$contador = 1;
// Directorio donde se encuentras las imagenes
$path = "./imagenes/";
// Prefijo que tiene las imagenes
$imgPrefijo = "imagenGaleria_";
// Cantidad de imagenes por fila
$imgXfila = "3";
// Cantidad total de imagenes
$totalImagenes = 9;
// Margenes superior, Lateral derecho, Inferior, Lateral Izquierdo en ese orden
$espaciadoImagenes = array(3,3,1,1); 
// Atributos de borde. Color, Tipo, Ancho
$bordeImagenes = array("#00f","solid",1);
// Atributos ancho y alto de la imagen miniatura 
$thumbAnchoAlto = array(100,70);
//
?>
<html>
<head>
   <title>Galeria de imagenes con php</title>
   <style>
      img {
         margin: <?php echo $espaciadoImagenes[0];?>px <?php echo $espaciadoImagenes[1];?>px <?php echo $espaciadoImagenes[2];?>px <?php echo $espaciadoImagenes[3];?>px;
         border:<?php echo $bordeImagenes[0];?> <?php echo $bordeImagenes[1];?> <?php echo $bordeImagenes[2];?>px;
      }
      .thumb {
         width: <?php echo $thumbAnchoAlto[0];?>px;
         height: <?php echo $thumbAnchoAlto[1];?>px;
      }
   </style>
</head>
<body>
<?php
    if(!isset($_GET[imagen])){

     while(file_exists($path.$imgPrefijo.$contador.'.jpg') == true and $totalImagenes >= $contador){
      echo '<a href="'.$PHP_SELF.'?imagen='.$imgPrefijo.$contador.'"><img src="'.$path.$imgPrefijo.$contador.'.jpg" class="thumb" /></a>';
      if($contador >= $imgXfila and is_int($contador/$imgXfila)){
         echo '<br />';
      }
      $contador++;
     }
   
    } else {
       echo '<img src="'.$path.$_GET[imagen].'.jpg" /><br /><a href="javascript:void(\'\');" onclick="history.go(-1);">Volver a la galeria</a>';
    }
?>
</body>
</html>


Invito a que lo prueben y todo aquel que desee aportar al respecto o comentar acerca de mejoras lo haga libremente.

Saludos
Santiago Lobos

Por slobos

1 de clabLevel



 

firefox
Citar            
MensajeEscrito el 29 Ene 2009 03:22 am
Un muy buen trabajo santiago, gracias por tu apoyo :).

Por wraven

13 de clabLevel



 

firefox
Citar            
MensajeEscrito el 10 Abr 2009 09:14 am
Muy bueno tu script, me tome la libertad de modificar la parte de como abre la imagen en una página y le agregue el efecto de lightbox, a mi parecer le da otro toque de elegancia y sencillez . :wink:

Simplemente agregue las librerías correspondientes del lightbox, las cuales pueden descargar desde este link.

Código Javascript :

   <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
   <script src="js/prototype.js" type="text/javascript"></script>
   <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
   <script src="js/lightbox.js" type="text/javascript"></script>

En el codigo PHP elimine el else ya que no me servía asi como lo queria, y modifique el href.

Código PHP :

   
<?php
    if(!isset($_GET[imagen])){

     while(file_exists($path.$imgPrefijo.$contador.'.jpg') == true and $totalImagenes >= $contador){
//El código que se modifico fue el href al cual se le agrego la misma dirección de la imagen
//para que se abriera en el mismo lugar y agregar la etiqueta rel="lightbox[Galeria] que es la que hace funcionar 
//el efecto del lightbox.
      echo '<a href="'.$path.$imgPrefijo.$contador.'.jpg" rel="lightbox[Galeria]" ><img src="'.$path.$imgPrefijo.$contador.'.jpg" class="thumb" /></a>';
      if($contador >= $imgXfila and is_int($contador/$imgXfila)){
         echo '<br />';
      }
      $contador++;
     }   
    } 
?>



Saludos

Por flashreloco

Claber

1310 de clabLevel

1 tutorial
1 articulo

Genero:Masculino  

Webdesigner & Mandilon 2.0

firefox
Citar            
MensajeEscrito el 14 Jul 2009 10:45 pm
una consulta, lo utilice y anda perfecto en mozilla pero que tengo que moficar para que funcione de la misa manera en IE??? agradeceria la respuesta
saludos

Por fakunu

5 de clabLevel



 

firefox
Citar            
MensajeEscrito el 15 Jul 2009 01:09 pm
A caray, pues en teoría nada ya que esta testeado y el efecto utilizado es multibrowser, no debería de pasar algo así.
Que no sucede o que es lo que hace?

Saludos

Por flashreloco

Claber

1310 de clabLevel

1 tutorial
1 articulo

Genero:Masculino  

Webdesigner & Mandilon 2.0

firefox
Citar            
MensajeEscrito el 15 Jul 2009 05:06 pm
fe de erratas: si anda en IE y en MOZILLA pero anda solo, no anda en el lugar donde lo pongo dentro de la web,
la web es esta y anda solo de forma perfecta en esta direcion quiciera saber que es lo que debo modificar par que anda de forma correcta en IE ya que anda en mosilla son el light box que bueno no importa pero anda bien, pero en IE no funciona aparecen las imagenes de tamaño original y una detras de otra

saludos gracias

Por fakunu

5 de clabLevel



 

firefox
Citar            
MensajeEscrito el 08 Nov 2009 11:05 pm
slobo me parece muy bueno tu codigo, copie el codigo original y cuano lo probe me salio un error, talvez me puedas ayudar a resolverlo, el error es el siguiente:

Notice: Use of undefined constant imagen - assumed ‘imagen’ in F:\wamp\www\galeria\galeria.php on line 49
en dicha linea apare el sguiente código:

if(!isset($_GET[imagen])){

Me podrias ayudar con eso por favor?

muy agradecido.

Por peterxd

1 de clabLevel



 

msie8
Citar            
MensajeEscrito el 08 Nov 2009 11:14 pm
bueno ya no importa, ya lo arregle era que esa constante no estaba bien definida, asi que lo cambie por $imgPrefijo y se arreglo :)

gracias

Por peterxd

1 de clabLevel



 

msie8

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.