[PHP] Galleria dinamica con scroll verticale

[gahan]

Ho uno script in php che crea una galleria dinamica composta essenzialmente da 2 div; il primo mostra l'immagine cosi com'è caricata mentre il 2°div crea le thumbnail.Ora nel momento in cui vado a caricare molte immagini,la pagina web aumenta sempre di piu in altezza quindi è un po scomoda per i visitatori del sito.A questo punto ho pensato di inserire al 2°div la proprietà "overflow-y:scroll" ma lo sroll invece di comparire sul DIV mi appare su ogni singola thumbnail caricata.
Ho anche provato a creare un'altro div che contenga il 2° ma niente, anzi le thumbnail mi si incolonnano una sotto l'altra.Esiste un modo per risolvere questo problema?

Se puo essere d'aiuto posto qui il codice php con relativo CSS:

Codice: Seleziona tutto

<?php[/b]if(!function_exists('get_file_extension')){
   function get_file_extension($filename) {
      $filename = strtolower($filename) ;
      $exts = split("[/\\.]", $filename) ;
      $n = count($exts)-1;
      $exts = $exts[$n];
      return $exts;
   }
}

if ($handle = opendir('.')) {
    /* This is the correct way to loop over the directory. */
    while (false !== ($file = readdir($handle))) {
        if(get_file_extension(strtolower($file)) == 'jpg' and $file!= 'no_image.jpg'){
      
      $image_title = strtolower($file);
      $image_title = str_replace('_',' ',$image_title);
      $image_title = str_replace('.jpg','',$image_title);
      
         echo '<div id="box"><a href="gallery.php?big_image='.$file.'"><img border="0" src="image.php?file='.$file.'&width=200&height=60" alt="'.$image_title.'" title="'.$image_title.'"/></a></div>';
      }
    }
    closedir($handle);

CSS:

div#box {border:1px solid #aaa; margin-right:5px; margin-bottom:5px; padding:0; width:auto;float:left;}

Grazie mille.

[gahan]

Nel codice precedente ho dimenticato di inserire "overflow-y:scroll".

[archimede]

Un link a una pagina di esempio?

Alessandro

[gahan]

ok sono riuscito a risolvere il problema dello scroller sul div solo che ho incontrato due altri problemi su questo script php; posto per intero il codice php formato da due file:

image.php

Codice: Seleziona tutto

<?php ini_set("memory_limit", "200000000");
<?php
$requested_width = $_REQUEST['width'];
$requested_height = $_REQUEST['height'];

$partial_name = str_replace('.jpg','',strtolower($_REQUEST['file']));

if (file_exists($partial_name.'.jpg')){
   list($original_width, $original_height) = getimagesize($partial_name.'.jpg');
} else {
   
   echo '<p>No &quot;file&quot; was defined in url.</p><p>Script powered by thewebhelp.com <a

href="http://www.thewebhelp.com/php/quick_photo_gallery/">quick photo gallery</a>.</p>';
   exit;
}

header("Content-type: image/jpg");


if(($original_width>$requested_width || $original_height >$requested_height) and isset($requested_width) and

isset($requested_height) and $requested_width!='' and $requested_height!=''){
   
   $proportions = $original_width/$original_height;

   
   $new_height = $requested_height;
   $new_width = round($requested_height*$proportions);
   // but ... if above calculated width is over the given limit then scal it down according to given width
   if(round($requested_height*$proportions)>$requested_width){
      $new_width = $requested_width;
      $new_height = round($requested_width/$proportions);
   }

}else {
   $new_width = $original_width;
   $new_height = $original_height;
   // show original file without any resizing "image_cache/20.jpg"
   if(file_exists('image_cache/'.$partial_name.'.jpg')){
      header("Location: image_cache/".$partial_name.".jpg");
      exit;
   }
}



if(file_exists('image_cache/'.$partial_name.'_'.$new_width.'x'.$new_height.'.jpg')){
   header("Location: image_cache/".$partial_name."_".$new_width."x".$new_height.".jpg");
   exit;
}


$file = $partial_name.'.jpg';


if(!isset($quality)){
   $quality= 100;
}


$imagedata = getimagesize($file);
$original_width = $imagedata[0];   
$original_height = $imagedata[1];


if($original_width<$new_width){
   $new_width = $original_width;
}


if(!isset($new_width) and !isset($new_height)){
   $new_width = $original_width;
   $new_height = $original_height;
}
if(!isset($new_height)){
   $new_height = $new_width*($original_height/$original_width);
}
if(!isset($new_width)){
   $new_width = $new_height*($original_width/$original_height);
}

$smaller_image = imagecreatetruecolor($new_width, $new_height);
$original_image = imagecreatefromjpeg($file);

imagecopyresampled($smaller_image, $original_image, 0, 0, 0, 0, $new_width, $new_height, $imagedata[0], $imagedata[1]);

if($new_width>140 and $new_height>100){
   imagejpeg($smaller_image,'image_cache/'.$partial_name.'_'.$new_width.'x'.$new_height.'.jpg',$quality);
} else {
   imagejpeg($smaller_image,'image_cache/'.$partial_name.'_'.$new_width.'x'.$new_height.'.jpg',$quality);
}

chmod('image_cache/'.$partial_name.'_'.$new_width.'x'.$new_height.'.jpg',0644);

imagedestroy($original_image);
imagedestroy($smaller_image);
imagedestroy($watermarked_image);

header('Location: image_cache/'.$partial_name.'_'.$new_width.'x'.$new_height.'.jpg');
exit;
?>


gallery_index.php

Codice: Seleziona tutto

<?php if(isset($_REQUEST['big_image']) and $_REQUEST['big_image']!=''){?>
<?php
$image_title = strtolower($_REQUEST['big_image']);
$image_title = str_replace('_',' ',$image_title);
$image_title = str_replace('.jpg','',$image_title);
?>
<?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" />
<link rel="stylesheet" type="text/css" href="box.css"/>

<?php if(isset($_REQUEST['big_image']) and $_REQUEST['big_image']!=''){?>
<title><?php echo $image_title;?></title>
<?php } else {?>
<title>Quick Photo Gallery</title>
<?php }?>

</head>

<body>
</body>
</html>




<?php if(isset($_REQUEST['big_image']) and $_REQUEST['big_image']!=''){?>

<h1 style="text-transform:capitalize;"><?php echo $image_title;?></h1>

<?php list($image_width, $image_height) = getimagesize($_REQUEST['big_image']); ?>
<div style="border:1px solid #aaa; margin:0 auto 20px; padding:0; width:<?php echo$image_width;?>px; display:block; clear:both; text-align:center;"><img src="image.php?file=<?php echo $_REQUEST['big_image'];?>&width=500&height=375" alt="<?php echo $image_title;?>" title="<?php echo $image_title;?>"/></div>

<?php }?>

<div style="height:130px;overflow:auto;background:#ccc;padding:3px;text-align:center;">
<?php
if(!function_exists('get_file_extension')){
   function get_file_extension($filename) {
      $filename = strtolower($filename) ;
      $exts = split("[/\\.]", $filename) ;
      $n = count($exts)-1;
      $exts = $exts[$n];
      return $exts;
   }
}

if ($handle = opendir('.')) {
    /* This is the correct way to loop over the directory. */
    while (false !== ($file = readdir($handle))) {
        if(get_file_extension(strtolower($file)) == 'jpg' and $file!= 'no_image.jpg'){
      
      $image_title = strtolower($file);
      $image_title = str_replace('_',' ',$image_title);
      $image_title = str_replace('.jpg','',$image_title);
      
         echo '<div id="box"><a href="gallery.php?big_image='.$file.'"><img border="0" src="image.php?file='.$file.'&width=200&height=60" alt="'.$image_title.'" title="'.$image_title.'"/></a></div>';
      }
    }
    closedir($handle);
}
?> </div>
<div style="clear:both;">

</div>


1° problema: Allora...con questo script basta mettere un'immagine nella stessa cartella contenente questi file e in automatico vengono create le thumbnail e cliccando su di esse si apre l'immagine grande copiata nella cartella.Solo che dopo che metto la 17esima immagine,copiando altri immagini nella cartella le thumb non vengono create.

2° problema: Dopo un po quando vado ad aprire la pagina web non viene visualizzata piu nessuna immagine nella galleria.

Spero ancora in un vostro aiuto.
Grazie.

[gahan]

Risolto...dovevo caricare le immagini a pagina web chiusa.
Thanks.