как использовать лайтбокс внутри & lt; img & gt; тег

Редактировать: Извините, что не предоставил полный код до этого, я опубликую его сейчас ↓

включайте header.php;

?>

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

Из этого кода я в основном хочу изменить эту часть так, чтобы онклик был как умышленный.

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.
вот изображение того, как моя картинка выглядит раньше

PS: это мой первый пост + я не очень разбираюсь в php, нужна помощь
от вас, ребята

0

Решение

Скачать, jquery.fancybox.css & 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>
0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]