Image preview

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

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

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.