Cómo pasar de php a array de javascript

[Maru77]

Hola!

tengo este código que junta unas imágenes

Código PHP:

  <?php
 
foreach($imagenes as $img) {  
$imagen="imagenes/productos/$img->id/a1.jpg";
 
}
?>   

y necesito volcar esas imágenes en un loop de javascript, pero no se como hacerlo

Código PHP:

 <script type="text/javascript">
 
var mygallery=new simpleGallery({
wrapperid: "simplegallery", 
dimensions: [1280, 510], 
imagearray: [
<?php 
echo "[\"$imagen\", \"\", \"\", \"\"]" // aquí solo me muestra la primer imagen - como hago un for o algo que recorra las imágenes que capturé en el cógido php?
?>
 
],   
 
}  

Espero que puedan ayudarme, hace varios días que estoy trabada con este problema y todo lo que encontré en internet no funcionó.

Gracias de antemano!

[gjx2]

Se me ocurren tres forma ahora mismo.

1- Hacerlo por ajax

2- ingresar los datos a la variable de js desde php

Código HTML:

<script type="text/javascript">
 
var img = new Array();
 
window.onload = function(){
<?PHP
        $i=0;
        while($i<10){
            
            echo "img[".$i."]=".$i.";\n";
        
        $i++;   
        }
    
    
    ?>
alert("Segunda forma" + img.length);
 
}
 
</script>
 

3- Crear una cadena dividida por comas y en javascript haces uso de split ej.

Código HTML:

<?PHP
        $i=0;
        $img = "";
        while($i<10){
            
            $img .= $i.",";
        
        $i++;   
        }
    
    $img = trim($img,",");
    ?>
 
 
<script type="text/javascript">
 
var img = new Array();
 
window.onload = function(){
 
 
 
    
    var t = "<?=$img?>";
     img =  t.split(",");
        
        
        alert("Tercera forma" + img.length);
 
 
}
 
</script>
 

Trabaja con la que mas te guste.

[gjx2]

Se me olvido una cuarta que es por json

Código HTML:

<?PHP
        $i = 0;
        $img = "";
        while($i<10){
            
            $img[] = "valor ".$i;
        
        $i++;   
        }
    
 
    
    ?>
 
 
<script type="text/javascript">
 
var img = new Array();
 
window.onload = function(){
 
    var img  = <?=json_encode($img)?>;
    alert(img[3]);
}
 
</script>
 

[Maru77]

wow muchas gracias por mostrarme tantas alternativas!!!

no logro poner esto dentro del ejemplo 4 (que es el que tomé como modelo)

Código PHP:

  $imagen="imagenes/productos/$img->id/a1.jpg"; 
   

ya que esta variable $img está declarada en el foreach de mi ejemplo.

[gjx2]

Adaptado utilizando el ej 4. seria algo como esto

Código HTML:

<?php 
 
foreach($imagenes as $img) {   
 
$imagen[] = "imagenes/productos/".$img->id."/a1.jpg"; 
 
}
 
 
 
?>
<script type="text/javascript">
 
var img = new Array();
 
window.onload = function(){
 
var img = <?=json_encode($imagen)?>;
 alert(img[3]);
}
 
</script>
 

[Maru77]

lo intenté así, si bien no me arroja ningún error no me muestra la imagen

Código HTML:

<script type="text/javascript">

var img = new Array(); 
var img = <?=json_encode($imagen)?>;

var mygallery=new simpleGallery({
wrapperid: "simplegallery", //ID of main gallery container,
dimensions: [1280, 510], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [

["img[1]", "", "", ""],
["img[2]", "", "", ""]

],
...
}

es necesario que ubique las imagenes de este modo, ya que es así como funciona el script.

Código HTML:

imagearray: [

["img[1]", "", "", ""],
["img[2]", "", "", ""]

],

[gjx2]

Este codigo te deberia de funcionar sin ningun tipo de problemas , solo que debes de estudiarlo bien y adaptarlo.

Código HTML:

<?php
 
 
foreach($imagenes as $img) {   
$imagen[] = "imagenes/productos/".$img->id."/a1.jpg";  
}
 
 
?>
<script type="text/javascript">
window.onload = function(){
 
var img = new Array();
var imagenes = <?=json_encode($imagen)?>
 
 
for(i=0;i<imagenes.length;i++){
    
    img[i] = new Array(imagenes[i],"TITULO","CONTENIDO","ETC","ETC");
    
}
 
 
var mygallery=new simpleGallery({
    wrapperid: "simplegallery1", //ID of main gallery container,
    dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
    imagearray:img,
    autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    oninit:function(){ //event that fires when gallery has initialized/ ready to run
        //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
    },
    onslide:function(curslide, i){ //event that fires after each slide is shown
        //Keyword "this": references current gallery instance
        //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
        //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
    }
})
}
</script>
 

Probe el codigo con la galeria y me funciona perfecto.


Aqui abajo te dejo la prueba de escritorio que realice.

Código PHP:

<?php
 
 
$imgDb[1] = "http://i26.tinypic.com/11l7ls0.jpg";
$imgDb[2] = "http://i29.tinypic.com/xp3hns.jpg";
$imgDb[3] = "http://i30.tinypic.com/531q3n.jpg";
$imgDb[4] =  "http://i31.tinypic.com/119w28m.jpg";
 
 
foreach($imgDb as $id){
$img[] = $id;   
}
 
?>
<script type="text/javascript">
window.onload = function(){
 
var img = new Array();
var imagenes = <?=json_encode($img)?>
 
 
for(i=0;i<imagenes.length;i++){
    
    img[i] = new Array(imagenes[i],"","","","");
    
}
 
 
var mygallery=new simpleGallery({
    wrapperid: "simplegallery1", //ID of main gallery container,
    dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
    imagearray:img,
    autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    oninit:function(){ //event that fires when gallery has initialized/ ready to run
        //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
    },
    onslide:function(curslide, i){ //event that fires after each slide is shown
        //Keyword "this": references current gallery instance
        //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
        //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
    }
})
 
 
 
}
</script>
<div id="simplegallery1" style="width:500px"></div>
 

[Maru77]

gjx2, gracias por tu inmensa paciencia!

Probé el código de tu ejemplo y funciona!

Solo que cuando lo adapto al mio agregando titulo y link además de la imagen no funciona.

Te dejo el código completo:

<!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" />
<title></title>

<link href='http://fonts.googleapis.com/css?family=Cabin+Condensed' rel='stylesheet' type='text/css'>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="js/simplegallery.js"></script>

<?php


$conn = new conection();
$rs = new RecordSet($conn);

$sql="SELECT * FROM `banners` ORDER BY `id` DESC LIMIT 5";
$banners = $rs->get_object_list($sql);

foreach($banners as $ban){
$img[]="imagenes/banners/$ban->id/n0-s0.jpg";
$tit[]="$ban->titulo";

}

?>
<script type="text/javascript">
window.onload = function(){

var img = new Array();
var tit = new Array();

var imagenes = <?=json_encode($img)?>
var titulos = <?=json_encode($tit)?>


for(i=0;i<imagenes.length;i++){

img[i] = new Array(imagenes[i],"","","","");
tit[i] = new Array(titulos[i],"","","","");
}

var mygallery=new simpleGallery({
wrapperid: "simplegallery", //ID of main gallery container,
dimensions: [1280, 510], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [img, tit],
autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//Keyword "this": references current gallery instance
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}
})

}

</script>

</head>

<body>

<div id="simplegallery"></div>

</body>

[gjx2]

Hola Maru77 ,

Le hice unos ajuste al código para que te pueda permite la colocación de titulo y link fijate bien en los cambios.

Código PHP:

<?php
 
 
$imgDb[1] = "http://i26.tinypic.com/11l7ls0.jpg";
$imgDb[2] = "http://i29.tinypic.com/xp3hns.jpg";
$imgDb[3] = "http://i30.tinypic.com/531q3n.jpg";
$imgDb[4] =  "http://i31.tinypic.com/119w28m.jpg";
 
 
foreach($imgDb as $id){
 
# Cree una matriz de dos dimenciones para poder tener el control de las  propiedades de cada imagen
$img['img'][] = $id;
$img['titulo'][] = "ejemplo imagen ".$id; //$ban->titulo; 
$img['link'][] = "http://".$id."/";  # Aqui colocas el link algun link 
 
}
 
?>
<script type="text/javascript">
window.onload = function(){
 
var img = new Array();
var imagenes = <?=json_encode($img)?>
 
for(i=0;i<imagenes['img'].length;i++){
    
        
     // Aqui realice otro cambio que espero lo notes.       
    img[i] = new Array( imagenes['img'][i],imagenes['link'][i],"_new",imagenes['titulo'][i] );
    
}
 
 
var mygallery=new simpleGallery({
    wrapperid: "simplegallery1", //ID of main gallery container,
    dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
    imagearray:img,     
    autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    oninit:function(){ //event that fires when gallery has initialized/ ready to run
        //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
    },
    onslide:function(curslide, i){ //event that fires after each slide is shown
        //Keyword "this": references current gallery instance
        //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
        //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
    }
})
 
 
 
}
</script>
<div id="simplegallery1" style="width:500px"></div>
 

[Maru77]

Hola GJX2!!!

Perdón por responder tarde, no estuve con mucho tiempo.

Intenté adaptar tu código, pero creo que estoy teniendo inconvenientes en como lo interto porque no me muestra ningún resultado.

Código PHP:

  <?php
 
foreach($banners as $ban){  
$img['img'][]="imagenes/banners/$ban->id/n0-s0.jpg";
$img['titulo'][] = "ejemplo imagen ".$ban; // probe con $ban->titulo pero no resulta 
$img['link'][] = "http://".$ban."/";  //probe con $ban->link y tampoco resulta - estos son en definitiva los datos que debo tomar de la tabla
}
 
?>   
 
<script type="text/javascript">
window.onload = function(){
 
var img = new Array();
var imagenes = <?=json_encode($img)?> 
 
for(i=0;i<imagenes.length;i++){
    
        
    img[i] = new Array( imagenes['img'][i],imagenes['link'][i],"_new",imagenes['titulo'][i] );
    
}
 
var mygallery=new simpleGallery({
    wrapperid: "simplegallery", //ID of main gallery container,
    dimensions: [1280, 510], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
    imagearray: img,
    autoplay: [true, 4000, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
    persist: true, //remember last viewed slide and recall within same session?
    fadeduration: 1000, //transition duration (milliseconds)
    oninit:function(){ //event that fires when gallery has initialized/ ready to run
        //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
    },
    onslide:function(curslide, i){ //event that fires after each slide is shown
        //Keyword "this": references current gallery instance
        //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
        //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
    }
})
 
}  

[gjx2]

Creo que tiene problema en como estas tratando a $ban en el foreach
me gustaria que probaras el $bar a ver que te arrojar.

Código PHP:

foreach ($banners as $ban){   
echo $ban->id."<br />";
echo $ban->titulo."<br />"; 
echo $ban->link."<br />";
}
 

[Maru77]

Si el foreach de ese modo funciona, me muestra un par de registros que cargué

2
titulo 2
www.link2.com
1
titulo 1
www.link1.com

[Maru77]

Funcionó!!! un genio gjx2!!!

El problema estaba que como el banner tiene unos botones para avanzar y retroceder < > que están en un div, se estaban superponiendo con el script y no me dejaba ver nada.

Mil gracias por tu ayuda!!!