Question

我在我的网站中使用此代码，我正在努力使其在点击上工作，而不是当光标传递到图像时这是我正在使用的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>

你可以帮我解决这个问题吗？我如何在预览图像中插入prev和next？提前谢谢

Answer 1

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

完成图片浏览器

<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

制作图像预览onclick并将prev下一个

1 个答案: