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 + " " + next_control;
else document.getElementById("controls").innerHTML = previous_control + " " + 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";