Несколько слайд-шоу всех изображений из папки на одной странице

[Admin]

К теме Слайд-шоу всех изображений из папки поступил комментарий с вопросом о том, как запустить несколько скриптов слайд-шоу на одной страничке.

Как я уже писал в комментариях, все зависит от того, чем должны отличаться эти слайд-шоу (папки с файлами, интервалы смены и т.д.).

Так вот, для того чтобы папки с картинками были разными и интервал смены тоже разные, придется добавить еще один JavaScript код, в котором и будут прописаны новые папки с изображениями и интервалы смены изображений.

Рассмотрим пример создания двух слайд-шоу на одной страничке. В любом случае, библиотеку jQuery загружаем только один раз.

В том месте, где будет расположено наше первое слайд-шоу, добавляем код:

Код:

<img src="image/time/colon.gif" alt="" id="slide_show">

Для второго слайд-шоу, добавляем свой код:

Код:

<img src="image/time/colon.gif" alt="" id="slide_show_2">

А дальше идет JavaScript код, состоящий из двух, практически одинаковых частей. Отличия заключаются в именах переменных JavaScript кода, папках с картинками и интервалах смены картинок:

Код:

<script type="text/javascript">
<?php
$images = array();
$folder = 'image/river/';
$array_to_js='var imgs=[';
$all_files = scandir($folder);
for ($i=2; $i<=sizeof($all_files)-1; $i++) { $array_to_js.='"'.$folder.$all_files[$i].'",'; }
echo substr($array_to_js,0,-1).'];';
?>

var n = 0;
var time = 800;
play  =setInterval("chgImg()", 3000);

function chgImg() {
$('#slide_show').fadeOut(time, function() {
  $(this).attr('src', imgs[n]).fadeIn(time);
});

n++;
if (n>=imgs.length) n = 0;
}

<?php
$images = array();
$folder = 'image/mount/';
$array_to_js = 'var imgs_2=[';
$all_files = scandir($folder);
for ($i=2; $i<=sizeof($all_files)-1; $i++) { $array_to_js.='"'.$folder.$all_files[$i].'",'; }
echo substr($array_to_js,0,-1).'];';
?>

var n = 0;
var time = 900;
play = setInterval("chgImg_2()", 4000);

function chgImg_2() {
$('#slide_show_2').fadeOut(time, function() {
  $(this).attr('src', imgs_2[n]).fadeIn(time);
});

n++;
if (n>=imgs_2.length) n = 0;
}
</script>

Для трех и более слайд-шоу придется еще раз добавить JavaScript код, в котором также изменить имена переменных и т.д.

[Sergey1917]

Спасибо! Только вот у меня и одно запустить не получилось. Первую картинку показывает, а папку для сканирования не находит.

[Admin]

В нашем скрипта подразумевается, что файл со скриптом и папка с картинками лежат в одной папке.

Попробуйте указать $folder = './image/'; это будет означать, что независимо от того, где запущен скрипт, он будет сканировать папку image в корне сайта.

А еще гляньте исходный код странички и посмотрите что у Вас написано в строке, начинающейся с var imgs = [".

[Sergey1917]

...посмотрите что у Вас написано в строке, начинающейся с var imgs = [".

Вот так с точкой:
var imgs = ["./image/time/01.gif","./image/time/02.gif","./image/time/03.gif","./image/time/04.gif","./image/time/05.gif"];
А так, без точки:
var imgs = ];

В первом варианте просматривается какое-то движение - показывается и исчезает первая картинка и мелькает значение из атрибута "alt". Во втором - статичное изображение первой картинки. Менял картинки gif на jpg, все по-прежнему.

[Admin]

Ну, с папки имена файлов скрипт берет правильно...

Похоже опять проблемы у Вас в движке, т.к. в виде отдельной странички данный скрипт работает (специально прицепил файл - slideshow-from-folder.rar).

[Sergey1917]

У меня не хочет работать.

[Admin]

(13.05.2013 01:42:49)Sergey1917 писал(а):  У меня не хочет работать.

Прикрепленный файл тоже?
Да не может такого быть. Проверял и в IE и в Опере, все норм. Там ломаться то нечему. Скопируйте мне исходный код Вашей страницы, и я попытаюсь найти ошибку.

[Sergey1917]

Я уже писал, что первая картинка показывается и исчезает. Потом начинает мелькать сообщение из тега "alt". Вроде как изображения меняются, но не показываются.
На странице: <img src="/image/time/01.gif" - без точки, если с точкой, то первое изображение не появляется.

В PHP файле: $folder = './image/time/'; - с точкой, а если ставлю без точки, то появляется сообщение об системной ошибке скрипта, связанное со сканированием директории.

Эти же файлы через другое слайд-шоу выводятся. Даже и не знаю, чем вам исходник поможет. Там файлы видятся.

---

Вставил в тестовую страницу - не работает. Анонс этой страницы выводится на главную и слайд-шоу как раз попадает в анонс. Так вот, в анонсе слайд-шоу показывается.

[Admin]

В Вашем файле раскомментировал строчку:

Код:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

и у меня заработало.

[Sergey1917]

Работает, если в шаблоне главной стоит. Думаю в блоке на главной поставить и все будет нормально. Очень удобно тем, что легко добавлять новые картинки. Закинул в каталог и все, ничего править больше не надо. Очень удобно для частой смены. Спасибо!