Ik ben bezig met een fotoslider. Alles werkt behalve dat ik de Previous- en Nextknop niet op de juiste plaats krijg.
Deze moeten aan de linker en rechterzijde in het midden komen.
Wat doe ik nu verkeerd?
Deze moeten aan de linker en rechterzijde in het midden komen.
Wat doe ik nu verkeerd?
PHP:
<?php
/*
PHP image slideshow - auto version - PHP > 5.0
*/
// set the absolute path to the directory containing the images
define('IMGDIR', 'C:/wamp64/www/testslider/fotos/');
// same but for www
define('WEBIMGDIR', '/testslider/fotos/');
// set session name for slideshow "cookie"
define('SS_SESSNAME', 'slideshow_sess');
// global error variable
$err = '';
// start img session
session_name(SS_SESSNAME);
session_start();
// init slideshow class
$ss = new slideshow($err);
if (($err = $ss->init()) != '')
{
header('HTTP/1.1 500 Internal Server Error');
echo $err;
exit();
}
// get image files from directory
$ss->get_images();
// set variables, done.
list($curr, $caption, $first, $prev, $next, $last) = $ss->run();
/*
slideshow class, can be used stand-alone
*/
class slideshow
{
private $files_arr = NULL;
private $err = NULL;
public function __construct(&$err)
{
$this->files_arr = array();
$this->err = $err;
}
public function init()
{
// run actions only if img array session var is empty
// check if image directory exists
if (!$this->dir_exists())
{
return 'Error retrieving images, missing directory';
}
return '';
}
public function get_images()
{
// run actions only if img array session var is empty
if (isset($_SESSION['imgarr']))
{
$this->files_arr = $_SESSION['imgarr'];
}
else
{
if ($dh = opendir(IMGDIR))
{
while (false !== ($file = readdir($dh)))
{
if (preg_match('/^.*\.(jpg|jpeg|gif|png)$/i', $file))
{
$this->files_arr[] = $file;
}
}
closedir($dh);
}
$_SESSION['imgarr'] = $this->files_arr;
}
}
public function run()
{
$curr = 1;
$last = count($this->files_arr);
if (isset($_GET['img']))
{
if (preg_match('/^[0-9]+$/', $_GET['img'])) $curr = (int) $_GET['img'];
if ($curr <= 0 || $curr > $last) $curr = 1;
}
if ($curr <= 1)
{
$prev = $curr;
$next = $curr + 1;
}
else if ($curr >= $last)
{
$prev = $last - 1;
$next = $last;
}
else
{
$prev = $curr - 1;
$next = $curr + 1;
}
// line below sets the caption name...
$caption = str_replace('-', ' ', $this->files_arr[$curr - 1]);
$caption = str_replace('_', ' ', $caption);
$caption = preg_replace('/\.(jpe?g|gif|png)$/i', '', $caption);
$caption = ucfirst($caption);
return array($this->files_arr[$curr - 1], $caption, 1, $prev, $next, $last);
}
private function dir_exists()
{
return file_exists(IMGDIR);
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slideshow</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font: 100% Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
.gallery {
border: 1px #ccc solid;
max-width: 600px;
margin: 0 auto;
padding: 40px;
text-align: center;
background-color: midnightblue;
}
.gallery .gallery-image img {
max-width: 100%;
height: auto;
}
.gallery .gallery-image-label {
color: white;
}
a {
color: white;
}
a:hover {
color: white;
}
.sp {
padding-right: 40px;
}
.prev, .next {
cursor: pointer;
position: relative;
top: 40%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.gallery .prev {
left: -50%;
border-radius: 3px 0 0 3px;
}
.gallery .next {
right: -50%;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
@media all and (orientation: portrait){
.gallery{
max-width: 90%;
height: 30%;
display: inline-block;
}
}
@media all and (orientation:landscape){
.gallery{
width: 50%;
height: 30%;
display: inline-block;
}
}
</style>
</head>
<body>
<div class="gallery">
<a class= "prev" href="?img=<?=$prev;?>">❮</a>
<a class= "next" href="?img=<?=$next;?>">❯</a>
<div class="gallery-image">
<img src="<?=WEBIMGDIR;?><?=$curr;?>" alt="" />
</div>
<p class="gallery-image-label"><?=$caption;?></p>
<!--div class="gallery-nav"-->
<!--/div-->
</div>
</body>
</html>