<!-- begin snippet: js hide: false console: true babel: false -->
2° img.php
<!DOCTYPE html>
<html>
<head>
<title>img</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width-device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="./style.css"/>
<link rel="stylesheet" type="text/css" href="https//fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
<style type="text/css">
img{height: 300px;width: 400px;}
</style>
<script>
window.onload=function(){
var img=document.createElement('img');
var info=JSON.parse(window.localStorage['imginfo']);
delete window.localStorage['imginfo'];
img.src=info.src;
img.id=info.id;
document.body.appendChild(img);
}
</script>
</head>
<body>
</body>
</html>
У меня есть изображения в одной таблице моей базы данных, поэтому я уже разместил их на одной странице, я хочу просто отображать каждое из них на другой странице после щелкнув по нему!
Я пробовал этот код ниже, но он работает только для одного изображения (первого среди всех остальных).
Код для двух страниц (я назвал одну домашнюю. php конец другого изображения. php), а затем у каждой из них есть свой код.
1 ° Home. php
<?php
$bdd = new PDO('mysql:host=127.0.0.1;dbname=imagetest', 'root', '');
?>
<html>
<head>
<title>thumbs</title>
</head>
<body>
<div >
<?php
$req = $bdd->query("SELECT * FROM images ORDER BY idimage DESC ");
while ($donnees = $req->fetch()):
?>
<div id="thumbs"><?php echo ('<img style="width:180px;height:180px;margin-left:40%;" src = "'.$donnees['lien'].'">');?> </div>
<script>
(function(W){
function init(){
W.document.getElementById('thumbs').addEventListener('click',sendimg,false);
}
function sendimg(e){
var a=e.target;
if(a.parentNode.id=='thumbs'){
W.localStorage['imginfo']=JSON.stringify({src:a.src,id:a.id});
W.location.href="img.php";
}
}
W.addEventListener('load',init,false)
})(window)
</script>
<?php endwhile; ?>
</div>
<body>
</body>
</html>