Image preview

I am using the following function to have an enlarge image when hover a thumbnail:

this.leftPreview = function(){
    xOffset = 10;
    yOffset = 30;
    
    $("a.left-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("fast");                        
    },
    function(){
        this.title = this.t;    
        $("#preview").remove();
    });    
    $("a.left-preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });    
}
 leftPreview();

This working great. The disadvantage is that the preview image is stored in the href. which I actually need to go to a detail page. Does anybody know of a method to have an image previe a different way

I have this one solved by using the rel attribute instead of the href attribute:

<img src='"+ this.rel +"' alt='Image preview' />

I still have one question though. I need to use this preview function in the two sidebars of the page. The way the function is now the preview appears on the right side of the a href. What do I need to adjust so the preview will appear on the left side instead for use in the right sidebar.

Thank you in advance

1 Like

I experience a smal problem using this method. When I hover the thumbnail a scrollbar appears. What can I do to avoid that? Thank you in advance

I think we’d need to see the page in question to offer advice as it could be a number of things.:slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.