Question

编辑：很抱歉在此之前没有提供完整的代码，我现在就发布↓

包括'header.php';

？

＆GT;

<table width="800px" cellpadding="5" cellspacing="5">
<tr><td style="width:10px"></td>
<td style="background:#F2F2F2; height:400px">

<h3>Club Activity</h3>

    <br>

    <table width="100%" class="tableStyle">
    <tr style="font-weight:bold"><td>NO.</td><td>ACTIVITY</td><td>DESCRIPTION</td><td>DATE TIME</td><td>PICTURE</td></tr>
    <?php               
    $i=0;
    $studentId = (isset($_SESSION['studentId']) ? $_SESSION['studentId'] : null);
    $query="select a.* from student_club sc, club c, activity a where sc.clubId=c.id and a.clubId=c.id and sc.studentId=$studentId";

    $result=mysql_query($query);    
    while ($row = mysql_fetch_array($result)) { 
        $i+=1;
        echo '<tr style="height:25px; vertical-align:top"><td>'.$i.'</td><td>'.$row['activity'].'</td><td>'. $row['description'] .'</td><td>'. $row['dateTime'] .'</td>';
        if($row['picture'] != "")
            echo '<td class="mousehoverpicture"><img src="activity_picture/'. $row['picture'] .'" style="width:50px;height:40px" onclick="location.href=\'activity_picture/'. $row['picture'] .'\'" /></td></tr>';
        else    
            echo '<td></td></tr>';
    }
    if($i==0)
        echo '<tr style="height:25px"><td colspan="5">Record not found</td></tr>';
    ?>
    </table>
    <br>
<?php
    echo mysql_error(); 

?>
</td>
</tr>       
</table>

</div>

</div>
<?php 
include 'footer.php'
?>  $i+=1;

从这段代码中我主要想要改变这部分，以便onclick可以打算。

if($row['picture'] != "")
            echo '<td class="mousehoverpicture"><img src="activity_picture/'. $row['picture'] .'" style="width:50px;height:40px" onclick="location.href=\'activity_picture/'. $row['picture'] .'\'" /></td></tr>';
        else    
            echo '<td></td></tr>';
    }

因此，如果我将鼠标悬停在小缩略图上，然后单击它，它将只在新标签中打开并显示大图。我想要的就是当我点击图片时它应该使用lightbox2效果。我已经链接了css / jquery文件。 here is the image of how my picture looks like before

PS：这是我的第一篇文章+我真的不懂php，需要帮助来自你们

Answer 1

下载，jquery.fancybox.css＆amp; jquery.fancybox.pack.js。并且，相应地放置它。

<link href="css/jquery.fancybox.css" rel="stylesheet">
<?
if($row['picture'] != "")
{?>
    <td class="mousehoverpicture">
        <a href="activity_picture/<?echo $row['picture'];?>" class="fancybox-button listThumbs" rel="photos-lib">
            <img src="activity_picture/<?echo $row['picture'];?>" style="width:50px;height:40px"/>
        </a>
    </td>
    </tr>
<?}
else
{?>
        <td></td></tr>
<?}?>

<script src="js/jquery.fancybox.pack.js" type="text/javascript"></script>

如何在<img/>标记内使用灯箱

1 个答案: