I have my slideshow all set up but when I click the next or previous buttons on the next image the buttons shrink down and become little grey boxes. Does anyone know why this is happening?
PHP/HTML
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if ($_POST['action'] == 'Previous') {
$index = $_POST['i'];
if ($index == 0) {
$index = count($pic_array) - 1;
echo "<div class='slide'>
<img src= ".$dir.$pic_array[$index]." />
<div class='slide-caption'>
<h3 class='slide-title'> $titles[$index] </h3>
<p class='des'> $descriptions[$index] </p>
</div>
</div>";
}
else {
$index--;
echo "<div class='slide'>
<img src= ".$dir.$pic_array[$index]." />
<div class='slide-caption'>
<h3 class='slide-title'> $titles[$index] </h3>
<p class='des'> $descriptions[$index] </p>
</div>";
}
echo "<form action='gallery.php' method='post'>
<div class='previous'>
<button value='Previous' name='action'>
<i class='fa fa-arrow-left fa-2x'></i>
</button>
</div>
<div class='next'>
<button value='Next' name='action'>
<i class='fa fa-arrow-right fa-2x'></i>
</button>
</div>
</div>
<br>
<input type='hidden' name='i' value= '$index'>
</form>";
}
if ($_POST['action'] == "Next") {
$index = $_POST['i'];
if ($index == count($pic_array) - 1) {
$index = 0;
echo "<div class='slide'>
<img src= ".$dir.$pic_array[$index]." />
<div class='slide-caption'>
<h3 class='slide-title'> $titles[$index] </h3>
<p class='des'> $descriptions[$index] </p>
</div>";
}
else {
$index++;
echo "<div class='slide'>
<img src= ".$dir.$pic_array[$index]." />
<div class='slide-caption'>
<h3 class='slide-title'> $titles[$index] </h3>
<p class='des'> $descriptions[$index] </p>
</div>";
}
echo "<form action='gallery.php' method='post'>
<div class='previous'>
<button value='Previous' name='action'>
<i class='fa fa-arrow-left fa-2x'></i>
</button>
</div>
<div class='next'>
<button value='Next' name='action'>
<i class='fa fa-arrow-right fa-2x'></i>
</button>
</div>
</div>
<br>
<input type='hidden' name='i' value= '$index'>
</form>";
}
} else {
$index = 1;
echo '<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>';
echo "<div class='slide'>
<img src= ".$dir.$pic_array[$index]." />
<div class='slide-caption'>
<h3 class='slide-title'> $titles[$index] </h3>
<p class='des'> $descriptions[$index] </p>
</div>";
echo "<form action='gallery.php' method='post'>
<div class='previous'>
<button value='Previous' name='action'>
<i class='fa fa-arrow-left fa-2x'></i>
</button>
</div>
<div class='next'>
<button value='Next' name='action'>
<i class='fa fa-arrow-right fa-2x'></i>
</button>
</div>
</div>
<br>
<input type='hidden' name='i' value= '$index'>
</form>";
}
CSS
.slide {
display:inline-block;
position: relative;
height: 300px;
width: 500px;
}
.slide img {
display:block;
max-width:100%;
height: 300px;
width: 500px;
}
.slide-title {
margin:0 6rem 1rem;
}
.des {
margin: 0 6rem 0;
}
.slide-caption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
color: white;
background-color: rgba( 0, 0, 0, 0.5 );
opacity:0;
}
.previous {
position: absolute;
bottom: 0;
left: 0;
opacity: 0;
background-color: rgba( 0, 0, 0, 0.5);
}
.next {
position: absolute;
bottom: 0;
opacity: 0;
right: 0;
background-color: rgba( 0, 0, 0, 0.5);
}
Javascript
$(function() {
$slide = $('.slide');
$caption = $slide.find('.slide-caption');
$next = $slide.find('.next');
$previous = $slide.find('.previous');
$slide.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');
}
);
});
http://i.imgur.com/4ONaGIL.png http://i.imgur.com/wMKESuo.png?1
You're doing things the hard way, but I understand why it looked like the correct approach at first.
Instead of echoing out all your HTML from PHP, do just what you need in PHP and do the rest in HTML and javascript. You seem to be using Bootstrap, so we will use the Bootstrap carousel (aka slider.).
First step is for you to do: At top, write PHP code to grab all the images (just the paths/names.ext) for your slider and put them into a PHP array, which the code below will convert into JSON and store invisibly on the page as a string inside a hidden <input> field. The javascript/jQuery will then grab that string, turn it into a javascript array, and use that to populate your slider. Slick as frog's hair.
<?php
$arrPics = your_php_fn_to_get_all_images_from_database_or_filesystem_as_an_array();
//$arrPics = array('["http://loremflickr.com/500/98","http://loremflickr.com/500/100","http://loremflickr.com/498/100","http://loremflickr.com/498/98","http://loremflickr.com/499/99"]');
?>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<input id="jsonPics" type="hidden" value="<?php echo json_encode($arrPics); ?>" />
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators"></ol>
<div class="carousel-inner" role="listbox"></div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- #myCarousel -->
javascript/jQuery:
$(function() {
var arrPix = $('#jsonPics').val();
var arrPix = $.parseJSON( arrPix );
//alert( arrPix.length );
$carItem = $('.carousel-inner');
$carInd = $('.carousel-indicators');
$.each(arrPix, function(i, pic){
$carInd.append('<li data-target="#myCarousel" data-slide-to="' +i+ '"></li>');
$carItem.append('<div class="item"><img src="' +pic+ '" alt="Slider Image"></div>');
});
$('.carousel-indicators li:first-of-type').addClass('active');
$('.carousel-inner .item:first-of-type').addClass('active');
});//END document.ready
Note:
The above jsFiddle demo fakes out the PHP part (jsFiddle cannot do PHP) and begins with the hidden input field populated with the JSON "array" that you need to get from PHP, as per the code at top.
That part hasn't been tested/debugged, so that is left as an exercise for you. Of course, if you have trouble with it, post a new question here on StackOverflow - but try hard to figure it out yourself first.