Как создать слайдшоу на jquery с чтением каталога изображений

@qw17 · Регистрация: 06.05.2012

Студворк — интернет-сервис помощи студентам

Здравствуйте!
У меня есть небольшое слайд шоу на сайте, и все изображения прописаны именно внутри кода вот так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(function() {
  $('#test1').crossSlide({
    speed: 45, //in px/sec
    fade: 1    //in sec
  }, [
    { src: 'images/sand-castle.jpeg', dir: 'up'   },
    { src: 'images/sunflower.jpeg',   dir: 'down' },
    { src: 'images/flip-flops.jpeg',  dir: 'up'   },
    { src: 'images/rubber-ring.jpeg', dir: 'down' }
  ]);
});

а как сделать чтение из каталога images. То есть, чтобы можно было загрузить все картинки в папку / images / а они автоматически попали в скрипт и отобразились на сайте. Уже голова кипит, никак не могу это сделать. Помогите, пожалуйста, решить эту головоломку.

@Daredevi1 · 06.05.2012, 22:18

На чистом js такого не сделаешь. Нужен еще какой-нибудь серверный язык. Я бы сделал так: сначала отправляешь ajax-запрос к серверному скрипту, который возвращает массив адресов картинок нужного каталога, ну а дальше инитишь свою галерею с этим массивом и все.

@qw17 · 07.05.2012, 07:49 **[ТС]**

А вы не подскажете как это сделать. Как совместить php и js?
Например у меня есть скрипт который производит чтение из каталога, он находится в файле img.php, а как вставить массив который он выводит внутрь js?
Чтобы получилось примерно так

JavaScript
1
2
3
4
5
6
7
8
9
10
$(function() {
  $('#test1').crossSlide({
    speed: 45, //in px/sec
    fade: 1    //in sec
  }, [
    
Здесь вывод массива из php
 
  ]);
});

Или может у кого есть пример реализации, чтобы посмотреть как говорится в живую? Буду очень благодарен.

@Daredevi1 · 07.05.2012, 13:03

Допустим пхп выдает нам такой json:

PHP
1
echo '["image1.png", "image2.png", "image3.png", "image4.png"]';

Тогда инитим слайдшоу так.

JavaScript
1
2
3
4
5
6
7
8
$(function() {
  $.getJSON('images.php', function(data){
    $('#test1').crossSlide({
      speed: 45, //in px/sec
      fade: 1    //in sec
    }, data);
  });
});

@qw17 · 07.05.2012, 16:55 **[ТС]**

Почему-то не работает, может я что-то неправильно делаю. У меня получилось вот так. В корне сайта есть папка img с изображениями, и в этой папке есть файл a.php, который выводит изображения. Вот его код

PHP
1
2
3
4
5
6
7
8
9
10
11
<?
  $dir = opendir (".");
  while ( $file = readdir ($dir))
  {
    if (( $file != ".") && ($file != "..") && ($file != "a.php"))
    {
        echo "$file<br>";
    }
  }
  closedir ($dir);
?>

В главном шаблоне движка пишу код

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src='js/jquery.js' type='text/javascript'></script>
<script src='js/jquery.cross-slide.js' type='text/javascript'></script>
<script>jQuery.noConflict();</script>
<script>
 
<script type='text/javascript'>
$(function() {
  $.getJSON('img/a.php', function(data){
    $('#test1').crossSlide({
      speed: 45, //in px/sec
      fade: 1    //in sec
    }, data);
  });
});
</script>

А в месте где необходимо вывести картинки вставляю
<div id='test1'></div>
В итоге картинки не выводятся в нужном месте. Что делать? Какая у меня ошибка?

@Daredevi1 · 07.05.2012, 19:55

PHP
1
2
3
4
5
6
7
8
9
10
11
12
$path = 'images';
$d = dir($path);
if ($d) {
    $files = array();
    while (false !== ($name = $d->read())) {
        if ($name === '.' || $name === '..') continue;
        $fullName = $path . "/" . $name;
        if (is_file($fullName)) $files[] = $name;
    }
    $d->close();
    echo '["'.implode('","', $files).'"]';
}

@qw17 · 07.05.2012, 23:20 **[ТС]**

Спасибо, почти получилось вывести картинки из каталога, только одна незадача скрипт просит ссылки вида

JavaScript
1
{ src: 'images/img1.jpeg', dir: 'up'   },

А на выходе из php получается

JavaScript
1
["img1.jpg","img2.jpg","img3.jpg"]

Помогите прописать недостающие элементы

JavaScript
1
2
3
{ src: "img1.jpg", dir: 'up' }
{ src: "img2.jpg", dir: 'up' }
{ src: "img3.jpg", dir: 'up' }

Я уже запутался в коде...

Добавлено через 41 минуту
Cам сообразил, получилось вот так

PHP
1
echo '[ { src: "images/'.implode('", dir: "up"},{ src: "images/', $files).'", dir: "up"}]';

Daredevi1, спасибо, вам большое за помощь.

09.05.2012, 20:23

А как сделать чтобы этот код

PHP
1
2
3
4
5
6
7
8
9
10
11
12
$path = 'images';
$d = dir($path);
if ($d) {
    $files = array();
    while (false !== ($name = $d->read())) {
        if ($name === '.' || $name === '..') continue;
        $fullName = $path . "/" . $name;
        if (is_file($fullName)) $files[] = $name;
    }
    $d->close();
    echo '["'.implode('","', $files).'"]';
}

выводил не просто список картинок, а выводил картинки в случайном порядке?

@Daredevi1 · 09.05.2012, 21:18

Сообщение от Владимир81

а выводил картинки в случайном порядке?

Перед echo добавьте

PHP
1
shuffle($files);

@borovik · 09.05.2012, 21:18

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
$path = 'images';
$d = dir($path);
if ($d) {
    $files = array();
    while (false !== ($name = $d->read())) {
        if ($name === '.' || $name === '..') continue;
        $fullName = $path . "/" . $name;
        if (is_file($fullName)) $files[] = $name;
    }
    $d->close();
    shuffle($files);
    echo '["'.implode('","', $files).'"]';
}

каждый раз будет выводить разные картинки

//блин в одно время добавили ) пс. кстати я твой поклонник в jq

09.05.2012, 21:29

Спасибо, все оказалось так просто.

@Milky_Way · 13.05.2012, 01:28

Доброго времени суток. Проблема точно такая же,только хочу грузить картинки из папки не в слайд шоу,а в div со списком так,чтоб каждое изображение было отдельным элементом списка,не подскажите,как это сделать?

Галерея представляет из себя вот такое :

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="panel_left" onclick="ldivclc();"> 
    <div id="gallery">
        <ul>
            <li><a href="photos/image1.jpg"><img src="photos/thumb_image1.jpg" width="72" height="72" alt="" /></a></li>
            <li><a href="photos/image2.jpg"><img src="photos/thumb_image2.jpg" width="72" height="72" alt="" /></a></li>        
            <li><a href="photos/image3.jpg"><img src="photos/thumb_image3.jpg" width="72" height="72" alt="" /></a></li>        
            <li><a href="photos/image4.jpg"><img src="photos/thumb_image4.jpg" width="72" height="72" alt="" /></a></li>       
            <li><a href="photos/image5.jpg"><img src="photos/thumb_image5.jpg" width="72" height="72" alt="" /></a></li>      
        </ul>
    </div>
</div>

в пхп скрипте только подставил путь до своей папки,где хранится пхп страница,т.е

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
$path = 'D:/site/Portfolio/img';
$d = dir($path);
if ($d) {
    $files = array();
    while (false !== ($name = $d->read())) {
        if ($name === '.' || $name === '..') continue;
        $fullName = $path . "/" . $name;
        if (is_file($fullName)) $files[] = $name;
    }
    $d->close();
    echo '["'.implode('","', $files).'"]';
}
?>

а вот само тело скрипта никак не догоню как сделать

@DanteLoL · 28.08.2013, 23:05

ДОброго времени суток! задача у меня такая! написать Слайд Шоу (СШ) которое желательно не требует JQ и берет себе адреса изображений из БД. написал вот такой скрипт так как там может быть от 1го до 5 слайдов то скрипт в зависимости от количества взятых из БД строк выводит скрипт, но для начала первожу вот так переменные

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
var numphoto = "<? echo $num_rowphoto; ?>";
 
var photo1 = "<? echo $photo[0]; ?>";
if (numphoto>1) {
var photo2 = "<? echo $photo[1]; ?>";
}
if (numphoto>2) {
var photo3 = "<? echo $photo[2]; ?>";
}
if (numphoto>3) {
var photo4 = "<? echo $photo[3]; ?>";
}
if (numphoto>4) {
var photo5 = "<? echo $photo[4]; ?>";
}
</script>

Добавлено через 2 минуты
Далее выводит еще несколько строк скрипта с адресами картинок

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
var image1=new Image()
image1.src="photo1"
if (numphoto>1) {
var image2=new Image()
image2.src="photo2"
}
if (numphoto>2) {
var image3=new Image()
image3.src="photo3"
}
if (numphoto>3) {
var image4=new Image()
image4.src="photo4"
}
if (numphoto>3) {
var image5=new Image()
image5.src="photo5"
}
</script>

и само СШ

HTML5
1
<img src="<?php echo $photo[0]; ?>" name="slideshow" width=600 height=400>

ну и конечно обработчик

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
var step=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<numphoto)
step++
else
step=1
setTimeout("slideit()",3000)
}
slideit()
</script>

в итоге - 1я картинка отображается (в виду того что она видимо отражене через PHP) но дальше СШ ни как себя не ведет не листается никак и вобщем не работает - сразу предупреждаю сия идея скрипта пришла ко мне в 3 часа ночи и может сейчас показаться и мне самому полным бредом) помогите разобраться плииз или найти альтернативу!) зарание спасибо!

Добавлено через 6 часов 32 минуты
ух вся проблем начинается с того что вот тут

JavaScript
1
var numphoto = "<? echo $num_rowphoto; ?>";

и в подобных не переводятся переменные из PHP хотя этот способ перевода рекомендуют чуть ли не на каждом форуме ОО как быть тот?

Добавлено через 7 часов 55 минут
переделал вот так и переменные передаются!

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script language="javascript">
var numphoto = <?php echo $num_rowphoto; ?>;
 
var photo1 = '<?php echo $photo[0]; ?>';
 
 
if (numphoto>1) {
var photo2 = '<?php echo $photo[1]; ?>';
 
}
if (numphoto>2) {
var photo3 = '<? echo $photo[2]; ?>';
}
if (numphoto>3) {
var photo4 = '<? echo $photo[3]; ?>';
}
if (numphoto>4) {
var photo5 = '<? echo $photo[4]; ?>';
}
</script>

Добавлено через 42 секунды
этот момент теже пришлось так сделать для порядка

JavaScript
1
2
3
4
5
6
</script>
 
<img src="" id="firstphoto" name="slideshow">
 
<script type="text/javascript">
document.getElementById('firstphoto').src = photo1;

Новые блоги и статьи Все статьи Все блоги /
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

@Daredevi1 311 / 303 / 78 Регистрация: 09.05.2009 Сообщений: 723
	06.05.2012, 22:18
	На чистом js такого не сделаешь. Нужен еще какой-нибудь серверный язык. Я бы сделал так: сначала отправляешь ajax-запрос к серверному скрипту, который возвращает массив адресов картинок нужного каталога, ну а дальше инитишь свою галерею с этим массивом и все. 0

Владимир81
	09.05.2012, 21:29
	Спасибо, все оказалось так просто.