Javascript-форум - Смена изображений по клику

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Смена изображений по клику (https://javascript.ru/forum/dom-window/43030-smena-izobrazhenijj-po-kliku.html)

Смена изображений по клику

Доброго времени суток.

Имеется php цикл вывода картинок

include ("config.php");

$nid=20;///к примеру

$photo = mysql_query ("SELECT * FROM files WHERE newsid='$nid' "); 
while($wphoto=mysql_fetch_array($photo))      {

echo 'files/'.$wphoto['filename'].' - '.$wphoto['id'].'</br>';

$a="'files/".$wphoto['filename']."'";

}

Результат примерно такой:

Код:

files/a103bfba945f183f374f7e3f3b610e42.jpg - 25

files/3c120e910a296ebd276d7800aca473ec.jpg - 26

files/5f57980c4a7f6665d7d140bfe78842a7.jpg - 27

files/e0570a3768d1aa4345cc2837854c77f6.jpg - 32

как видно id может идти не по порядку, поэтому id++ не подходит

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

как я понял нужно как-то этот массив передать поочередно в яваскрипт, возможно нужно использовать JSON? объясните хотябы принцип как это можно сделать,

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

<script type="text/javascript">

function l_image (a, id) 
{

document.getElementById(id).src=a
} 
</script>

А вот так вызываем скрипт(изображений несколько, поэтому ссыки разные)

<a href="javascript:l_image('.$a.', '.$nid.')"; "><img src="files/preview/'.$wphoto['filename'].'" height="11%" ></a>

Цитата:

Сообщение от Alexey922

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

Как вариант, запиши все пути в массив и работай потом с этим массивом...

include ("config.php");

$nid=20;///к примеру

$photo = mysql_query ("SELECT * FROM files WHERE newsid='$nid' "); 

$result = '[';
while($wphoto=mysql_fetch_array($photo))
$result .= '{"file":"files/'.$wphoto['filename'].'","id":"'.$wphoto['id'].'"},';

echo rtrim($result,',') . ']';

Получился массив

[{"file":"files/a103bfba945f183f374f7e3f3b610e42","id":"25 "},
{"file":"files/3c120e910a296ebd276d7800aca473ec","id":"26 "},
{"file":"files/5f57980c4a7f6665d7d140bfe78842a7","id":"27 "},
{"file":"files/88667d6ae45d34c5e46ae6c532eae773","id":"32 "},]

А что с ним делать дальше? Признаюсь я в яваскрипте слаб, но что-то мне подсказывает что нужно использовать цикл for, или я ошибаюсь?

Цитата:

Сообщение от Alexey922

что-то мне подсказывает что нужно использовать цикл for, или я ошибаюсь?

Ошибаешся. :)

Цитата:

Сообщение от Alexey922

нужно сделать так чтобы выводилась первая, а при нажатии на нее следующая, следующая, и так далее по кругу

Какой же тут цикл? :)
Просто некие действия при срабатывании события...

Цитата:

Сообщение от Alexey922

А что с ним делать дальше?

Первый УРЛ пусть использует ПХП - создает картинку. Как вариант, той картинке дать атрибут с порядковым номером той картинки - 0.
Далее навесить событие click(), по которому:
- читать тот номер
- увеличивать на 1
- если больше длины массива - приравнивать к 0
- брать следующий УРЛ из массива
- менять атрибуты (или свойства) у картинки