navegar por imagenes anterior/siguiente

topito2 · #1 (**permalink**) 11/04/2005, 13:37

hola:
Necesito realizar una navegacion del tipo siguiente/anterior.
La "filosofia" del script la tengo clara pero no se como hacerlo.

Les explico:

Tengo un array en php que me devulve el nombre de archivo de las imagenes. Esto es:

Código PHP:

  $nombrearchivos = Array ( [0] => 1.JPG [1] => 10.JPG [2] => 11.JPG [3] => 12.JPG [4] => 13.JPG [5] => 2.JPG [6] => 278.url [7] => 3.JPG [8] => 4.JPG [9] => 5.JPG [10] => 6.JPG [11] => 7.JPG [12] => 8.JPG [13] => 9.JPG )

lo que no se es como traspasar el array de php a un variable de javascript para luego con un link o boton siguiente/anterior recorrerlo (sin necesidad de recargar la pagina) y que este link me imprima la imagen actual.

osea:

Código PHP:

  <?php <img src="<?php  if(empty($nombrefotos)){ 
echo "../fotos/nodisponible.jpg"; 
}else{ 
echo $directorio 
?> 
//y aqui imprimir el nombre de la imagen actual en incremento o decremento SIN RECARGAR 
<?php 
;} 
?>" width="320" height="240">

es una idea, si hay mejores sugerencias por favor haganmelas saber.
como informacion suplementaria yo domino php no javascript

agradecido desde ya

kepawe · #2 (**permalink**) 11/04/2005, 19:01

Hola topito2

Primero deberias hacer una precarga de las images. Si tienes las direcciones en un array podrias hacer esto:

Código PHP:

 
<html> 
<head> 
<title>Carrusel de imágenes </title> 
<?php 
$fotos = array("foto1.jpg","foto2.jpg","foto3.jpg"); 
 
function preload_image_JS($n,$name_array){ 
 if(gettype($n)=="array"){ 
   $ctr = 0; 
   $js_array =  "var ".$name_array." = new Array(".count($n).");\n"; 
   foreach($n as $value){ 
      $value = addslashes($value); 
      $js_array .= $name_array."[".$ctr."] = new Image();\n"; 
      $js_array .= $name_array."[".$ctr."].src = \"".$value."\";\n"; 
      $ctr++; 
   } 
   return $js_array; 
   } 
} 
?> 
 
 
 
<script language="JavaScript" type="text/javascript"> 
<!-- 
 
<? 
// esta funcion escribe el array de images y precarga 
echo preload_image_JS($fotos,"slides"); 
?> 
//--> 
</script> 
 
 
 
</head> 
 
<body > 
 
<div id="viewer" style="position:absolute; left:10; top:0"> 
<? 
echo "<img src=\"".$fotos[0]."\" width=\"320\" height=\"240\">"; 
?> 
</div> 
 
<div id="controls" style="position:absolute; 
                          left:10px; 
                          top:250px; 
                          width:320px; 
                          text-align: center; 
                          font-weight:bold"> 
</div> 
 
<script language="JavaScript" type="text/javascript"> 
<!-- 
var current_slide = 0 
 
function write_controls() { 
 
    if (current_slide == 0) { 
        previous_control = "Anterior" 
    } 
    else { 
        previous_control = '<a href="javascript:previous_slide()">Anterior</a>' 
    } 
    if (current_slide == slides.length - 1) { 
        next_control = "Siguiente" 
    } 
    else { 
        next_control = '<a href="javascript:next_slide()">Siguiente</a>' 
    } 
    if(document.all)  document.all.controls.innerHTML = previous_control + "&nbsp;" + next_control; 
    else document.getElementById("controls").innerHTML = previous_control + "&nbsp;" + next_control; 
} 
 
function next_slide() { 
    current_slide++ 
    if(document.all) document.all.viewer.innerHTML = '<img src="' + slides[current_slide].src + '" width="320" height="240">'; 
    else document.getElementById('viewer').innerHTML ='<img src="' + slides[current_slide].src + '" width="320" height="240">' 
    write_controls() 
} 
 
function previous_slide() { 
    current_slide-- 
     if(document.all) document.all.viewer.innerHTML  = '<img src="' + slides[current_slide].src + '" width="320" height="240">'; 
     else document.getElementById('viewer').innerHTML ='<img src="' + slides[current_slide].src + '" width="320" height="240">'; 
     write_controls() 
} 
write_controls() 
//--> 
</script> 
 
</body> 
</html>

Espero que te sirva.

Saludos :)

loxi1 · #3 (**permalink**) 31/07/2008, 22:22

Cita:

Iniciado por topito2

hola:
Necesito realizar una navegacion del tipo siguiente/anterior.
La "filosofia" del script la tengo clara pero no se como hacerlo.

Les explico:

Tengo un array en php que me devulve el nombre de archivo de las imagenes. Esto es:

Código PHP:

  $nombrearchivos = Array ( [0] => 1.JPG [1] => 10.JPG [2] => 11.JPG [3] => 12.JPG [4] => 13.JPG [5] => 2.JPG [6] => 278.url [7] => 3.JPG [8] => 4.JPG [9] => 5.JPG [10] => 6.JPG [11] => 7.JPG [12] => 8.JPG [13] => 9.JPG )

lo que no se es como traspasar el array de php a un variable de javascript para luego con un link o boton siguiente/anterior recorrerlo (sin necesidad de recargar la pagina) y que este link me imprima la imagen actual.

osea:

Código PHP:

  <?php <img src="<?php  if(empty($nombrefotos)){
echo "../fotos/nodisponible.jpg";
}else{
echo $directorio
?>
//y aqui imprimir el nombre de la imagen actual en incremento o decremento SIN RECARGAR
<?php
;}
?>" width="320" height="240">

es una idea, si hay mejores sugerencias por favor haganmelas saber.
como informacion suplementaria yo domino php no javascript

agradecido desde ya

Cita:

Iniciado por kepawe

Hola topito2

Primero deberias hacer una precarga de las images. Si tienes las direcciones en un array podrias hacer esto:

Código PHP:

 
<html>
<head>
<title>Carrusel de imágenes </title>
<?php
$fotos = array("foto1.jpg","foto2.jpg","foto3.jpg");

function preload_image_JS($n,$name_array){
 if(gettype($n)=="array"){
   $ctr = 0;
   $js_array =  "var ".$name_array." = new Array(".count($n).");\n";
   foreach($n as $value){
      $value = addslashes($value);
      $js_array .= $name_array."[".$ctr."] = new Image();\n";
      $js_array .= $name_array."[".$ctr."].src = \"".$value."\";\n";
      $ctr++;
   }
   return $js_array;
   }
}
?>



<script language="JavaScript" type="text/javascript">
<!--

<?
// esta funcion escribe el array de images y precarga
echo preload_image_JS($fotos,"slides");
?>
//-->
</script>



</head>

<body >

<div id="viewer" style="position:absolute; left:10; top:0">
<?
echo "<img src=\"".$fotos[0]."\" width=\"320\" height=\"240\">";
?>
</div>

<div id="controls" style="position:absolute;
                          left:10px;
                          top:250px;
                          width:320px;
                          text-align: center;
                          font-weight:bold">
</div>

<script language="JavaScript" type="text/javascript">
<!--
var current_slide = 0

function write_controls() {

    if (current_slide == 0) {
        previous_control = "Anterior"
    }
    else {
        previous_control = '<a href="javascript:previous_slide()">Anterior</a>'
    }
    if (current_slide == slides.length - 1) {
        next_control = "Siguiente"
    }
    else {
        next_control = '<a href="javascript:next_slide()">Siguiente</a>'
    }
    if(document.all)  document.all.controls.innerHTML = previous_control + "&nbsp;" + next_control;
    else document.getElementById("controls").innerHTML = previous_control + "&nbsp;" + next_control;
}

function next_slide() {
    current_slide++
    if(document.all) document.all.viewer.innerHTML = '<img src="' + slides[current_slide].src + '" width="320" height="240">';
    else document.getElementById('viewer').innerHTML ='<img src="' + slides[current_slide].src + '" width="320" height="240">'
    write_controls()
}

function previous_slide() {
    current_slide--
     if(document.all) document.all.viewer.innerHTML  = '<img src="' + slides[current_slide].src + '" width="320" height="240">';
     else document.getElementById('viewer').innerHTML ='<img src="' + slides[current_slide].src + '" width="320" height="240">';
     write_controls()
}
write_controls()
//-->
</script>

</body>
</html>

Espero que te sirva.

Saludos :)

Que Modificaciones Tendria que realizar si en vez de:
$fotos = array("foto1.jpg","foto2.jpg","foto3.jpg");
coloco :
for($i=0;$i<$_GET['cantidad'];$i++)
$fotos[] = "img/".$_GET['nombre'].$i."jpg";