I have a working slideshow with next and previous buttons and I'm trying to work with css to get the descriptions and the title inside the image like so http://imgur.com/1WpiLYY. What I've found online is to put the image in the background, but I don't know how to do that with a slideshow.
HTML
<html>
<head>
<link href="gallery.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
<title></title>
</head>
<body>
<p>dog</p>
<form action="gallery.php" method="post">
<div class="prev">
<input name="action" type="submit" value="Previous">
</div>
<div class="prev">
<input name="action" type="submit" value="Next">
</div><input name="i" type="hidden" value="1">
<div class="description">
<p>dog</p>
<p></p>
<a href="?index=<br />
<font size='1'><table class='xdebug-error xe-notice' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Use of undefined constant php - assumed 'php' in on line <i>161</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0094</td><td bgcolor='#eeeeec' align='right'>245920</td><td bgcolor='#eeeeec'>{main}( )</td><td bgcolor='#eeeeec'>.../gallery.php<b>:</b>0</td></tr>
</table></font>
">next</a>-->
</form>
</body>
</html>
CSS
img {
height: 250px;
width: 450px;
display:inline-block;
}
/*div.img {
border: 5px solid black;
display: inline-block;
position: relative;*/
/*width: 450px;
height: 250px;*/
/*opacity: 0.6;
filter: alpha(opacity=60);*/
/*}*/
div.description {
color:blue;
}
div.prev {
text-align: left;
}
div.next {
margin-left:400px;
margin-top:0px;
}
PHP
//if ($result->num_rows > 0) {
// output data of each row
$pic_array = array();
$titles = array();
$descriptions = array();
while ($row = $result->fetch_assoc()) {
$pic_array[$count] = $row['pic_url'];
$titles[$count] = $row['title'];
$descriptions[$count] = $row['description'];
$count++;
}
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if ($_POST['action'] == 'Previous') {
$index = $_POST['i'];
if ($index == 0) {
$index = count($pic_array) - 1;
echo "<p> $titles[$index] </p>";
echo "<img src= ".$dir.$pic_array[$index]." />";
}
else {
$index--;
echo "<p> $titles[$index] </p>";
echo "<img src= " . $dir . $pic_array[$index] . " />";
}
echo '<form action="gallery.php" method="post">
<input type="submit" name="action" value="Previous">
<input type="submit" name="action" value="Next">';
echo "<input type='hidden' name='i' value= '$index'' >";
echo "<p> $descriptions[$index]";
}
if ($_POST['action'] == "Next") {
$index = $_POST['i'];
if ($index == count($pic_array) - 1) {
$index = 0;
echo "<p> $titles[$index] </p>";
echo "<img src= ".$dir.$pic_array[$index]." />";
}
else {
$index++;
echo "<p> $titles[$index] </p>";
echo "<img src= " . $dir . $pic_array[$index] . " />";
}
echo '<form action="gallery.php" method="post">
<input type="submit" name="action" value="Previous">
<input type="submit" name="action" value="Next">';
echo "<input type='hidden' name='i' value= '$index' >";
echo " $descriptions[$index]";
}
} else {
$index = 1;
echo "<p> $titles[$index] </p>";
echo "<img src= ".$dir.$pic_array[$index]." />";
echo '<form action="gallery.php" method="post">
<div class="prev">
<input type="submit" name="action" value="Previous">
</div>
<div class="prev">
<input type="submit" name="action" value="Next">
</div>';
echo "<input type='hidden' name='i' value= '$index' >";
echo "<div class='description'
<p> $descriptions[$index] </p>
</div>";
}
$conn->close();
?>
