Javascript 单击“上一步”进行图像预览，然后将“上一步”放在下一步

我在我的网站中使用这段代码，但我很难让它在单击时工作，而不是在光标经过图像时工作。这是我正在使用的java脚本：

$（文档）.ready（函数（）{
图像预览（）；
});
$（“a.preview”）.hover（函数（e）{
this.t=this.title；
this.title=“”；
var c=（this.t！=”）？“
”+this.t:”；
$（“正文”）。追加（“
”+c+”
”；
$（“预览”）
.css（“顶部”（e.pageY-xOffset）+“px”）
.css（“左”（e.pageX+yOffset）+“px”）
.fadeIn（“慢”）；
},
函数（）{
this.title=this.t；
$（“#预览”）.remove（）；
});
$（“a.preview”）。单击（函数（e）{
$（“预览”）
.css（“顶部”（e.pageY-xOffset）+“px”）
.css（“左”（e.pageX+yOffset）+“px”）；
});
//x和y偏移的配置
this.imagePreview=函数（）{
xOffset=-20；
yOffset=40；
};

以下是我将预览图片插入到图库的方式：

<a href="images/gallery/Dolmen di Avola.JPG" class="preview" title="Dolmen di Avola"><img src="images/gallery/Dolmen di Avola.JPG" alt="photo" /></a>

你能帮我解决这个问题吗？另外，如何将prev和next插入预览图像？

---

提前感谢

我仍然不明白你的问题是什么。但是如果你想用这个来实现图片查看器

<a href="images/gallery/Dolmen di Avola.JPG" class="preview" title="Dolmen di Avola">
    <img src="images/gallery/Dolmen di Avola.JPG" alt="photo" />
</a>

那么代码将如下所示：

$(document).ready(function(){
     var $preview = $("<p id='preview'><img src='' alt='Image preview' /><span></span></p>");
     $("body").append($preview);
     $preview.hide();
});

$("body").click(function(e){
   var isImgClicked = $(e.target).is("img")

   // if there is click event outside IMG then close the #preview box
   if(!isImgClicked)
      $("#preview").fadeOut();
   });

$("a.preview").click(function(e){
   // prevent default click behaviour
   e.preventDefault();

   // get variables
   var title = $(this).attr("title");
   var href = $(this).attr('href')
   var c = (title != "") ? "<br/>" + title : "";
   var status = $("#preview").data("visible");

   // set its location and do show
   $("#preview").css("top",(e.pageY) + "px").css("left",(e.pageX) + "px")
   $("#preview").fadeIn();

   // set #preview content
   $("#preview span").text(title);
   $("#preview img").attr('src', href);

});

$（文档）.ready（函数（）{
var$preview=$（“
”）；
$（“正文”）。追加（$预览）；
$preview.hide（）；
});
$（“正文”）。单击（功能（e）{
变量isImgClicked=$（e.target）.is（“img”）
//如果IMG外有click事件，则关闭#预览框
如果（！isImgClicked）
$（“#预览”）.fadeOut（）；
});
$（“a.preview”）。单击（函数（e）{
//防止默认单击行为
e、 预防默认值（）；
//获取变量
var title=$（this.attr（“title”）；
var href=$（this.attr（'href'））
变量c=（标题！=“”）？“
”+标题：“”；
var状态=$（“#预览”）.数据（“可见”）；
//设置其位置并进行显示
$（“#预览”）.css（“顶部”、（e.pageY）+“px”）.css（“左侧”、（e.pageX）+“px”）
$（“#预览”）.fadeIn（）；
//设置#预览内容
$（“#预览范围”）。文本（标题）；
$（“#预览img”）.attr（'src'，href）；
});

---

这是演示链接，作为证明

您到底有什么问题？为什么要使用.remove（）？它将从场景中完全删除预览。我建议您不要重新发明轮子，不要使用许多现成的图像库解决方案中的一个。其他网站是一个相当大的问题，因为他们给我他们的代码链接以放入html中，所以我不能“弄乱”它，这就是为什么我要自己做的原因。我希望previw只在我点击缩略图时出现，而不是鼠标经过缩略图时出现。通过改变悬停和点击，我唯一得到的是没有任何评论。“删除”被添加为删除标题，仅此而已。基本上，当光标位于图钉上时，我可以预览图像。我想达到的是，预览将弹出只有当我点击缩略图，所以，我编辑了我的代码，以适应您的问题。它能回答你的问题吗？不，对不起，它不起作用，不过还是谢谢你的帮助given@user3353167：是的，它不工作。真遗憾。。。我没有测试它们，在这里我编辑了我的代码并添加了用于演示的JSFIDLE链接。现在可以了。代码本身是不言自明的，希望能有所帮助。干杯：）

$(document).ready(function(){
     var $preview = $("<p id='preview'><img src='' alt='Image preview' /><span></span></p>");
     $("body").append($preview);
     $preview.hide();
});

$("body").click(function(e){
   var isImgClicked = $(e.target).is("img")

   // if there is click event outside IMG then close the #preview box
   if(!isImgClicked)
      $("#preview").fadeOut();
   });

$("a.preview").click(function(e){
   // prevent default click behaviour
   e.preventDefault();

   // get variables
   var title = $(this).attr("title");
   var href = $(this).attr('href')
   var c = (title != "") ? "<br/>" + title : "";
   var status = $("#preview").data("visible");

   // set its location and do show
   $("#preview").css("top",(e.pageY) + "px").css("left",(e.pageX) + "px")
   $("#preview").fadeIn();

   // set #preview content
   $("#preview span").text(title);
   $("#preview img").attr('src', href);

});