Как создать слайдшоу на 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;

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

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

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