Добры день
вот задача снизу
Я просто не совсем пойму как при нажатие на текст, получить обновления картинки (загрузка новой) то есть, меня не должно кинуть на другую страницу, а надо обновить уже загруженную при этом, перегрузить с сервера картинку. другими словами мне не понятно как грузить картинки, с оформлением проблем нету а вот с загрузкой новых картинок совсем плохо.
Также я понимаю что надо как то передавать информацию о том какая картинка загружена сейчас
To complete this stage you need to modify the files (main1.php, style1.css, definitions1.php) so that the user can browse through the entire collection of images by clicking on NEXT/PREVIOUS links. When the application starts the first image P71.JPG is displayed. Clicking on NEXT will display P72.JPG and clicking again, P73.JPG, and so on. The last one to be displayed is P76.JPG. (Other images are not needed for this stage.) Note that the NEXT link should not be displayed when the last image (here P76.JPG) is on display. Similarly, when the very first image is displayed PREVIOUS link should not be provided.
Some images will have descriptions provided in assign1_data/txt. Note that the file name matches the image name. If the description is there it should be used as caption otherwise the caption should read "No description".
main1.php must effectively use each of the three variables set in definitions1.php. Modify paths as needed.
Modify style so that the display looks like this picture shows. You may modify the provided style1.css and/or use some internal/inline style, if convenient.
вот 3 файла
// main.php
<?php
require("definitions1.php");
$id = 71;
$last = 76;
$first = 71;
$file = "../../assign1_data_stage1/jpg/P71.JPG";
$caption = "No description";
echo "<html><head>";
echo "<title>Flowers Gallery</title>";
echo "</head><body>";
echo "<h1>Spring Flowers Gallery</h1>";
echo "<p><img src=\"$file\"></p>";
echo "</body></html>";
?>
// definition.php
<?php
$jpgdir = "ass1_data_stag1/jpg/";
$descdir ="ass1_data_stage1/txt/";
$self = $_SERVER['PHP_SELF'];
?>
// style.css
html {
font-family: serif;
font-style: normal;
font-variant: normal;
}
на данном этапе должно выгледить так сверху картика снизу под ней NEXT/PREVIOUS но на примере слова не вызлядят как гипер текст тоесть подчеркнутые, выглядят как простой текст
Hello, MrGreen, you write:
MG> Добры день
MG> вот задача снизу
MG> Я просто не совсем пойму как при нажатие на текст, получить обновления картинки (загрузка новой) то есть, меня не должно кинуть на другую страницу, а надо обновить уже загруженную при этом, перегрузить с сервера картинку. другими словами мне не понятно как грузить картинки, с оформлением проблем нету а вот с загрузкой новых картинок совсем плохо.
MG> Также я понимаю что надо как то передавать информацию о том какая картинка загружена сейчас
Не знаю, что за код приведен ниже и откуда он взят.
Для того, чтобы менять что-либо на странице не перезагружая страницу, нам нужен Ajax (моно почитать пусть и слегка устаревшую, но
статью по jQueryАвтор(ы): Dmitrii 'Mamut' Dimandt
Дата: 11.04.2002
В статье описана библиотека jQuery. Разобраны ключевые моменты работы с библиотекой — нахождение элементов на странице, манипуляция объектной моделью документа, базовая анимация, работа с технологией AJAX. В статье приведено большое количество примеров работающего кода.
)
Общая ситуация получается так:
1. Получаем с сервера данные: {id: id_изображения, src: путь_к_изображению}
2. Изображению на странице меняем src на src, пришедший с сервера
3. При щелчке отсылаем на сервер запрос с id=id_изображения. Переходим в пункт 1
HTML:
<script>
// на jQuery
var current_id = 0;
$(document).ready(function(){
$('#img').click(function(){
$.get(
'/get/new/image.php',
{id: current_id},
function(resp) {
current_id = resp.id;
$('#img').attr('src', resp.src);
}
)
});
});
</script>
<img src="" id="img" />
PHP:
$id = $_REQUEST['id'];
$new_id = // получаем новый id
$src = // получаем новый src
echo "{id: $new_id, src: $src}";
Здравствуйте, Mamut, Вы писали:
спасибо конечно большое что откликнулись на призыв о помощи
наверно я не совсем внятно объяснил ситуацию, решение задачи должно базироваться на выложенный код
конечно я попробую разобраться с тем решением которое Вы предложили
и обязательно прочту статью
спасибо еще раз
Здравствуйте, Mamut, Вы писали:
можно вот тут по подробней?
я вроде в теории понимаю как должно работать а на практике
может у вас есть возможность набросать пример
M>PHP:
M>
M>$id = $_REQUEST['id'];
M>$new_id = // получаем новый id
M>$src = // получаем новый src
M>echo "{id: $new_id, src: $src}";
M>
Hello, MrGreen, you write:
MG> Здравствуйте, Mamut, Вы писали:
MG> можно вот тут по подробней?
MG> я вроде в теории понимаю как должно работать а на практике
MG> может у вас есть возможность набросать пример
MG> M>PHP:
MG> M>
MG> M>$id = $_REQUEST['id'];
MG> M>$new_id = // получаем новый id
MG> M>$src = // получаем новый src
MG> M>echo "{id: $new_id, src: $src}";
MG> M>
Ajax-запрос ничем не отлиается от обыкновенного запроса из браузера. То есть:
$.get(
'/get_photo.php',
{id: 10}
);
это ак если бы в адресной строке браузера мы набрали
http://server/get_photo.php?id=10 и нажали ввод.
Соответственно, на стороне сервера в фале get_photo.php мы можем полусить параметр id в $_REQUEST или $_GET.
Обратно мы должны вернуть новый id картинки и ее путь.
// получаем запрос с браузера:
$current_id = $_REQUEST['id'];
// предположим, что мы отдаем фоторафии наугад
$sql = 'SELECT id, path FROM photos WHERE id <> '
.mysql_real_escape_string($id).' ORDER BY RAND() LIMIT 1,1';
$result = mysql_query($sql);
$row = mysql_fetch_row_assoc($result);
// если бы мы генерировали html-страницу
// мы бы отдавали что-то типа
// <html><body>
// <img src="<?php echo $path; ?>" />
// </body></html>
//
// но нам нужно отдать JSON, из которого
// JS-библиотека в браузере выдерет id и путь
// к картинке
//
// В нашем случае JSON будет выглядеть так:
// {id: 10, src: '/path/to/img'}
//
// Вообще, JSON — это просто Javascript,
// http://www.json.org/
echo '{id: '.$row['id'].', src: '.$row['path'].'}';
