Ladowanie obrazka do tresci strony po kliknieciu w odnosnik

Question

Witam, 

Mam taki oto problem:

Na mojej stronie głównej prezentuję listę swoich prac w formie bloga, chciałbym aby po kliknięciu w którąś z prac, skrypt przechodził na nową stronę (lub podmieniał treść obecnej) na której było by więcej informacji o danej pracy, większy obrazek itp. 

Problem w tym, że nie do końca wiem jak to rozwiązać, oto mój kod:

<div id="page">
<?php

$rezultat = mysql_query("SELECT * FROM  `article` WHERE kolejnosc >= 1 ORDER BY kolejnosc DESC");
$ile = mysql_num_rows($rezultat);

for ($i = 0; $i < $ile; $i++) 
	{
		
		$row = mysql_fetch_assoc($rezultat);
		$id = $row['id'];
		$nazwa = $row['nazwa'];
		$data = $row['data'];
		$obraz = $row['obraz'];
		$kategoria = $row['kategoria'];
		$opis = $row['opis'];
		$tagi = $row['tagi'];	
		
echo<<<END
<article>
<h2>$nazwa</h2>
<img src="works/$obraz.jpg" alt="$nazwa"  />
<h4>$kategoria</h4>
<h4>$opis</h4>
		</article>
END;
			
	}
		?>
		</div>	

Myślałem o tym aby przekazać dane id przez metodę post/get na nową stronę i tam po id wygenerować odpowiednią treść. Zależy mi na tym aby nie robić dla każdego wpisu nowej strony, tylko aby tresc generowala się automatycznie. Niestety nie do końca wiem jak się do tego zabrać

 

Ktoś ma jakiś pomysł i zechce pomóc?

Answer 1

https://api.jquery.com/jquery.get/

Możesz zrobić to po stronie JavaScript z użyciem AJAX. Dla określonych elementów (np. DIV) napisz skrypty pobierające dane o treści jaką chcesz tam wstawić. Czyli: AJAX dopisze lub podmieni w danym elemencie HTML jego dotychczasową zawartość, na zawartość np. z innego pliku HTML lub z bazy danych. Pomocne mogą okazać się EventListenery, czyli metody które będą reagować na określone zdarzenia (np. kliknięcia) wywołując AJAXa, a ten rozszerzy dany element o jakąś treść.

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Ogólnie, to co chcesz uzyskać - czyli dynamiczne dodawanie treści lub ich podmiana - możesz uzyskać budując Single Page Application. jest to metodyka budowania stron, której poszczególne podstrony i treści ładują się (czy też dodają) bez odświeżania całej strony. Realizowane jest to poprzez AJAX, chociaż może istnieją inne metody.

http://tutorialzine.com/2015/02/single-page-app-without-a-framework/

P.S. Założyłeś temat w złym dziale.