jQuery click on image does nothing
I am trying to get some jQuery code to execute when an image is clicked,
my problem is that it will only execute if I click just off the image. I
figure my problem is that I have all images being put inside a div named
photo with fixed width and heights. The images are constrained to fit
inside the div without distorting the image from its original constraints.
The image will not fill the div so when I click just outside of the image
I am clicking on the div not the image. How am I able to change my code
below so that it will only execute if an image inside the photo div is
clicked? I am new to jQuery so please forgive my question if it is a
rather simple fix.
$("body").click(function(event) {
var $target = $(event.target).attr('class');
var $idOfPhoto = event.target.id;
if ($target == "photo") {
$('#lightBox').lightbox_me({
centered:true,
onLoad:function() {
$('#lightBox').empty();
$('#lightBox').prepend('<img src="/Victoria/images/photoGallery/'
+ $idOfPhoto + '" />');
}
});
}
});
Here is the code in its entirety:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Victoria Mendiola</title>
<link rel="stylesheet" href="css/style.css">
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link type="text/css" href="css/jquery.jscrollpane.css"
rel="stylesheet" media="all" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"
src="css/jquery.mousewheel.js"></script>
<script type="text/javascript"
src="css/jquery.jscrollpane.min.js"></script>
<script src="/resources/library/jquery.lightbox_me.js"></script>
<script src="/resources/library/jquery.browser.js"></script>
<script src="jquery.cycle.all.js"></script>
</head>
<body>
<div id="lightBox">
</div>
<div class="container">
<div class="logo">
<img class="victoriaLogo" src="images/Victoria-logo.png" />
</div>
<div class="navigation">
<a class="navText" href="index.php">Home</a>
<a class="navText" href="gallery.php">Gallery</a>
<a class="navText" href="#about">About</a>
<a class="navText" href="contact.php">Contact</a>
</div>
<script>
$(function()
{
$('.galleryContainer').jScrollPane();
});
</script>
<div class="galleryContainer">
<?php
require 'DB.php';
try{
$stmt ='SELECT * FROM victoria';
foreach ($conn->query($stmt) as $row)
{
echo ('<div class="photo" id="' . $row['name'] . '">
<img src="images/photoGallery/thumbnails/' . $row['name'] . '" />
</div> </a>');
}
} catch (PDOException $e){
echo 'Connection failed: ' . $e->getMessage();
}
?>
</div>
<script>
$("body").click(function(event) {
var $target = $(event.target).attr('class');
var $idOfPhoto = event.target.id;
if ($target == "photo") {
$('#lightBox').lightbox_me({
centered:true,
onLoad:function() {
$('#lightBox').empty();
$('#lightBox').prepend('<img
src="/Victoria/images/photoGallery/' + $idOfPhoto + '"
/>');
}
});
}
});
</script>
</div>
</body>
</html>
No comments:
Post a Comment