0

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

1 回答 1

0

我不太清楚 showfull() 函数应该用于什么目的。我的建议是使用 javascript (jquery) 代码来显示最终图像。假设我们有一个缩略图 div 和一个全图 div：（把它放在“head”部分）

<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>

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

<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; ?>\" />";

我希望这个对你有用 ...

于 2013-10-27T21:05:39.913 回答