daneh daneh - 4 months ago 19
Ajax Question

Ajax for slideshow not working

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

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 for the next image in your gallery.

$dir = /*whatever it is*/;
$pix_array = array("image1.jpg", "image2.png", "orWhateverElse.gif" /*etc.*/);

function priTag($index) {
    /*
    This handles the actual generating of the <img> tag.
    $index refers to a specific picture in $pix_array.
    */

    global $pix_array, $dir;

    $index = $index % $count($pix_array);

    echo "<img src='" . $dir . $pic_array[$index] . "' data-ind='$index' />";
    }

#let's get it set up to handle AJAX calls
if (isset($_GET['index'])) {
    $index = intval($_GET['index']);
    priTag($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 class='pic'> ";

echo priTag($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>
  </body>
  </html>";

$conn->close();

?>

Your javascript needs changed, too.

var index = 0;

should be

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

and

$.get("gallery_.php?index=" + index);

should be

$(".pic").load("getpic.php?index=" + index);

Finally, relax and smile. :DD