我想知道是否有人可以帮助我。
使用下面的脚本，我正在创建一个带有fancyBox的图像。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="fancybox/lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.0.6"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.2"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.2" />
<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" />
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" />
<script type="text/javascript">
$('.fancybox').fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
padding : 20,
fitToView : true,
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
</script>
<style type="text/css">
<!--
.style1 {
font-size: 14px;
margin-top: 5px;
margin-right: 110px;
}
-->
</style>
</head>
<body style="font-family: Calibri; color: #505050; margin-left: 240px; float:left;"/>
<div align="right" class="style1"> <a href = "javascript:document.gallery.submit()"/> Add Images <a/> ← View Uploaded Images </div>
<form id="gallery" name="gallery" class="page" action="index.php" method="post" style="margin-left: -120px; margin-right: 50px; border-left: 100;">
<p>
<?php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) :
$xmlFile = $descriptions->documentElement->childNodes->item($i);
$name = htmlentities($xmlFile->getAttribute('originalname'), ENT_COMPAT, 'UTF-8');
$description = htmlentities($xmlFile->getAttribute('description'), ENT_COMPAT, 'UTF-8');
$source = $galleryPath . rawurlencode($xmlFile->getAttribute('source'));
$thumbnail = $thumbnailsPath . rawurlencode($xmlFile->getAttribute('thumbnail'));
?>
<img src="cross.png" class="removeImage" alt="Remove this image" align="top"/>
<a class="fancybox" rel="allimages" title="<?php echo $name; ?>" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>"alt="<?php echo $description; ?>" /></a>
<?php endfor; ?>
</p>
</form>
</body>
</html>
通过这个网站上的一些建议，我为每个图像添加了一个"十字"图标，最终将用于删除图像。
我对jQuery和样式表等真的很陌生，但我希望能够做的是将叉号放在实际图像的左上角，而不是像目前显示在div顶部那样。我在这里包含一个指向相关页面的链接这里。
我很欣赏对于更有经验的开发人员来说，这可能是非常简单的事情，但正如我所说，我上周才真正开始使用 jQuery 和 CSS 文件。
我只是想知道是否有人可以提供一些关于如何做到这一点的指导。
非常感谢和问候
您必须稍微重新格式化HTML输出并添加额外的样式才能做到这一点。因此，对于for循环中的每个图像，请使用以下代码：
<div style="display: inline-block; position: relative;">
<a class="fancybox" rel="allimages" title="<?php echo $name; ?>" href="<?php echo $source; ?>">
<img src="<?php echo $thumbnail; ?>" alt="<?php echo $description; ?>">
</a>
<a href="#delete" style="position: absolute; left: 0; top: 0;">
<img src="cross.png" class="removeImage" alt="Remove this image" align="top">
</a>
</div>
否则，您可以通过应用 CSS 类来执行此操作：
.myimage {
display: inline-block;
position: relative;
}
.cross {
position: absolute;
left: 0;
top: 0;
}
并将这些类添加到您的 HTML 标记中：
<div class="myimage">
<a class="fancybox" rel="allimages" title="<?php echo $name; ?>" href="<?php echo $source; ?>">
<img src="<?php echo $thumbnail; ?>" alt="<?php echo $description; ?>">
</a>
<a href="#delete" class="cross">
<img src="cross.png" class="removeImage" alt="Remove this image" align="top">
</a>
</div>
演示 http://jsfiddle.net/8B6Zy/
试试这个，非常干净和简单，使用jQuery和CSS：
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
#del_icon {
position:absolute;
top:0;
left:0;
width:15px;
height:15px;
background:url('http://www.mapmyfinds.co.uk/development/cross.png');
background-repeat : no-repeat;
display:block;
z-index:2;
cursor:pointer;
display:none;
}
.image {
float:left;
position:relative;
}
.image a {
float:left;
display:inline;
position:relative;
z-index:1;
}
</style>
<script>
$(document).ready(function(){
$(".image").hover(function(){
$(this).find("#del_icon").show();
},
function()
{
$(this).find("#del_icon").hide();
});
});
</script>
</head>
<body>
<div class="image">
<a href="del.php?id=1" id="del_icon"><span></span></a>
<a href="http://www.mapmyfinds.co.uk/development/UploadedFiles/IRHM73/1/A-deer-in-Knole-Park-Seve-005.jpg"><img src="http://www.mapmyfinds.co.uk/development/UploadedFiles/IRHM73/1/A-deer-in-Knole-Park-Seve-005.jpg" alt="" width="150"/></a>
</div>
<div class="image">
<a href="del.php?id=2" id="del_icon"><span></span></a>
<a href="http://www.mapmyfinds.co.uk/development/UploadedFiles/IRHM73/1/Thumbnails/_47061196_greatbritainjpg.jpg"><img src="http://www.mapmyfinds.co.uk/development/UploadedFiles/IRHM73/1/Thumbnails/_47061196_greatbritainjpg.jpg" alt="" width="150"/></a>
</div>
<div class="image">
<a href="del.php?id=3" id="del_icon"><span></span></a>
<a href="http://www.mapmyfinds.co.uk/development/UploadedFiles/IRHM73/1/Thumbnails/Test_Pic_2.jpg"><img src="http://www.mapmyfinds.co.uk/development/UploadedFiles/IRHM73/1/Thumbnails/Test_Pic_2.jpg" alt="" width="150"/></a>
</div>
</body>
</html>