jQuery点击图像不做任何事情
jQuery click on image does nothing
我正在尝试获取一些jQuery代码以在单击图像时执行,我的问题是它只会在单击图像时执行。我想我的问题是我将所有图像都放在一个名为 photo
的div 中,具有固定的宽度和高度。图像被约束为适合div 内部,而不会使图像偏离其原始约束。图像不会填充div,因此当我单击图像外部时,我单击的是div 而不是图像。我如何能够更改下面的代码,以便仅在单击photo
div 中的图像时执行?我是jQuery的新手,所以如果这是一个相当简单的修复,请原谅我的问题。
$("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 + '" />');
}
});
}
});
以下是完整的代码:
<!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>
$('.photo').click(function() {
$('#lightBox').lightbox_me({
centered:true,
onLoad:function() {
$('#lightBox').empty();
$('#lightBox').prepend('<img src="/Victoria/images/photoGallery/' + $idOfPhoto + '" />');
}
});
});
相关文章:
- 如何使用url加载程序在webpack中导入多个图像
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 角度:在ng重复上切换图像
- 画廊图像未显示
- Phonegap-(安卓/iphone)多个图像的图像库出现问题
- Javascript排序的图像弹出窗口..可以't单独弹出
- 画布数据到图像
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 使图像在单击时展开到不大于浏览器
- Html页面上的多个Base64图像和平滑加载
- UIAutomation放大图像
- 使用javascript在Flash中加载外部图像
- 可以在这里为背景图像设置滤镜吗
- 当图像转换为本地存储的DataURL时,EXIF被删除
- 使用 js 将背景图像设置为 HTML
- Javascript将图像src更改为淡入淡出
- 无法在本地计算机中将画布另存为图像
- javascript预加载任何在chrome中不起作用的图像
- toFixed是'Don’不要做任何事