이미지 미리보기를 onclick하고 다음을 넣으십시오.

Question

내 웹 사이트에서이 코드를 사용하고 있습니다. 커서를 이미지에 전달할 때 클릭 대신 작동하도록 고민하고 있습니다. 이것은 자바 스크립트입니다. 사용 :

$(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