нет стандартные не подходят, пробовал много разных.
у меня не очень стандартная задача) у меня 4 папки по 1.5к картинок, которые меняются каждую минуту, новая добавляется последняя удаляется.
есть у меня рабочий скрипт он сканирует от корня и выдает список url на эти папки с изображениями, а мне бы сделать чтобы я указал из какой именно папки брать изображения и запускать скрипт.
так же он из двух компонентов: бэк на PHP и сам скрипт, если бы его упросить и поместить в один файл, чтобы я его мог сделать модуль произвольного HTML кода, точнее 4 таких модуля для разных папок и средствами Joomla уже управлял бы доступом...
index.php
<!DOCTYPE html>
<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">
<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: '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
</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 = slideshow.media.length-1;
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 || 40;
let all = slideshow.media.length
let direction = -1;
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;
}
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 += direction;
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"
}
30.01.2024, 07:52:29