put php json encode value in array and accessing each array element, and setInterval issue_问答_开发者

OK, I have this project that I am working on. I did it the only way I could think of because I could not think of another way.

The object of the code is to make it appear as based on the number of images, max 4, returned from a sql query using php, a slideshow will display all images. The first image will move to where image two is image two to where image three is, etc. and the last image moves to where image one is. This a constant looping cycle.

I could not find the right functions in jquery to perform this task so I came up with something else. I was looking for putting the images from php in a jquery array using getJSON, creating a loop that would be similar to PHP's array_unshift($rows, array_pop($rows))...that would perform this action, display output, create new array, and repeat the same action, until the entire process of animation was complete. Repeat using setInterval for continuous loop.

Regardles, what I have now is four setInterval functions in one JS file that get jSON results from four php files to make it appear that the images are actually moving from frame to frame. The problem is you can see the page reloading with the setInterval.

I was wondering if there was a better way I could do this. Many thanks in advance. I really need to get this done tonight. And I had to work with someone else's SQL requests!!! Here is what I have: 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 change开发者_运维技巧IframeThree() {
      $('#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;

}

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

So, I am wondering how to make this work without using the setInterval so many times. Maybe there is a better way. I always overthink everything. Many, many thanks in advance.