Question

我正在使用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>

Answer 1

我不清楚showfull（）函数应该用于什么目的.. 我的建议是使用javascript（jquery）代码来显示最终图像。让我们说吧我们有一个缩略图div和一个完整图像div :(把它放在“头部”部分）

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
  function showfull(){ 
     $("#thumbnails img").on("click", function() {
        var clicked_img = $(this).attr("src");
        $("#full_image img").attr("src", clicked_img);
     });
  // don't rely on this javascript code as you can find 
  // a lot of plugins for thumbnails on the internet that does this even better
  }
</script>

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

<div id="thumbnails"></div>
<div id="full_image"><img src="" alt="" /></div>

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

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

最后在查看器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; ?>\" />";

我希望这有助于......

用php和javascript制作一个画廊

1 个答案: