Foros del Web » Programando para Internet » Javascript »

Lightwindow Galeria de Imagenes

Estas en el tema de Lightwindow Galeria de Imagenes en el foro de Javascript en Foros del Web. Hola, desde hace mucho tiempo que leo siempre este foro y encuentro solucion a mis ideas, por eso nunca me habia registrado, solo entraba a ...
  #1 (permalink)  
Antiguo 11/02/2008, 17:35
Avatar de TitoCL  
Fecha de Ingreso: febrero-2008
Ubicación: Curicó
Mensajes: 10
Antigüedad: 16 años, 3 meses
Puntos: 0
Lightwindow - Modificacion Galeria de Imagenes

Hola, desde hace mucho tiempo que leo siempre este foro y encuentro solucion a mis ideas, por eso nunca me habia registrado, solo entraba a leer, pero hoy me encuentro con un problema y no vi nada dentro del foro como para resolverlo, asi que aqui estoy... xD

El dilema que tengo es el siguiente...

a mi me gusta el sistema de galeria que tiene

LightWindow http://stickmanlabs.com/lightwindow/

( creo que esta caido el hosting en este momento, aqui encontre otra pagina donde usan lightwindow por siesque no lo conocen

http://www.diariothc.com/wp-content/Imagenes/10-2007/galeria/index.html

Si hacen click para ver la galeria de imagenes, luego sobre un boton que dice galleries, se puede ver lo que yo quiero implementar...

en esta otra pagina se explica el codigo

http://www.diariothc.com/index.php/2007/10/03/lightwindow-muestra-dialogos-con-la-informacion-que-quieras/

ok, tengo lightwindow con este sistema que me gusta, per el problema que a mi me incomoda el modo en que se agregan las imagenes. Por ahi estuve viendo otra galeria llamada

Simple Galeria http://www.plusweb.cl/clientes/Sgaleria/

, que tiene un sistema muy comodo para agregar albumes de fotos, es simplemente haciendo un directorio con el nombre de la galeria y listo... ademas tiene un sistema para hacer thumbnails.

el siguiente paso entonces seria intentar unir estas 2 formas de mostrar galerias, para que yo en lightwindow al apretar sobre el boton oscuro que dice Gallerie me mostrara las galerias a partir de los directorios que tengo (albumes).

Quisiera ver si alguien me puede ayudar a crear esto o orientarme

la idea seria que despues de haber hecho esto, tambien al abrir una imagen o un album, tuviese la posibilidad de que los usuarios logeados en la pagina puedan emitir un comentario, pero bueno esto lo veo despues :P

(tambien estuve viendo phpfotolog para ver si podia sakar alguna idea, pero bueno nose... en fin xD)

Gracias :)

-------------------

Me costo un mundo poder postear, tuve que cambiar el tema del foro para poder hacerlo.
Tambien tuve que editar las direcciones web para poder postear.

Última edición por TitoCL; 13/02/2008 a las 04:32
  #2 (permalink)  
Antiguo 12/02/2008, 11:02
Avatar de TitoCL  
Fecha de Ingreso: febrero-2008
Ubicación: Curicó
Mensajes: 10
Antigüedad: 16 años, 3 meses
Puntos: 0
Re: Lightwindow Galeria de Imagenes

alo? help :(
  #3 (permalink)  
Antiguo 12/02/2008, 20:42
Avatar de TitoCL  
Fecha de Ingreso: febrero-2008
Ubicación: Curicó
Mensajes: 10
Antigüedad: 16 años, 3 meses
Puntos: 0
Re: Lightwindow Galeria de Imagenes

yapues animense a ayudar xD lo necesito ! xD

hasta ahora he hecho esto, sakando codigo de otros lados y poniendo un poco de mi parte

Código PHP:
<?php
function tiny($d$archivo){
$original imagecreatefromjpeg("$d/$archivo");

/* Hallamos la anchura y altura de la imagen original */
$ancho imagesx($original);
$alto imagesy($original);

/* Indicamos la anchura que tendrá la miniatura */
$anchomini=100;

/* Obtenemos por una simple regla de tres la altura de la miniatura */
$altomini=($alto*$anchomini)/$ancho;

/*verificamos que los valores de ancho y alto no excedan nuestro limite por imagen*/
if($altomini>100){
    
$altomini 100;
    
$anchomini = ($ancho*100)/$alto;
}

/* Dimensionamos la miniatura */
$thumb imagecreatetruecolor($anchomini,$altomini); 

/* Se obtiene por interpolación la miniatura en memoria */
imagecopyresampled($thumb,$original,0,0,0,0,$anchomini,$altomini,$ancho,$alto);
    
    if(!
is_dir("$d/thumbs"))    {
          
mkdir("$d/thumbs",0777);
        }
/* Guardamos la miniatura en un fichero con formato JPEG y un ratio de compresión de 90% */
imagejpeg($thumb,"$d/thumbs/tn_$archivo",90); 
}


function 
gallery($fotos) { 
    
$i 0
    if (
is_dir($fotos)) {
       if (
$handle opendir($fotos)) {            
              echo 
$fotos;
         while ((
$archivo readdir($handle)) !== false) {    
                 
//falta validar extensiones              
             
if(!(is_dir($archivo)OR($archivo=="thumbs"))) {                
                      if(!
file_exists("$fotos/thumbs/tn_$archivo")){                                
                        
tiny($fotos,$archivo);
                    }
                  
//muestra thumbs    
                           
                  
$j=($i%4);
                  if(
$j==0){                        
                  }
                    
/*
                    En esta parte es donde debiera integrar el codigo de LightWindow, pero no me resulto :P
                    ej: <a href="'.$fotos.'/'.$archivo.'" class="lightwindow hidden" rel="Random[Sample Images]" title="Left Behind" caption="...it didn't smell that bad..." author="Unknown">image #2</a>                    
                    */
                    
                    
echo '<a href="'.$fotos.'/'.$archivo.'"><img src="'.$fotos.'/thumbs/tn_'.$archivo.'"/></a>';
                    
$i++;
                  }
          }
         
closedir($fotos);
        }
      }  
}
?>
<html>
<head>
<title>Galeria</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


</head>

<body>
<?php
$file 
$_POST[fotos];
if (isset(
$file) && $file != null) {
 
$file stripslashes($file);
 
$pos strrpos($file"\\");
 
$dir substr ($file0$pos);
 
$pos2 strrpos($dir,"\\");
 
$dir2 substr ($dir, ($pos2 1), strlen($dir));
 
$fotos=$dir2;
 
// Aqui deberia crear el directorio $fotos para luego subir todas las imagenes que tiene este directorio en mi pc Local <-------- :S
 
@gallery($fotos);
} else {
?>
<form action="" method="POST">
<input type="file" name="fotos" value="" /> <br><br>
<input type="submit" name="submit" value="Subir Codigo" />
</form>
<?
}
?>
</body>
</html>
si se fijan, tengo comentada la parte donde debiera hacer algun sistema para que me creara el directorio y subiera todas las fotos ke contiene mmm bueno eso lo veo despues, quiero ver primero que esta cosa funcione xD

lo otro que tengo comentado mas arriba es donde debiera ir el codigo de lightwindow para mostrarme los albumes(claramente antes agregando todos los javascripts y css que necesita lightwindow), intente hacerlo pero me mostraba las cosas muy arriba, incluso ni si quiera veia si lo estaba haciendo o no, solo me daba cuenta del efecto que pone todo oscuro al fondo, bueno la cosa es que talves aqui debiera trabajar con otro archivo ke me generara el album de fotos, no se...

cualquier ayuda es bienvenida :)

PD: no me funciona en firefox lo del input file, no se porke, solo me funciono en IE.

Última edición por TitoCL; 13/02/2008 a las 03:49 Razón: decidi usar otro codigo que encontre para generar la galeria, es el que acabo de postear aqui :)
  #4 (permalink)  
Antiguo 13/02/2008, 03:45
Avatar de TitoCL  
Fecha de Ingreso: febrero-2008
Ubicación: Curicó
Mensajes: 10
Antigüedad: 16 años, 3 meses
Puntos: 0
Re: Lightwindow Galeria de Imagenes

ok... vamos avanzando...

hasta ahora tengo el archivo galeria.php que es donde yo elijo el directorio que quiero "subir" (entre "" porque aun no he visto el modo en que voy a subir el directorio completo con imagenes y balblalba), y bueno "Directorio" tambien entre "" porque elijo una de las fotos y luego limpio la direccion para dejar solo el directorio..., (lo de copiar el directorio con las fotos lo estoy haciendo a mano, hago un directorio "galeria1" y le tiro un par de imagenes para probar).

Luego de esto creo un arreglo en donde meto todos los nombres de las fotos (fotosArray, super original).

mmm luego cargo: imagenes.php?pics='.$archivos.'&dir='.$fotos
donde pics va a ser el arreglo de las fotos y dir el directorio en el que estan las fotos

esto lo tomo en imagenes.php para crear el archivo para mostrar la galeria de imagenes como el LightWindow

Problemas:
bueno se me han presentado varios xD hahaha

En firefox el input file solo me muestra el archivo que escogi, sin el path, sin embargo en iexplorer me muestra el path completo con el nombre del archivo

Solucion:
<input type=hidden name="fotos" value="" />
<input type="file" name="ruta" value="" onChange="this.form.fotos.value=this.form.ruta.val ue" />

con esto copio el path completo que me muestra en la caja del formulario

Siguiente problema (sin solucion aun):

* Tengo que hacer un link para cargar la galeria

<a href="MuseodeBellasArtes/20060207121647_0.jpg" class="lightwindow page-options" rel="Random[Sample Images]" title="Titulo" caption="Caption" author="autor"><strong>Image Gallery</strong> - Everyone needs a killer gallery!</a>

(le hice copy paste al del demo de lightwindow solo cambiando el nombre del directorio y la foto, porque tuve tanto error que no quise cambiarle nada por ahora)

* Me hace la galeria, pero al momento de apretar el Next para seguir a la otra foto, me karga la misma 1...

* Ahora me di cuenta que en IExplorer me sale como corrida la galeria de fotos (imagenes.php) cuak! algo copie mal del demo de lightwindow hahaha HELP

les dejo los archivos:

galeria.php

Código PHP:
<?php
function tiny($d$archivo){
$original imagecreatefromjpeg("$d/$archivo");

/* Hallamos la anchura y altura de la imagen original */
$ancho imagesx($original);
$alto imagesy($original);

/* Indicamos la anchura que tendrá la miniatura */
$anchomini=100;

/* Obtenemos por una simple regla de tres la altura de la miniatura */
$altomini=($alto*$anchomini)/$ancho;

/*verificamos que los valores de ancho y alto no excedan nuestro limite por imagen*/
if($altomini>100){
    
$altomini 100;
    
$anchomini = ($ancho*100)/$alto;
}

/* Dimensionamos la miniatura */
$thumb imagecreatetruecolor($anchomini,$altomini); 

/* Se obtiene por interpolación la miniatura en memoria */
imagecopyresampled($thumb,$original,0,0,0,0,$anchomini,$altomini,$ancho,$alto);
    
    if(!
is_dir("$d/thumbs"))    {
          
mkdir("$d/thumbs",0777);
        }
/* Guardamos la miniatura en un fichero con formato JPEG y un ratio de compresión de 90% */
imagejpeg($thumb,"$d/thumbs/tn_$archivo",90); 
}


function 
gallery($fotos) { 
    
$i 0
    if (
is_dir($fotos)) {
       if (
$handle opendir($fotos)) {
         while ((
$archivo readdir($handle)) !== false) {    
                 
//falta validar extensiones              
             
if(!(is_dir($archivo)OR($archivo=="thumbs"))) {                
                      if(!
file_exists("$fotos/thumbs/tn_$archivo")){                                
                        
tiny($fotos,$archivo);
                    }
                  
//muestra thumbs    
                           
                  
$j=($i%4);
                  if(
$j==0){                        
                  }              
                    
$fotosArray[$i]=$archivo;
                    
                    
//echo '<a href="'.$fotos.'/'.$archivo.'"><img src="'.$fotos.'/thumbs/tn_'.$archivo.'"/></a>';
                    
$i++;
                  }
          }
         
closedir($fotos);
         
$archivos=serialize($fotosArray);          
         
$archivos=urlencode($archivos);
         echo 
'<script languaje="JavaScript"> window.location="imagenes.php?pics='.$archivos.'&dir='.$fotos.'";</script>';
        }
      }  
}
?>
<html>
<head>
<title>Galeria</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


</head>

<body>
<?
$file 
$_POST[fotos];
if (isset(
$file) && $file != null) {
 
$file stripslashes($file);
 
$pos strrpos($file"\\");
 
$dir substr ($file0$pos);
 
$pos2 strrpos($dir,"\\");
 
$dir2 substr ($dir, ($pos2 1), strlen($dir));
 
$fotos=$dir2;
 if(!
is_dir("$fotos/"))    {
          
mkdir("$fotos",0777);
        }
 @
gallery($fotos);
} else {
?>

<form action="galeria.php" method="POST">
  <input type="hidden" name="fotos" value="" />
  <input type="file" name="ruta" value="" onChange="this.form.fotos.value=this.form.ruta.value" />
  <input type="submit" value="Subir" />
</form> 
<?
}
?>
</body>
</html>
imagenes.php

Código PHP:
<head>

    <title>LightWindow Demo</title>

    <!-- Meta Tags -->
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="robots" content="index, follow" />
    
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="css/default.css" />
    <link rel="stylesheet" type="text/css" href="css/lightwindow.css" />
    
    <!-- JavaScript -->
    <script type="text/javascript" src="javascript/prototype.js"></script>
    <script type="text/javascript" src="javascript/effects.js"></script>
    <script type="text/javascript" src="javascript/lightwindow.js"></script>


</head>

<body>

    <div class="page-top"></div>

        
    <div class="page-body">
<?php
      $a
=stripslashes ($_GET[pics]);
      
$directorio=$_GET[dir];
      
$fotos=unserialize($a);
      echo 
'<a href="'.$directorio.'/'.$fotos[0].'" class="lightwindow page-options" rel="Random[Sample Images]" title="Titulo" caption="Caption" author="autor"><strong>Image Gallery</strong> - Everyone needs a killer gallery!</a>';
    Foreach (
$fotos as $clave=>$valor)
{
echo 
'<a href="'.$directorio.'/'.$valor.'" class="lightwindow hidden" rel="Random[Sample Images]" title="title" caption="caption" author="autor">image #'.$clave.'</a>';
}
?>
    <div class="page-footer">
        <p>&copy; Copyright 2007 <a href="http://www.stickmanlabs.com/"><small>stickmanlabs</small></a></p>
        <p>LightWindow is freely distributable under the terms of an MIT-style license.</p>
    </div>
</div>
</body>
</html>
si quieren los archivos que necesita lightwindow los pueden descargar desde aqui http://stickmanlabs.com/lightwindow/

nos leemos :)

espero que con soluciones si
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:28.