I'm making a slideshow with the get ajax method, but I'm a little confused on how it works. When I click next shouldn't in run through the gallery_.php file with index incremented which would change the slide?
PHP/HTML
if (!isset($_GET["index"])) {
$index = 0;
}
else{
$index = $_GET["index"];
}
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>";
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() {
$.get("gallery_.php?index=" + 1);
index++;
});
});
Right now you're doing
$.get("gallery_.php?index=" + 1);
and concatenating a number to a string ends up as the string
$.get("gallery_.php?index=1");
this is what you're sending every time, you wanted to do
$.get("gallery_.php?index=" + index);