Slider probleem Prev en Nwext knop

Status
Niet open voor verdere reacties.

weswillem

Gebruiker
Lid geworden
8 nov 2011
Berichten
310
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?
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>
 
Ik denk dat het zinvoller is om de code even te vervangen door de HTML-code die er betrekking op heeft.
Aan de PHP-code zal het zeker niet liggen.

Plaats deze graag even ook in een JSfiddle en deel die link, zodat we kunnen zien hoe het er nu uit ziet.
 
Laatst bewerkt:
Het eerste begrijp ik even niet.

wat bedoel je met jsfiddle?

Ben nog steeds een beginner, vandaar.
sorry
 
www.jsfiddle.net

Was ook eenvoudig te vinden als je het in Google gooit. ;)

Plaatje HTML/CSS/JS code erin en druk op RUN, SAVE en deel de link.
Het is niets anders dan een soort zandbak om code uit te voeren en te delen.
 
Laatst bewerkt:
slider.jpg
dit gebeurt als ik de foto"s gebruikt.
De knoppen blijven boven aan staan
 
Laatst bewerkt door een moderator:
Ik kan in je JSfiddle geen representatief voorbeeld zien hoe het eruit hoort te zien.
Gooi er eens een afbeelding bij, dan is het echt makkelijker te debuggen. Aan een afbeelding kunnen we ook niet zien welke elementen en styles er aan vasthangen.

of anders met een voorbeeldpagina.
 
ik probeerde of ik een foto erbij kon doen, maar weet niet of dat mogelijk is in dat jsfiddle
 
Laatst bewerkt:
ik probeerde of ik een foto erbij kon doen, maar weet niet of dat mogelijk is in dat jsfiddle

Je kan gewoon een link en afbeelding plaatsen hoor.
 
Ik weet niet hoe JSfiddle werkt. Hoe kan je daarin dan een foto plaatsen

Aar,
Ik laat het nu ff rusten en ga morgen weer verder.
Bedankt voor je respons tot zover. Toch weer wat bijgeleerd
 
Laatst bewerkt:
Bijlage werkt niet. Plaats liever je plaatjes op <andere website>
Graag tekst en afbeelding in een bericht bij elkaar houden, niet verspreiden over verschillende websites.
Het gaat eenvoudig.

1. Klik op knop "Ga geavanceerd".
2. Knopje wysiwyg.jpg helemaal links op de knoppenbalk mag niet zijn ingedrukt.
3. Klik op de plek waar het plaatje moet komen, en dan Afbeelding toevoegen met Afb-invoegen.jpg
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan