Melvin Melvin - 4 years ago 70
HTML Question

$("").click(function(){ Allow of click of images in a loop

I am trying to allow user to click on the picture that is displayed on the website, currently, the picture is pull out from a database and is on a loop. If i set a id, user can only click on the first pic that is shown, is there anyway for the

$("#HELP").click(function(){
to allow me to have one code but allow all the pic to be click ?

<div id = 'HotelContentsmallpic'>
<?php
$cols=4; // Here we define the number of columns
echo "<table>"; // The container table with $cols columns
do{
echo "<tr>";
for($i=1;$i<=$cols;$i++){ // All the rows will have $cols columns even if
// the records are less than $cols
$row=mysqli_fetch_array($result2);
if($row){
$img = $row['IMG'];
$cat = $row['Category'];
?>
<td>
<table>
<tr align="top">
<td><img id = "HELP" src="images/Hotel/<?php echo $img ?>.jpg" class="img-responsive" /></td>
<td>
</td>
<td width="50">&nbsp;</td> <!-- Create gap between columns -->
</tr>
</table>
</td>
<?php
}
else{
echo "<td>&nbsp;</td>"; //If there are no more records at the end, add a blank column
}
?>
<script>
$(document).ready(function(){
$("#HELP").click(function(){
window.location='hotels.php?Category=<?php echo $cat ?>&Pic=<?php echo $img ?>';
});
});
</script>
<?php
}
} while($row);
echo "</table>";
?>
</div>

Answer Source

You need to change two things:

In HTML use img tag like that:

<img onclick="redirect_url('<?=$cat?>','<?=$img?>')" src="images/Hotel/<?=$img?>.jpg" class="img-responsive" />

And in Javascript use this:

<script type="text/javascript">
function redirect_url(cat,img)
{
    window.location='hotels.php?Category='+cat+'&Pic='+img+'';
}
</script>

In this solution, no need to use #HELP id in this.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download