Page 1 of 1

Laying out thumbnails

Posted: Tue Sep 07, 2004 8:31 am
by bradles
I've managed to create a php script that reads thumbnails from a directory into an array. So I have an array called images() with 20 image names. Example, 001.jpg, 002.jpg, 003.jpg etc etc.

Depending on the page the user is viewing I need to be able to lay these thumbnails out in a 4x4 table....4 rows of 4 images across with filename captions as well.

Does anyone know of a good way to do this? I was thinking a couple of for loops to generate something like:

Code: Select all

<table>
	<tr>
		<td><img src="thumbnails/imageX/></td>
		<td><img src="thumbnails/imageX/></td>
		<td><img src="thumbnails/imageX/></td>
		<td><img src="thumbnails/imageX/></td>
	</tr>

	<tr>
		<td><img src="thumbnails/imageX/></td>
		<td><img src="thumbnails/imageX/></td>
		<td><img src="thumbnails/imageX/></td>
		<td><img src="thumbnails/imageX/></td>
	</tr>

	<tr>
		<td><img src="thumbnails/imageX/></td>
		<td><img src="thumbnails/imageX/></td>
		<td><img src="thumbnails/imageX/></td>
		<td><img src="thumbnails/imageX/></td>
	</tr>

	<tr>
		<td><img src="thumbnails/imageX/></td>
		<td><img src="thumbnails/imageX/></td>
		<td><img src="thumbnails/imageX/></td>
		<td><img src="thumbnails/imageX/></td>
	</tr>
</table>
If the user is on page 1 they should be able to see images 1 - 16, page 2 = 17 - 32 etc. I have the pagination sorted out but can't seem to come up with a clean looking loop system to get them into a table.

Any ideas out there?

Brad

Posted: Tue Sep 07, 2004 9:17 am
by AVATAr
i few months ago i made a script to show my wedding thumbs... (it can be better...)
sorry its in spanish.

You can see it in action in http://www.sapriza.com/dyt

Code: Select all

<?php

//Error_reporting(E_ALL);

$aExtensiones = array('jpg'); // valid Extensions
$directorio	    = '/the/directory/of/the/files/';   //directory

$columnas      = 4; //columns per page
$filas_por_pag = 5; //rows per page


class Tabla{
	var $_tabla;
	var $_columna_actual;
	var $_fila_actual;
	var $_filas_por_pagina;
	
	var $columnas;
	
	function Tabla($columnas, $filas_por_pag){
		$this -> columnas = $columnas;
		$this -> _columna_actual = 1;
		$this -> _fila_actual = 1;
		$this -> _tabla = array();
		$this -> _filas_por_pagina = $filas_por_pag;
	}
	
	function ingresar($datos){
		$this -> _tabla[$this -> _fila_actual][$this -> _columna_actual] = $datos;
		if ($this -> _columna_actual  ==  $this -> columnas){
			$this -> _fila_actual = $this -> _fila_actual + 1;
			$this -> _columna_actual = 1;
		} else {
			$this -> _columna_actual = $this -> _columna_actual + 1;
		}
		$this -> _cantidad_de_paginas = floor(count($this->_tabla)/$this->_filas_por_pagina) + 1;
	}
	
	
	function imprimir($pagina=1){
		$fila_tabla_a_empezar = (($pagina-1)*$this->_filas_por_pagina) + 1;
		$fila_tabla_a_terminar = $fila_tabla_a_empezar + $this->_filas_por_pagina;
		
		echo '<table>';
		$contador_filas = 1;
		foreach($this -> _tabla as $fila){
			if ($contador_filas < $fila_tabla_a_empezar){
				$contador_filas = $contador_filas + 1;
				continue;
			} else{
				if ($contador_filas > $fila_tabla_a_terminar - 1) {
					break;
				} else {
					echo '<tr>';
					foreach($fila as $elemento){
						echo '<td align="center"><img src="'.$elemento.'"></td>';
					}
					echo '</tr>';
				}
			}  
			$contador_filas = $contador_filas + 1;
		}
		echo '<table>';
	}
}

$dir 		    = opendir($directorio); 
$aArchivos 	= array(); //Array donde van a estar los nombres de los archivos de imagen

//recorro el contenido
$oTabla = New Tabla($columnas, $filas_por_pag);  //Create the new object

while ($archivo = readdir($dir)) {
      //me salteo los "." y ".." y los que no son .jpg
      $extension = substr($archivo, -3);
      if (is_file($archivo) && $archivo != "." && $archivo != "..") {
	      if (in_array($extension, $aExtensiones) <> 0){
		     //genero los links
		     $aArchivos[] = $archivo;
		     $oTabla -> ingresar($archivo); //insert the file in the table
		}
	}
   }
   
?>

<html>
<head></head>
<body>
<h1>Seleccion de Negativos</h1>
<?php 
        //Pagination
	$pag = 1;
	if (isset($_GET['pagina'])){
		$pag = $_GET['pagina'];
	}
	if ($pag == 1) {
		//Estoy en la primer pagina
		$link = '<a href="index.php?pagina='.($pag+1).'">Página Siguiente</a><br/>';
	} elseif ($pag == $oTabla->_cantidad_de_paginas) {
		//Estoy en la ultima pagina
		$link = '<a href="index.php?pagina='.($pag-1).'">Págia Anterior</a><br/>';
	} else {
		//estoy en el medio
		$link = '<a href="index.php?pagina='.($pag-1).'">Págia Anterior</a>';
		$link .= '   -- '.$pag.' --   ';
		$link .= '<a href="index.php?pagina='.($pag+1).'">Página Siguiente</a>';
		$link .= '<br/>';
	}
	echo $link;
	$oTabla -> imprimir($pag); 
	echo $link;
?>
</body>
</html>

feyd | naughty! you know to use

Code: Select all

tags[/color]

Posted: Tue Sep 07, 2004 11:53 am
by feyd

Posted: Tue Sep 07, 2004 11:56 am
by AVATAr
feyd wrote:feyd | naughty! you know to use

Code: Select all

tags[/quote]
Yes i do, i (will) do it for you [as the song...]