CODEWITHSUNDEEP
javascriptjquery
Yamaha32088
Yamaha32088

Reputation: 4163

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>

Upvotes: 0

Views: 342

Answers (1)

mikekavouras
mikekavouras

Reputation: 220

$('.photo').click(function() {
  $('#lightBox').lightbox_me({
    centered:true,
    onLoad:function() {
      $('#lightBox').empty();
      $('#lightBox').prepend('<img src="/Victoria/images/photoGallery/' + $idOfPhoto + '" />');
    }
  });
});

Upvotes: 1

Related Questions