使图像预览，点击，并把prev下一步

make a image preview onclick and put prev next

本文关键字：并把 prev 下一步 点击 图像      更新时间：2023-09-26

我在我的网站内使用这个代码，我正在努力，虽然使它在点击上工作，而不是当光标通过图像时，这是我使用的java脚本:

$(document).ready(function(){
  imagePreview();
});

$("a.preview").hover(function(e){
    this.t = this.title;
    this.title = "";
       var c = (this.t != "") ? "<br/>" + this.t : "";
     $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");
     $("#preview")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px")
        .fadeIn("slow");
},

function(){
    this.title = this.t;
    $("#preview").remove();
});
$("a.preview").click(function(e){
    $("#preview")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px");
});
// Configuration of the x and y offsets
this.imagePreview = function(){
        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>
你能帮我解决这个问题吗?另外，我如何插入预览和下一步到预览图像?提前感谢

还是不明白你的问题是什么。但是如果你想用这个

完成图片查看器
<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);
});

下面是演示链接作为证明JSFIDDLE demo

相关文章：