Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » jQuery » Как организовать вывод картинок после выбора его номера ajax?

Как организовать вывод картинок после выбора его номера ajax?


     12.10.2018    jQuery, Общие вопросы по PHP, Хаки    980

вопрос
Всем доброго! Подскажите пожалуйста как реализовать вывод таблицы с номерами картинок, после нажатия на номер будет выводится картинка (к примеру ниже). Если будет выбран новый номер, то старая заменяется на новую. Желательно чтобы картинки загружались из папки на сайте. Может кто знает готовый php код.

Пример вывода:

Ответа пока нет


6 комментариев

Flash
Эксперт

Flash - 12 октября 2018 22:21 -

А зачем ajax? Код взят из сети, хотя можно конечно и упростить.

<script type="text/javascript">
function changeImg(image){
  var imghol = document.getElementById("imageHolder");
  imghol.src = image;
}
</script>

    <div>
        <ul>
            <li><a href="javascript:" onclick="changeImg('/uploads/images/one.jpg');">1</a></li>
            <li><a href="javascript:" onclick="changeImg('/uploads/images/two.jpg')">2</a></li>
            <li><a href="javascript:" onclick="changeImg('/uploads/images/three.jpg')">3</a></li>
        </ul>
    </div>
    <div class="imageholder"><img id="imageHolder" /></div>

MAXIM23
Юзер

MAXIM23 - 13 октября 2018 09:51 -

Практически подходит. А не знаешь как сделать, чтобы внизу ещё помимо картинки выводился и выбранный номер?К примеру выбирается номер 3, внизу пишется Выбран номер 3 и картинка. Как-то передать переменную выбранного номера.

Flash
Эксперт

Flash - 13 октября 2018 10:29 -

MAXIM23, выбранные номера совпадают с названиями картинок? Например, клик по номеру "3" и должна показаться картинка - 3.jpg, так?

MAXIM23
Юзер

MAXIM23 - 13 октября 2018 12:42 -

Не обязательно. Просто адреса будут картинок, они может быть и на радикал залиты.

Flash
Эксперт

Flash - 13 октября 2018 18:21 -

Можно так

<script type="text/javascript">
function changeImg(image, number){
  var imghol = document.getElementById("imageHolder");
  imghol.src = image;
  var numberbox = document.getElementById("number_box");
  numberbox.innerHTML = "Выбран номер " + number;
}
</script>

<div>
	<ul>
		<li><a href="javascript:" onclick="changeImg('/uploads/images/one.jpg', 1);">1</a></li>
		<li><a href="javascript:" onclick="changeImg('/uploads/images/two.jpg', 2)">2</a></li>
		<li><a href="javascript:" onclick="changeImg('/uploads/images/three.jpg', 3)">3</a></li>
	</ul>
</div>
<div class="imageholder"><img id="imageHolder" /></div>
<div id="number_box"></div>

MAXIM23
Юзер

MAXIM23 - 13 октября 2018 21:33 -

Спасибо, попробую!

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх