用于幻灯片放映的 Ajax 不起作用

Question

I don't seem to understand exactly how this works. When I call the get ajax method shouldn't the index change and therefore the slide should change or am I not getting something about this.

PHP/HTML

echo "<div id='slider'>
        <ul class='slides'>

            <li class='slide'>
                <div class='pic'>
                    <img src= " . $dir . $pic_array[$index] . " />
                </div>
                <div class='caption'>
                    <p id='title'>$titles[$index]</p>
                    <p id='des'>$descriptions[$index]</p>
                </div>
                <div class='next'>
                    <i class='fa fa-arrow-right fa-2x'></i>
                </div>    
                <div class='previous'>
                    <i class='fa fa-arrow-left fa-2x'></i>
                </div>
           </li>";

echo     "</ul>  
      </div>


      </html>";

$conn->close();

?>

Javascript

$(function () {
    var arrPix = $('#json_pics').val();
    var arrPix = $.parseJSON( arrPix );


    var index = 0;

    var $slider = $('#slider');
    var $slides = $slider.find('.slides');
    var $slide = $slides.find('.slide');
    var $next = $slides.find('.next');
    var $previous = $slides.find('.previous');
    var $caption = $slides.find('.caption');

    var slide_length = $slide.length;

    $slider.hover(function() {
            $caption.css('opacity', '1');
            $next.css('opacity', '1');
            $previous.css('opacity', '1');
        }, function() {
            $caption.css('opacity', '0');
            $next.css('opacity', '0');
            $previous.css('opacity', '0');
        }
    );
    $next.click(function() {
        index++;
        $.get("gallery_.php?index=" + index);

    });
});

EDIT: Should I be using load instead?

Answer 1

In an endeavor to get you a solution that

• Uses AJAX
• and uses PHP,

I would suggest something like the following.

' getpic.php '

Summary: (A new file... used to simplify the process of getting a new picture.)

Description: Contains a function that generates the <img> tag and related info for the next image in your gallery.

$dir = /*whatever it is*/;
$pix_array = array("image1.jpg", "image2.png", "orWhateverElse.gif" /*etc.*/);
$descriptions = /*whatever they are*/;
$titles = /*whatever they're supposed to be*/;

function priWrap($index) {
    /*
    This handles the actual generating of the <img> tag as well as
    the caption and such.
    $index refers to a specific picture in $pix_array.
    */

    global $pix_array, $dir, $titles, $descriptions;

    $arr_len = count($pix_array);

    if ($index < 0) {
        $index = $arr_len-1;
        }
    else if { $index >= $arr_len) {
        $index = 0;
        }

    echo "<div class='pic'>
              <img src='" . $dir . $pic_array[$index] . "' data-ind='$index' />
          </div>
    <div class='caption'>
            <p id='title'>" . $titles[$index] . "</p>
            <p id='des'>" . $descriptions[$index] . "</p>
        </div>";
    }

#let's get it set up to handle AJAX calls
if (isset($_GET['index'])) {
    $index = intval($_GET['index']);
    priWrap($index);
    }

---

Changes to ' gallery_.php '

The code you posted should now look like this:

require_once('getpic.php');

echo "<div id='slider'>
    <ul class='slides'>

        <li class='slide'>
            <div id='picWrapper'>";

echo priWrap($index) . "
            </div><!--End #picWrapper-->
            <div class='next'>
                <i class='fa fa-arrow-right fa-2x'></i>
            </div>    
            <div class='previous'>
                <i class='fa fa-arrow-left fa-2x'></i>
            </div>
       </li>";

echo "</ul>  
  </div>
  </body>
  </html>";

$conn->close();

?>

---

Your javascript needs changed, too.

var index = 0;

should be

var index = parseInt($(".pic img").attr("data-ind"));

and

$next.click(function() {
    index++;
    $.get("gallery_.php?index=" + index);

});

should be

$next.click(function() {
    index++;
    $("#picWrapper").load("getpic.php?index=" + index,
        /*Add callback so that index is updated properly.*/
        function () {
             //update our index
             index = parseInt($(".pic img").attr("data-ind"));
             //show our caption stuff...
             $(".caption").css('opacity', '1');
             }
        );

});

---