Доброго времени суток!
Есть скрипт слайд-шоу, который берет изображения из папки, в нем все работает отлично, помогите сделать так чтобы по умолчанию открывалось последнее изображение, а не первое.
И если можно было бы сделать переключение слайдов в обратном порядке и нормальном было бы вообще здорово)
Заранее всем благодарочка!
сам скрипт: (css выкладывать не буду, если нет необходимости)
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>History playback</title>
<link rel="stylesheet" href="base.css">
</head>
<body>
<?php
if(!isset($_GET['dir'])){
echo '<ul>';
$dir = './';
$files = array_filter(scandir($dir),"is_dir");
foreach($files as $f) {
if (!preg_match("/^\./",$f)) {
$childfiles = scandir($f);
$count = 0;
foreach($childfiles as $c) {
if (preg_match("/image|video/",mime_content_type($f.'/'.$c))){
$count++;
};
}
echo '<li><a href="index.php?dir='.$f.'">'.$f.' ['.$count.']</li>';
}
}
echo '</ul>';
} else {
if (preg_match('/^\.|\/+|~/',$_GET['dir'])){
die('only direct child folders');
}
$all = array();
$dir = './'.$_GET['dir'];
if (!is_dir($dir)) {
die('Cannot find the folder, sorry');
}
$files = scandir($dir);
foreach($files as $f) {
if (preg_match("/image|video/",mime_content_type($dir.'/'.$f))){
array_push($all,$f);
}
}
?>
<div id="slideshow-container"></div>
<script>
let slideshow = {
container: '#slideshow-container',
media: <?php echo json_encode($all);?>,
folder: '<?php echo urlencode(str_replace('index.php?','',$_GET['dir']))?>/',
autoplay: 'no',
endless: 'no',
last: 'yes'
}
</script>
<script src="slideshow.js"></script>
<?php } ?>
</body>
</html>
slideshow.js
if (typeof slideshow === 'object') {
let styles = document.createElement('link');
styles.rel="stylesheet";
styles.href="slideshow.css";
document.head.appendChild(styles);
document.querySelector(slideshow.container).innerHTML = `
<div class="slideshow-info"></div>
<div class="slideshow-docs">Arrow keys go back/forward.
<span>space to toggle autoplay</span></div>
<button id="slideshow-next">▶</button>
<button id="slideshow-prev">◀</button>
<button id="slideshow-autoplay"></button>
<div class="slideshow-wrapper">
</div>
`;
const out = document.querySelector('.slideshow-info');
const wrapper = document.querySelector('.slideshow-wrapper');
const next = document.querySelector('#slideshow-next');
const prev = document.querySelector('#slideshow-prev');
const autoplay = document.querySelector('#slideshow-autoplay');
let hash = 'counter' + slideshow.folder;
let counter = localStorage.getItem(hash)||0;
let autoincrease = slideshow.autoplay === 'no' ? false : true;
let restart = slideshow.endless === 'no' ? false : true;
let first = false;
let last = false;
let timeout = false;
let speed = slideshow.speed || 3000;
let all = slideshow.media.length
function validatecounter() {
autoplay.innerText = autoincrease ? "▶️" : '⏸';
if (restart) {
if (counter < 0) counter = all - 1;
counter = counter % all;
} else {
if (counter <= 0) {
counter = 0;
}
if (counter === all) counter = all - 1;
}
if (!restart) {
first = counter === 0;
last = counter === all - 1;
if (counter === 0) {
prev.classList.add('hidden');
} else {
prev.classList.remove('hidden');
}
if (counter === all - 1) {
next.classList.add('hidden');
autoplay.classList.add('hidden');
} else {
next.classList.remove('hidden');
autoplay.classList.remove('hidden');
}
}
localStorage.setItem(hash,counter);
show();
}
function show() {
clearTimeout(timeout);
out.innerText = `${slideshow.media[counter]} ${counter+1}/${all}`;
wrapper.innerText = '';
wrapper.dataset.loaded = 'false';
if(slideshow.media[counter].endsWith('.mp4')) {
wrapper.style.backgroundImage = ``;
let vid = document.createElement('video');
vid.setAttribute('loop','true');
vid.setAttribute('autoplay','true');
vid.setAttribute('src', slideshow.folder + slideshow.media[counter]);
if (wrapper.dataset.loaded === 'false') {
vid.addEventListener('canplaythrough', ev => {
wrapper.appendChild(vid);
loaded();
},{passive:true, once:true});
}
} else {
wrapper.innerText = ' ';
let url = slideshow.folder + slideshow.media[counter];
let i = new Image();
i.src = url;
i.onload = function() {
wrapper.style.backgroundImage = `url(${url})`;
loaded();
}
i.onerror = function() {
wrapper.innerText = 'Error loading image ' + url;
loaded();
}
}
}
function loaded() {
wrapper.dataset.loaded = 'true';
if (autoincrease && !last) {
timeout = window.setTimeout(function(){
counter++;
validatecounter();
},speed);
}
}
function nextslide() {
if(!last) {
counter++;
autoincrease = false;
validatecounter();
}
};
function prevslide() {
if(!first) {
counter--;
autoincrease = false;
validatecounter();
}
};
function toggleauto() {
autoincrease = !autoincrease;
validatecounter();
};
next.addEventListener('click', nextslide);
prev.addEventListener('click', prevslide);
autoplay.addEventListener('click',toggleauto);
document.addEventListener('keyup', ev => {
ev.preventDefault();
if (ev.key === "ArrowRight") { nextslide(); }
if (ev.key === "ArrowUp") { history.back(); }
if (ev.key === "ArrowLeft") { prevslide(); }
if (ev.key === " ") { toggleauto(); }
});
validatecounter();
} else {
console.error('Please define a slideshow object first');
document.body.innerText = "⚠️ Can't find slideshow object"
}
