Fatal编程技术网

用php和javascript制作图库

javascript php

用php和javascript制作图库,javascript,php,Javascript,Php,我正在使用php填充缩略图库。当我点击拇指时，我运行了一个javascript函数，我想把我点击的照片放到一个名为viewer的div中。我不知道在我的函数中怎么说 这是我到目前为止所拥有的 <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style>img.thumb{height:100px; display:inline-bl

我正在使用php填充缩略图库。当我点击拇指时，我运行了一个javascript函数，我想把我点击的照片放到一个名为viewer的div中。我不知道在我的函数中怎么说

这是我到目前为止所拥有的

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>img.thumb{height:100px; display:inline-block;} .thumb{position:relative; display:inline-block;}</style>

<script type="text/javascript">
function showfull(){
    console.log("hello");
    document.getElementById("viewer").innerHTML = "<? echo '<img onclick="showfull();" id="'.$thispic.'" class="thumb" src = "../images/'.$pic.'"/><br/><h1 id="'.$thistitle.'" class="title">'.$maruja['pictitle'].'</h1><br/><h2 id="'.$thisdescript.'" class="description">'.$maruja['picdesc'].'</h2>'; ?>";
}
</script>

</head>
<body>
<?
//show categories in dropdown
$sql = $dbh->prepare("select * from 3304gallcats");
$sql->execute();
while ($carolyn  = $sql->fetch()){
     echo '<a href = "index.php?catid='.$carolyn['catid'].'">'.$carolyn['catname'].'</a><br/>';
}

$catid = $_GET['catid'];
$picsql = $dbh->prepare("select * from 3304gallpix where catid = '$catid'");
$picsql->execute();
while ($maruja  = $picsql->fetch()){
     $pic = $maruja['id'].'.jpg' ;
     $thispic = 'num'.$maruja['id'].'pic';
     $thistitle = 'num'.$maruja['id'].'title';
     $thisdescript = 'num'.$maruja['id'].'descript';
     echo '<img onclick="showfull();" id="'.$thispic.'" class="thumb" src = "../images/'.$pic.'"/><br/><h1 id="'.$thistitle.'" class="title">'.$maruja['pictitle'].'</h1><br/><h2 id="'.$thisdescript.'" class="description">'.$maruja['picdesc'].'</h2>';
     //echo '<img src = "./thumbnail.php?pic=../images/'.$pic.'&ht=100&wd=100"/><br/>'.$maruja['pictitle'].'<br/>'.$maruja['picdesc'];
}


?>
<div id="viewer"></div>

</body>


无标题文件
img.thumb{height:100px；display:inline block；}.thumb{position:relative；display:inline block；}
函数showfull（）{
console.log（“你好”）；
document.getElementById（“查看器”）.innerHTML=“”；
}

我不太清楚showfull（）函数的用途。。
我的建议是使用javascript（jquery）代码来显示最终图像。比方说
我们有一个缩略图部分和一个完整的图像部分：（把这个放在“头部”部分）



函数showfull（）{
$（#缩略图img”）。在（“单击”，函数（）上{
var单击_img=$（this.attr（“src”）；
$（“完整图像img”）.attr（“src”，单击img）；
});
//如您所见，不要依赖此javascript代码
//互联网上有很多缩略图插件，可以更好地实现这一点
}


将以下内容放在“正文”部分（根据需要自定义图像属性…）





。。。。使用php变量构建字符串，该字符串将在缩略图div中显示为html：


....
$html = '';
while($maruja = $picsql->fetch()) {
   // .... stuff ..
   $html .= '<img onclick="showfull();" src="your-source" etc........ />';
}



。。。。
$html=''；
而（$maruja=$picsql->fetch（））{
//……东西。。
$html.=''；
}


最后在查看器div中显示该变量


<div id="thumbnails"><?php echo $html; ?></div>






您的html将如下所示：


<div id="thumbnails">
   <img onclick="showfull();" src="your-source" etc........ />
   <img onclick="showfull();" src="your-source" etc........ />
   <img onclick="showfull();" src="your-source" etc........ />
   ....
</div>




....


当用户单击缩略图时，将调用showfull（）函数。
这就是全部。如果要使用代码，必须转义引号以避免js错误：


document.getElementById("viewer").innerHTML = "<img onclick=\"showfull();\" id=\"<?php echo $thispic; ?>\" class=\"thumb\" src=\"<?php echo '../images/' . $pic; ?>\" />";



document.getElementById（“查看器”）.innerHTML=“\”/>”；



我希望这有帮助……
我想我应该问的是，我的.innerHTML需要等于什么，才能显示我单击的图片

<div id="thumbnails">
   <img onclick="showfull();" src="your-source" etc........ />
   <img onclick="showfull();" src="your-source" etc........ />
   <img onclick="showfull();" src="your-source" etc........ />
   ....
</div>



document.getElementById("viewer").innerHTML = "<img onclick=\"showfull();\" id=\"<?php echo $thispic; ?>\" class=\"thumb\" src=\"<?php echo '../images/' . $pic; ?>\" />";