Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.02.2023, 09:16
Новичок на форуме
Отправить личное сообщение для lexmakh Посмотреть профиль Найти все сообщения от lexmakh
 
Регистрация: 14.02.2023
Сообщений: 9

Помогите модифицировать скрипт слайд-шоу
Доброго времени суток!
Есть скрипт слайд-шоу, который берет изображения из папки, в нем все работает отлично, помогите сделать так чтобы по умолчанию открывалось последнее изображение, а не первое.
И если можно было бы сделать переключение слайдов в обратном порядке и нормальном было бы вообще здорово)
Заранее всем благодарочка!

сам скрипт: (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"
}
Ответить с цитированием
  #2 (permalink)  
Старый 14.02.2023, 09:50
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,682

slideshow.media - это ведь массив?
У массивов есть метод reverse (arr.reverse()), который переставляет элементы массива в обратном порядке.
Можно его использовать.
Ответить с цитированием
  #3 (permalink)  
Старый 14.02.2023, 09:59
Новичок на форуме
Отправить личное сообщение для lexmakh Посмотреть профиль Найти все сообщения от lexmakh
 
Регистрация: 14.02.2023
Сообщений: 9

Сообщение от voraa Посмотреть сообщение
slideshow.media - это ведь массив?
У массивов есть метод reverse (arr.reverse()), который переставляет элементы массива в обратном порядке.
Можно его использовать.
Я мало что понимаю в ява скриптах
массив, а где использовать метод реверс? в функции показа?
function show() {
clearTimeout(timeout);
out.innerText = `${slideshow.media[counter]} ${counter+1}/${all}`;
или делать отдельную функцию?
Ответить с цитированием
  #4 (permalink)  
Старый 14.02.2023, 10:41
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,682

Если нужно просто начинать с последнего и идти к первому, то в стр 22
let counter = localStorage.getItem(hash)||0;
надо устанавливать на последний
let counter = localStorage.getItem(hash)||slideshow.media.length-1;

Ввести переменную direction = 1 если надо идти от начала к концу или -1 если от последнего к первому
и в стр 99
counter += direction;

Ну и менять direction, когда надо сменить направление при автоплее.
Это идеи
Писать за вас трудно, не имея возможности отлаживать.
Ответить с цитированием
  #5 (permalink)  
Старый 14.02.2023, 11:50
Новичок на форуме
Отправить личное сообщение для lexmakh Посмотреть профиль Найти все сообщения от lexmakh
 
Регистрация: 14.02.2023
Сообщений: 9

Сообщение от voraa Посмотреть сообщение
Если нужно просто начинать с последнего и идти к первому, то в стр 22
let counter = localStorage.getItem(hash)||0;
надо устанавливать на последний
let counter = localStorage.getItem(hash)||slideshow.media.length-1;

Ввести переменную direction = 1 если надо идти от начала к концу или -1 если от последнего к первому
и в стр 99
counter += direction;
Спасибо за ответ!
Сделал так, но все равно показывает с первого кадра, а не с последнего, хотя если промотать кадры вперед и включить автоплэй то листает назад, если бы получилось начинать с последнего мне бы этого хватило.
В скрипте еще есть некая история, т.е. он запоминает тот кадр который смотрел последним, мне бы убрать эту функцию вообще, т.к. картинки меняются.
Если что скрипт брал с гитхаба https://github.com/codepo8/slide-show
Ответить с цитированием
  #6 (permalink)  
Старый 14.02.2023, 12:43
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,682

Сообщение от lexmakh
В скрипте еще есть некая история, т.е. он запоминает тот кадр который смотрел последним, мне бы убрать эту функцию вообще, т.к. картинки меняются.
Строка 22
let counter = slideshow.media.length-1;

Убрать (закоментарить) строку 59
// localStorage.setItem(hash,counter);
Ответить с цитированием
  #7 (permalink)  
Старый 14.02.2023, 14:13
Новичок на форуме
Отправить личное сообщение для lexmakh Посмотреть профиль Найти все сообщения от lexmakh
 
Регистрация: 14.02.2023
Сообщений: 9

Сообщение от voraa Посмотреть сообщение
Строка 22
let counter = slideshow.media.length-1;

Убрать (закоментарить) строку 59
// localStorage.setItem(hash,counter);
Спасибо огромное!
Все работает, но на первом кадре (теперь уже последнем) нету кнопки автоплэй, хотя по пробелу он запускается, а также на первом кадре нет самой кнопки вправо, хотя опять же по стрелке на клавиатуре работает, как я понимаю скрипт думает что это последние кадры и просто не выводит эти кнопки
Ответить с цитированием
  #8 (permalink)  
Старый 14.02.2023, 17:04
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,682

Сообщение от lexmakh
Все работает, но на первом кадре (теперь уже последнем) нету кнопки автоплэй,
Не знаю, как вам нужно, но если закоментарить блок
строки 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');
    }*/

То все кнопки будут всегда
Ответить с цитированием
  #9 (permalink)  
Старый 14.02.2023, 18:24
Новичок на форуме
Отправить личное сообщение для lexmakh Посмотреть профиль Найти все сообщения от lexmakh
 
Регистрация: 14.02.2023
Сообщений: 9

Сообщение от voraa Посмотреть сообщение
То все кнопки будут всегда
именно так и нужно, спасибо огромное, человечище!
Ответить с цитированием
  #10 (permalink)  
Старый 14.12.2023, 11:42
Новичок на форуме
Отправить личное сообщение для lexmakh Посмотреть профиль Найти все сообщения от lexmakh
 
Регистрация: 14.02.2023
Сообщений: 9

Всем доброго времени суток!
А еще поможете?
Нужно чтобы этот скрипт сканировал только определенную папку с изображениями и запускал слайд-шоу
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите плз подправить скрипт rev27 Javascript под браузер 2 21.04.2014 04:27
Помогите поправить скрипт меню stsepelin Элементы интерфейса 2 30.01.2014 14:11
Помогите доработать скрипт Joannes Общие вопросы Javascript 0 08.09.2013 21:21
Помогите вставить скрипт на страницу alexsio Работа 7 22.04.2013 18:19
Скрипт if помогите пЕньку NeverLux Общие вопросы Javascript 1 06.01.2011 14:33