poner php json encode value en la matriz y acceder a cada elemento de la matriz, y setInterval problema

Bien, tengo este proyecto en el que estoy trabajando. Lo hice de la única manera que se me ocurrió porque no se me ocurrió otra.

El objeto del código es hacer que aparezca según la cantidad de imágenes, máximo 4, devueltas de una consulta sql usando php, una presentación de diapositivas mostrará todas las imágenes. La primera imagen se moverá a donde la imagen dos es la imagen dos a donde está la imagen tres, etc. y la última imagen se moverá a donde está la imagen uno. Este es un ciclo de bucle constante.

No pude encontrar las funciones correctas en jquery para realizar esta tarea, así que se me ocurrió otra cosa. Estaba buscando poner las imágenes de php en una matriz jquery usando getJSON, creando un bucle que sería similar a array_unshift ($ rows, array_pop ($ rows)) de PHP ... que realizaría esta acción, mostraría la salida, crearía una nueva array, y repita la misma acción, hasta que se complete todo el proceso de animación. Repita usando setInterval para bucle continuo.

Independientemente, lo que tengo ahora son cuatro funciones setInterval en un archivo JS que obtienen resultados jSON de cuatro archivos php para que parezca que las imágenes se están moviendo realmente de un marco a otro. El problema es que puede ver la página recargándose con setInterval.

Me preguntaba si habría una mejor manera de hacer esto. Muchas gracias de antemano. Realmente necesito hacer esto esta noche. ¡Y tuve que trabajar con las solicitudes SQL de otra persona! Esto es lo que tengo: index.php

  <style type ="text/css" media="all">
.frame {
    border:1px solid #206AB6
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery.offput.ca/js/jquery.timers.js"></script>
<script type="text/javascript" src="slide.js"></script>
<?php 
//determine if the user has signed up for slideshow feature
$username = $_SESSION['username'];
//not sure how to work query where it can obtain feature name or id for slideshow feature
//because I don't know how the rest of the code or database is set up
//it should work if you can set the featurename or feature id for the slideshow in this query
$imagesql = "SELECT userid, username, featureid, featurename FROM $t_featureopts WHERE username =  ". $username ." "; //AND featurename = slideshow ???
$imageresult=mysql_query($imagesql) or die(mysql_error().$imagesql);
//while the user has signed up for more than one slideshow feature
if($imageresult > 1) {

    //get the images for each ad for the slideshow features the user has signed up for
?>
<?php
//select the picfiles for ad from the db
$sql = "SELECT picfile FROM $t_adpics WHERE adid = '$row[adid]' ";
          $picturescount = mysql_query($sql) or die(mysql_error().$sql);
           $num_rows = mysql_num_rows($picturescount);
            //if there is only one image
           if ($num_rows  == 1 ) { ?>
<?php include_once('slide.php');
}
?>
</div>
<?php if($num_rows == 2) { ?>
<?php include_once ('slide_two.php');
}
?>
</div>
<?php  if($num_rows == 3)  {?>
<?php include_once('slide_three.php');
}
?>
</div>
<?php if($num_rows == 4) {?>
<?php include_once('slide_four.php'); 
}
?>
</div>
<?php } ?>
<!--end while loop--> 

slide1.php

<div class="thumbnail">
<?php              ///select the pic file from db
                $sql = "SELECT picfile FROM $t_adpics WHERE adid = '$row[adid]'";
                $pictures = mysql_query($sql) or die(mysql_error().$sql);

                    while($mypics=mysql_fetch_assoc($pictures)) {
                    $rows[] = array(
                "picfile" => $mypics['picfile']
                );

                        $imgsize = GetThumbnailSize("{$datadir[adpics]}/{$mypics[picfile]}", $tinythumb_max_width, $tinythumb_max_height);?>
                       <?php foreach ($mypics as $key => $value) {
                    $value = $key; ?>
<div id="frame_container">
<div id="framelinks"> <a href="<?php echo $url; ?>" class="posttitle"><img src="imgages/btn.jpg" /></a> </div>
<div id="framepos slideone">
  <iframe src="<?php echo "$datadir[adpics]/$mypics[picfile][0]"; ?>" class="frame" width="<?php echo $imgsize[0]; ?>" height="<?php echo $imgsize[1]; ?>"                                   scrolling="no" fameborder="0" marginheight="0" marginwidth="0"> </iframe>
  <?php } 
                    }
    echo json_encode($rows); 

slide.js

$(document).ready(function() {
//this should allow all links to open in a new window
$("a").attr("target","_new");
$.getJSON('slide.php', function(data) {
    var items=[];
$.each(data, function(key, val) {
        key = val;
    });
      //the first function is for one image loaded
      //need to figure out how to put items in array and access each image
var handle = setInterval(changeIframe, 3000);
//order of the array is image 1 and then image 2 based on the order of the first image 
//in the framea
var images = ["images/isoads.jpg", "key[0]"];
var index = 0;
function changeIframe() {
  $('#frameone')[0].src = images[index++];
  index = index >= images.length ? 0 : index;

    }
});

//////////////////////////////////////////////////////////
//this function is for two images loaded
$.getJSON('slide_two.php', function(datatwo) {
    var itemstwo=[];
$.each(datatwo, function(key, val) {
        key = val;
    });
    (function swap(i){
        //image1 id is set to true if the source is /img1(first image) otherwise
    //it is set to image2(second image)
      $("#image1").attr('src',i === 1 ? 'key[0]' : 'key[0]');
      //image2 id is set to true if the source is ithe second img otherwise
      //it is set to (image1/first image)
      $("#image2").attr('src',i === 1 ? 'key[1]' : 'key[0]');
      setTimeout(function(){
            swap(i === 1 ? 0 : 1);
      },3000);
})(0);
});
//////////////////////////////////////////////////////////
///this function is for three images loaded
$.getJSON('slide_three.php', function(datathree) {
    var itemsthree=[];
$.each(datathree, function(key, val) {
        key = val;
    });
var handle = setInterval(changeIframe, 3000);
var images = ["key[0]", "key[1]", "key[2]" ];
var index = 0;
function changeIframe() {
  $('#frameone')[0].src = images[index++];
  index = index >= images.length ? 0 : index;

}
//array for changeIframeTwo images should be in the order of 
//image 2, image 3, image 1
var handleTwo = setInterval(changeIframeTwo, 3000);
var imagesTwo = ["key[1]" , "key[2]", "key[0]"];
var indexTwo=0;
function changeIframeTwo() {
      $('#frametwo')[0].src = imagesTwo[indexTwo++];
          indexTwo = indexTwo >= imagesTwo.length ? 0 : indexTwo;

}
//array for change IframeThree images should be in the order of
//image 1, 2, 3
var handleThree = setInterval(changeIframeThree, 3000);
var imagesThree = ["key[1]", "key[2]" ,"key[3]"];
var indexThree=0;
function changeIframeThree() {
      $('#framethree')[0].src = imagesThree[indexThree++];
          indexThree = indexThree >= imagesThree.length ? 0 : indexThree;

}
/////////////////////////////////////////////////////////
    });
});

//////////////////////////////////////////////////////////////////////////////
$.getJSON('slide_four.php', function(datafour) {
    var itemsfour=[];
$.each(datafour, function(key, val) {
        key = val;
    });
//array order for changeIFrame is image4, image1, image2, image3
var handle = setInterval(changeIframe, 3000);
var images = ["key[3]", "key[0]", "key[1]", "key[2]" ];
var index = 0;
function changeIframe() {
  $('#frameone')[0].src = images[index++];
  index = index >= images.length ? 0 : index;

}
//array order for changeIFrameTwo is image3, image4, image1, image2
var handleTwo = setInterval(changeIframeTwo, 3000);
var imagesTwo = ["key[2]" , "key[3]", "key[0]", "key[1]"];
var indexTwo=0;
function changeIframeTwo() {
      $('#frametwo')[0].src = imagesTwo[indexTwo++];
          indexTwo = indexTwo >= imagesTwo.length ? 0 : indexTwo;

}
//array order for changeIframeThree is image2, image3, image4, image1
var handleThree = setInterval(changeIframeThree, 3000);
var imagesThree = ["key[1]", "key[2]" ,"key[3]", "key[0]"];
var indexThree=0;
function changeIframeThree() {
      $('#framethree')[0].src = imagesThree[indexThree++];
          indexThree = indexThree >= imagesThree.length ? 0 : indexThree;

}
//array order for changeIframeThree is image1, image2, image3, image4
var handleFour = setInterval(changeIframeFour, 3000);
var imagesFour = ["key[0]", "key[1]" ,"key[2]", "key[3]"];
var indexFour=0;
function changeIframeFour() {
      $('#framefour')[0].src = imagesFour[indexFour++];
          indexFour = indexFour >= imagesFour.length ? 0 : indexFour;

}

 });
/////////////////////////////////////////////////////////////////////////////

Entonces, me pregunto cómo hacer que esto funcione sin usar setInterval tantas veces. Quizás haya una mejor manera. Siempre pienso demasiado en todo. Muchas, muchas gracias de antemano.

preguntado el 28 de agosto de 11 a las 01:08

Sería mucho más fácil hacer una solicitud para obtener las imágenes y luego usar jQuery para hacer los efectos del control deslizante. En cuanto al rendimiento, su configuración actual va a ejercer una gran presión sobre su servidor, en caso de que tenga muchos usuarios conectados al mismo tiempo. En lo que respecta a las soluciones rápidas y fáciles, busque uno de los muchos complementos de control deslizante de imágenes de jQuery. Debe haber uno que se adapte a sus necesidades o que pueda usar como ejemplo para implementar algo que sí lo haga. Nota al margen, generalmente es mejor, en términos de rendimiento, usar setTimeout y volver a llamarlo en la función para repetir, en lugar de usar setInterval -

0 Respuestas

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.