用php和javascript制作圖庫

Question

我正在使用php填充縮略圖庫。 當我單擊拇指時，我運行了一個javascript函數，我想將單擊的照片放在稱為查看器的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 ：（將其放在“ 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>

將以下內容放在“正文”部分中（根據需要自定義圖像屬性..）

<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 個解決方案

解決方案1
0 2013-10-27 21:05:39

用php和javascript制作圖庫

問題描述

1 個解決方案

解決方案1 0 2013-10-27 21:05:39

解決方案1
0 2013-10-27 21:05:39