Galeria de Imagenes php+js+mysql

JoseAlejandro_Realza · #1 (**permalink**) 02/02/2009, 15:49

Hola Que Tal... Saludos; Tengo una duda y ya esta algo fuerte.... Espero puedan ayudarme.

Estoy Trabajando en una galeria de Fotos, que trabaja bajo un php y un archvios css y js, y me gustaria poder hacer que esas imagenes salgan de las variables de una base de datos; yo tengo hecho un script que me muestra los datos de un usuario segun el _GET, y genera todos los resultados. Intente poniendo en el php de la galeria variables en las url que dicen de donde vienen las fotos, y trabaja chevere, pero no he podido hacer que las variables sean de la base de datos, si no una variable ya definida, me gustaria que haga la consulta de la base de datos y las generere sin problemas... Aca dejo el codigo del php

Galeria.php

Código PHP:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<title>demogallery / maart 2008 / Picasa Template by www.paulvanroekel.nl </title> 
 
<link href="css/template.css" rel="stylesheet" type="text/css" /> 
 
<link href="scripts/lightbox/lightbox.css" rel="stylesheet" media="screen" type="text/css" /> 
 
<script type="text/javascript" src="scripts/lightbox/prototype.js"></script> 
 
<script type="text/javascript" src="scripts/lightbox/scriptaculous.js?load=effects"></script> 
 
<script type="text/javascript" src="scripts/lightbox/lightbox.js"></script> 
 
</head> 
 
<? 
 
$dd = "http://www.enmaracay.net/data/bg.jpg"; 
 
//recibimos la variable id enviada en el enlace por GET  
$id=$_GET['usuario'];  
 
//conectamos a la base  
$connect=mysql_connect("localhost","usuario","contraseña" );  
//Seleccionamos la base  
mysql_select_db("enmaracay_usuarios",$connect);  
//hacemos las consultas  
$result=mysql_query("select * from galeria where usuario='$usuario'"  
,$connect);  
//Una vez seleccionados los registros los mostramos para su edición  
while($row=mysql_fetch_array($result))  
{  
 
$df = "$row[url]"; 
 
}  
mysql_free_result($result); 
mysql_close($connect);  
 
?> 
 
 
 
 
<body> 
 
 
 
<div id="container"> 
 
 
 
 
 
<div id="title"> 
 
          <h1>demogallery</h1> 
 
</div> 
 
 
 
 
 
    <div id="description"> 
 
              <p> <span class="date">&nbsp; &nbsp;[ maart 2008  / 10 afbeeldingen ]</span></p> 
 
    </div>         
 
 
 
         
 
 
 
        <div id="gallerycontainer"> 
 
 
 
        <div class="thumbnail"> 
 
            <a class="thumbnailhover" title="nr01.jpg"  rel="lightbox[537]" href="images/nr01.jpg"><img src="thumbnails/nr01.jpg" title="nr01.jpg" alt="nr01.jpg" width="150" height="100"  border="0" /> 
 
            nr01.jpg</a> 
 
          </div> 
 
 
 
        <div class="thumbnail"> 
 
            <a class="thumbnailhover" title="nr02.jpg"  rel="lightbox[537]" href="images/nr02.jpg"><img src="thumbnails/nr02.jpg" title="nr02.jpg" alt="nr02.jpg" width="150" height="100"  border="0" /> 
 
            nr02.jpg</a> 
 
          </div> 
 
 
 
        <div class="thumbnail"> 
 
            <a class="thumbnailhover" title="nr03.jpg"  rel="lightbox[537]" href="images/nr03.jpg"><img src="thumbnails/nr03.jpg" title="nr03.jpg" alt="nr03.jpg" width="150" height="100"  border="0" /> 
 
            nr03.jpg</a> 
 
          </div> 
 
 
 
        <div class="thumbnail"> 
 
            <a class="thumbnailhover" title="<?php echo $df; ?>"  rel="lightbox[537]" href="<?php echo $df; ?>"><img src="<?php echo $df; ?>" title="<?php echo $df; ?>" alt="<?php echo $df; ?>" width="150" height="100"  border="0" /> 
 
            nr04.jpg</a> 
 
          </div> 
 
 
 
        <div class="thumbnail"> 
 
            <a class="thumbnailhover" title="<?php echo $row[url]; ?>"  rel="lightbox[537]" href="<?php echo $row[url]; ?>"><img src="<?php echo $row[url]; ?>" title="<?php echo $row[url]; ?>" alt="<?php echo $row[url]; ?>" width="150" height="100"  border="0" /> 
 
            nr05.jpg</a> 
 
          </div> 
 
 
 
        <div class="thumbnail"> 
 
            <a class="thumbnailhover" title="nr06.jpg"  rel="lightbox[537]" href="images/nr06.jpg"><img src="thumbnails/nr06.jpg" title="nr06.jpg" alt="nr06.jpg" width="150" height="100"  border="0" /> 
 
            nr06.jpg</a> 
 
          </div> 
 
 
 
        <div class="thumbnail"> 
 
            <a class="thumbnailhover" title="nr07.jpg"  rel="lightbox[537]" href="images/nr07.jpg"><img src="thumbnails/nr07.jpg" title="nr07.jpg" alt="nr07.jpg" width="150" height="100"  border="0" /> 
 
            nr07.jpg</a> 
 
          </div> 
 
 
 
        <div class="thumbnail"> <a class="thumbnailhover" title="nr10.jpg"  rel="lightbox[537]" href="images/nr10.jpg"><img src="thumbnails/nr10.jpg" title="nr10.jpg" alt="nr10.jpg" width="150" height="100"  border="0" /> nr10.jpg</a> </div> 
        <div class="thumbnail"> 
 
            <a class="thumbnailhover" title="nr09.jpg"  rel="lightbox[537]" href="images/nr09.jpg"><img src="thumbnails/nr09.jpg" title="nr09.jpg" alt="nr09.jpg" width="150" height="100"  border="0" /> 
 
            nr09.jpg</a> 
 
          </div> 
 
 
 
        <div class="thumbnail"> 
 
            <a class="thumbnailhover" title="nr08.jpg"  rel="lightbox[537]" href="images/nr08.jpg"><img src="thumbnails/nr08.jpg" title="nr08.jpg" alt="nr08.jpg" width="150" height="100"  border="0" /> 
 
            nr08.jpg</a> 
 
          </div> 
 
 
 
        <div class="thumbnail"> 
 
            <a class="thumbnailhover" title="nr10.jpg"  rel="lightbox[537]" href="1.jpg"><img src="2.jpg" title="nr10.jpg" alt="nr10.jpg" width="190" height="190"  border="0" /> 
 
            nr10.jpg</a>          </div> 
 
 
 
 
 
    <div id="footer"> 
 
        </div> 
 
 
 
    </div> 
 
 
 
</div> 
 
 
 
</body> 
 
</html>

Triby · #2 (**permalink**) 02/02/2009, 16:01

Primero obtienes todos los datos en una matriz:

Código PHP:

  <?php
$df = array();
//Una vez seleccionados los registros los mostramos para su edición 
while($row=mysql_fetch_array($result)) 
    $df[] = $row;

// Continuas hasta donde vas a iniciar la salida html:
?>
<body>
<div id="container">
<div id="title">
          <h1>demogallery</h1>
</div>
    <div id="description">
              <p> <span class="date">&nbsp; &nbsp;[ maart 2008  / 10 afbeeldingen ]</span></p>
    </div>        
        <div id="gallerycontainer">
<?php
// Aqui muestras las imagenes:
foreach($df as $img) {
    echo "<div class=\"thumbnail\">\n";
    echo  "<a class=\"thumbnailhover\" title=\"{$img['titulo']}\"  rel=\"lightbox[537]\" href=\"{$img['url']}\"><img src=\"{$img['thumb']}\" alt=\"{$img['titulo']}\"  />{$img['titulo']}</a>\n";
    echo "</div>\n";

}

// Debajo finalizas tu html normal
?>
</div>
</body>
</html>

Edito: Solo coloca los nombres de campo adecuados en cada $img['campo']

JoseAlejandro_Realza · #3 (**permalink**) 02/02/2009, 16:12

mmm muchisimas gracias hermano, pero la consulta del php la dejo tal cual como la tengo alli?

Triby · #4 (**permalink**) 02/02/2009, 16:21

Si, todo lo anterior al while de la consulta se queda igual, basicamente solo se modifica el while de lectura de la consulta y la parte donde se muestran las imagenes, el resto queda tal como lo tienes.

JoseAlejandro_Realza · #5 (**permalink**) 02/02/2009, 16:51

Muchisimas Gracias Hermano... todo Funciono, tenia problemas pero era por como tenia mis carpetas, Saludos y de verdad se lo Agradesco..! =D

Oye men disculpa, y como podria colocar a las imagenes thumbnails, volverse a asignar el tamaño en que se mostraran

Código PHP:

  <a class="thumbnailhover" title="nr01.jpg"  rel="lightbox[537]" href="images/nr01.jpg"><img src="thumbnails/nr01.jpg" title="nr01.jpg" alt="nr01.jpg" width="150" height="100"  border="0" />  
 
            nr01.jpg</a>

alli salen las dimension para mostrarlas, pero si las inserto igual empieza a marcar error, podrias darme otra mano?

Gracias por Todo.! =)

Triby · #6 (**permalink**) 02/02/2009, 17:11

Solo agrega los atributos que deseas, escapando las comillas con \"

width=\"###\" height=\"###\" border=\"0\"

Por cierto, esos atributos ya son "obsoletos" en las nuevas reglas de estandares xHTML y CSS, es mejor asignarlos por CSS que directamente en el HTML

Ejemplo:
.thumbnail img {
width:100px;
height:100px;
border:0;
}

JoseAlejandro_Realza · #7 (**permalink**) 02/02/2009, 17:25

brother ya tengo esas notas en el css pero igual o trabaja, aca esta el codigo css

Código PHP:

  /* 
    ------------------------------------------------------------------ 
    created by         : Paul van Roekel 
    date            : july 2006     
    ------------------------------------------------------------------     
    You're welcome to use any code in this file for your own projects 
    the used images however are copyrighted and not for use  
    on other sites! Want to contact me? Use the form on this website... 
*/ 
 
 
 
 
 
body { 
    margin: 0px; 
    padding: 0px; 
    background: #000000; 
    font: 12px/24px Georgia, "Times New Roman", Times, serif; 
} 
 
html{ 
    margin: 0px; 
    padding: 0px; 
} 
 
 
#container { 
    background: #333333 url(images/bg_body.jpg) repeat-x left top; 
    color:#FFFFFF; 
    line-height: 18px; 
    margin: 15px auto; 
    width: 800px; 
    padding: 5px 20px 20px 20px; 
    border: 1px solid #000; 
} 
 
 
#title h1  { 
    color: #76B41C; 
    letter-spacing: 1px; 
    padding: 5px; 
    margin: 10px; 
    font: bold 18px Georgia, "Times New Roman", Times, serif; 
    text-transform: capitalize; 
} 
 
#description{ 
    background: #000000; 
    border: 1px solid #333333; 
    padding: 10px; 
    margin: 5px; 
    width: 90&#37;; 
    float: left; 
    height: auto; 
    font-weight: bold; 
} 
 
#content { 
    text-align:left; 
    padding: 0px;  
    margin: 0px; 
    color: #FFFFFF;         
} 
 
.date{ 
    font-weight: normal; 
    color: #666666; 
 
} 
 
 
 
 
 
 
 
 
 
 
#content a { 
    color: #fff; 
    text-decoration: underline; 
} 
 
#content a:visited   { 
    color: #999999; 
    text-decoration: underline; 
} 
 
#content a:hover  { 
    color: #000000; 
    text-decoration: underline; 
    background: #CCCCCC; 
    border-bottom: 1px solid #000000; 
    } 
 
 
#content .category img { 
    background: #fff; 
    padding: 7px; 
    border-top: 1px solid #FFFFFF; 
    border-right: 1px solid #333333; 
    border-bottom: 1px solid #333333; 
    border-left: 1px solid #FFFFFF; 
    float:right 
} 
 
 
 
#content .category { 
    margin: 60px 0px 50px 0px; 
    padding: 30px 0px 10px 0px; 
    clear:both; 
    height:auto; 
} 
 
 
 
 
 
 
 
     
 
.imageborderlarge { 
    padding: 7px; 
    margin: 5px 0px; 
    border: 1px solid #CCCCCC; 
    background: #FFFFFF; 
} 
 
#footer { 
    text-align:center; 
    padding: 30px 0px 10px; 
    clear: both; 
    float: none; 
    margin: 0px; 
    font-size: 10px; 
    color: #999999; 
    } 
 
 
#footer a:link, #footer a:visited { 
    color: #666666; 
    text-decoration: none; 
    font-weight: normal; 
    } 
 
#footer a:hover { 
    color: #FFFFFF; 
} 
 
 
 
 
 
.unvisible {  
    display: none; 
 } 
 
 
 
 
 
 
 
 
.thumbnail { 
    float: left; 
    margin: 5px; 
    padding: 8px; 
    text-align: center; 
    color: #CCCCCC; 
    width: 166px; 
    height: 175px; 
    } 
 
 
.thumbnailhover{ 
    background:  none;     
    display:block; 
    width: 166px; 
    height: 175px; 
} 
 
a.thumbnailhover:hover{ 
        background:  url(images/bg_body.jpg) no-repeat left top;     
 
    display:block; 
    width: 166px; 
    height: 175px; 
        color: #76B41C; 
    font-weight: bold; 
 
     
} 
 
 
.thumbnail img{ 
    background: #000; 
    padding: 7px; 
    margin: auto; 
    display:block; 
} 
 
 
 
.thumbnail a { 
    color:#999999; 
    text-decoration: none; 
} 
 
/* non IE  hover  
div.thumbnail:hover{ 
    background: #000; 
    color: #76B41C; 
    font-weight: bold; 
} 
 
*/ 
 
 
 
 
a img { 
border:none; 
 
} 
 
#gallerycontainer{ 
    padding: 0px; 
    text-align:center; 
}

Triby · #8 (**permalink**) 02/02/2009, 17:29

No le estas asignando tamaño:

Código:

.thumbnail img{
    background: #000;
    padding: 7px;
    margin: auto;
    display:block;
    /* Prueba colocando aqui width y height con sus respectiva medidas */
}

Edito: Si ya el problema se limita a CSS te recomiendo preguntes en el subforo correspondiente, son mejores que nosotros para esas cuestiones

JoseAlejandro_Realza · #9 (**permalink**) 02/02/2009, 18:38

Gracias por Todo Brother... ahora si esta como quiero... solo me faltaria editar el upload, para que redimenciones las imagenes si son muy grande pero sera luego porque sin querer borre mi index jajaja, tenia problemas con mi ftp y pues... Gracias Por Todo =)

Oye disculpa, pero tengo una duda, si yo quisiera que en vez de mostrarse en columnas de 4 sean columnas de 3 como podria hacerlo?

Triby · #10 (**permalink**) 03/02/2009, 13:49

Eso es mas tema de css, pero puedes intentar poner un width de aproximadamente 220 a .thumbnail en lugar de los 166 que tiene actualmente.

JoseAlejandro_Realza · #11 (**permalink**) 03/02/2009, 13:52

mmm ya habia resuelto con algo parecido, pero parece que chochan mis dos hojas css, y la de la galeria me quita parametros a la de la pagina principal, y no consigo forma de que una no interfiera con la otra

brother, como puedo crear mas de un array para colocar varios datos alli, porque intente que en la funcion foreach no se como agregar varias variables

Triby · #12 (**permalink**) 03/02/2009, 15:58

Cita:

galeria me quita parametros a la de la pagina principal

Esto definitivamente es problema de CSS y si haces bien todas tus declaraciones (IDs y classes) no debieras tener problemas... seguramente en el subforo de CSS te ayudan a solucionarlo.

Cita:

como puedo crear mas de un array para colocar varios datos alli

Array de que? que datos adicionales vas a agregar?, todo depende de que es lo que quieres almacenar y para que lo vas a utilizar.

Código PHP:

  // Crear matriz:
$matriz = array();

// Agregar valores:
$matriz[] = 5;
$matriz[] = 'Cadena';
$matriz[] = array('valor1', 'valor 2', 'valor 3');

JoseAlejandro_Realza · #13 (**permalink**) 03/02/2009, 16:16

bueno es que de la base de daos donde salen la url de las imagenes, estan los datos del usuario que la subio, el nombre de la foto y su descripcion, y quiero agregarle al php el nombre de la foto en vez de la url, y tengo que poner la variable del nombre de la base de datos, porque en todos los datos del div tengo solo la url

Triby · #14 (**permalink**) 03/02/2009, 16:27

Ah, si todos los campos estan en la misma tabla, solo tienes que hacer referencia a los que necesites:

Código PHP:

  // Aqui ya estas leyendo todos los campos, eso es lo que significa el *
$result=mysql_query("select * from galeria where usuario='$usuario'", $connect); 

// Ahora solo coloca los campos donde los necesitas (dentro del foreach)
echo "Usuario: {$img['usuario']}";
echo "Nombre de foto: {$img['nombre_de_foto']}";

JoseAlejandro_Realza · #15 (**permalink**) 03/02/2009, 23:00

ya lo habia intentado y no me dio... supongo que es porque estaba poniendo la otra variable del foreach que intente crear... Muchisimas Gracias hermano, se le agradece porque me has ayudado muchisimo =)