Помогите модифицировать скрипт слайд-шоу
Доброго времени суток!
Есть скрипт слайд-шоу, который берет изображения из папки, в нем все работает отлично, помогите сделать так чтобы по умолчанию открывалось последнее изображение, а не первое. И если можно было бы сделать переключение слайдов в обратном порядке и нормальном было бы вообще здорово) Заранее всем благодарочка! сам скрипт: (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"
}
|
slideshow.media - это ведь массив?
У массивов есть метод reverse (arr.reverse()), который переставляет элементы массива в обратном порядке. Можно его использовать. |
Цитата:
массив, а где использовать метод реверс? в функции показа? function show() { clearTimeout(timeout); out.innerText = `${slideshow.media[counter]} ${counter+1}/${all}`; или делать отдельную функцию? |
Если нужно просто начинать с последнего и идти к первому, то в стр 22
let counter = localStorage.getItem(hash)||0; надо устанавливать на последний let counter = localStorage.getItem(hash)||slideshow.media.length-1; Ввести переменную direction = 1 если надо идти от начала к концу или -1 если от последнего к первому и в стр 99 counter += direction; Ну и менять direction, когда надо сменить направление при автоплее. Это идеи Писать за вас трудно, не имея возможности отлаживать. |
Цитата:
Сделал так, но все равно показывает с первого кадра, а не с последнего, хотя если промотать кадры вперед и включить автоплэй то листает назад, если бы получилось начинать с последнего мне бы этого хватило. В скрипте еще есть некая история, т.е. он запоминает тот кадр который смотрел последним, мне бы убрать эту функцию вообще, т.к. картинки меняются. Если что скрипт брал с гитхаба https://github.com/codepo8/slide-show |
Цитата:
let counter = slideshow.media.length-1; Убрать (закоментарить) строку 59 // localStorage.setItem(hash,counter); |
Цитата:
Все работает, но на первом кадре (теперь уже последнем) нету кнопки автоплэй, хотя по пробелу он запускается, а также на первом кадре нет самой кнопки вправо, хотя опять же по стрелке на клавиатуре работает, как я понимаю скрипт думает что это последние кадры и просто не выводит эти кнопки |
Цитата:
строки 45-56
/* 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');
}*/
То все кнопки будут всегда |
Цитата:
|
Всем доброго времени суток!
А еще поможете? Нужно чтобы этот скрипт сканировал только определенную папку с изображениями и запускал слайд-шоу |
| Часовой пояс GMT +3, время: 05:53. |