Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Вывод изображений из папки

Автор: ArtemG 26.3.2007, 09:13

Помогите пожалуйста написать следующее
нужно чтобы картинки из папки появлялись на html страничке
хочеться для народа сделать типа базы по скринам к примерна 300 играм...
работать сее чудо должно в оффлайне поэтому как я понимаю оно должно быть написано на JavaScript а не на PHP
сам я в WEB програмировании профан и мне не справиться с этой задачей
поэтому прошу помощи
сейчас код в html выглядит вот так...

<html>

<head>
<title> Скриншоты к играм </title>
</head>

<body background="other/background_winter.gif">

<table width=98% border=0 cellspacing=0 cellpadding=0>
<td>
<font color="Black" style="font-size: 28pt">
<b>300 March To Glory</b>
</font></td>
</table>

<table width=100% border=0 cellspacing=1 cellpadding=4>
<tr bgcolor=Blue nowrap align=center>
<td width=20%></td>
<td width=20%></td>
<td width=20%></td>
<td width=20%></td>
<td width=20%></td>
</table>

<TABLE><tr><td align=left>

<img src="screenshoots\300 March To Glory\snap000.jpg">
<img src="screenshoots\300 March To Glory\snap001.jpg">
<img src="screenshoots\300 March To Glory\snap002.jpg">
<img src="screenshoots\300 March To Glory\snap003.jpg">

</td></tr></TABLE>

<table width=100% border=0 cellspacing=1 cellpadding=4>
<tr bgcolor=Blue nowrap align=center>
<td width=20%></td>
<td width=20%></td>
<td width=20%></td>
<td width=20%></td>
<td width=20%></td>
</table>

</html>

Автор: ArtemG 26.3.2007, 10:44

пожалуйста хоть какие нибудь наводки... на JAvaScript
Есть пример на PHP но на народе.ру он не пройдет....

<?php
if ($handle = opendir('/screenshoots/300 March To Glory')) {
echo "Directory handle: $handle\n";
echo "Files:\n";

while (false !== ($file = readdir($handle))) {
echo "$file\n";
}

closedir($handle);
}
?>

Автор: 12345c 26.3.2007, 12:06

Надо, чтобы картинки предзагрузились, а потом можно было отключать от сети и смотреть их по выбору (не закрывая страницу)?

Сколько картинок и как надо, чтобы они появлялись: по нажатию на кнопки, по нажатию "Далее"?

Для начала, есть такой пример. Вторая часть будет после предзагрузки (нажать >>Сделать предзагрузку<<) работать в оффлайне. http://js2.ru/example/JsPrimeryCode-67.htm

Автор: ArtemG 26.3.2007, 12:28

Первый мой код четко показывает что нужно....
Просто вывести на html ну скажем 10 или 20 а может 30 картинок из папки

что в нем не устраивает??
будет 300 папок и число их будет расти... в каждой примерно в начале по 10 фоток и число их будет расти...

прописывать вот это

<img src="screenshoots\300 March To Glory\snap000.jpg">
<img src="screenshoots\300 March To Glory\snap001.jpg">
<img src="screenshoots\300 March To Glory\snap002.jpg">
<img src="screenshoots\300 March To Glory\snap003.jpg">

сами понимаете....

прошу помощи средствами JavaScript

Автор: lazabt 26.3.2007, 15:36

Например, можно сделать что-то типа этого...

1. В JS-структуре продублировать структуру папок/файлов.

Код


var rootFolder = "screenshots";
var files = {
  "300 Margch To Glory": [
     "snap000.jpg",
     "snap001.jpg",
     ...
   ],
   "folder2": [
     "file1.jpg",
     "file2.jpg",
      ...
   ],
   ...
};

JS-структуру можно конечно прописать руками или генерить каким-нибудь windows-приложением. На JavaScript тебе это сделать не удастся...

Или же другой вариант: если все имена файлов/папок подчиняются какому-либо одному правилу, то и хранить их в js-структуре не нужно. Например, имена могут задаваться по шаблону: folderXXX/fileYYY.jpg

Для определенности возьмем вариант с хранением имен в js-структуре (объект files).

2. Тогда вывод изображений на экран может выглядеть так:

Код



var tbl = document.getElementById("tbl");
var tr;
var colCount = 5;  // кол-во столбцов таблицы
var col = 0;

for (var folder in files) {
  for (var i = 0; i < files[folder]; i++) {
    // создаем изображение
    var img = new Image();
    img.src = rootFolder + "\\" + folder + "\\" + files[i];

    // создаем строку таблицы
    if (col == 0) {
      tr = document.createElement("TR"):
      tbl.appendChild(tr);
    }
    // создаем ячейку таблицы, запихиваем в нее картинку и добавляем ячейку к строке
    var td = document.createElement("TD");
    td.appendChild(img);
    tr.appendChild(td);
    col++;
    if (col >= colCount)
      col = 0;
  }
}

где tbl - пустая html-таблица

Код


<table id="tbl">
</table>

В общем, решений у задачи множество.
Основных проблем две:
1. Как задавать список изображений (автоматически через js получить их невозможно).
2. Как эти изображения выводить.

Вообще существуют всякие проги, которые генерят "фотоальбом" (кучу html-ей) по папкам и файлам в них...

Автор: ArtemG 26.3.2007, 20:36

вот то чего я хочу добиться.... http://home.tula.net/pspgame/games/platypos.html
а за код прибольшое спасибо обязательно сейчас опробую