Hi,

I've the following html/javascript/css code that I'm trying to execute. But it doesn't work. What I'm trying to do is similar to this: http://jsfiddle.net/FsPSZ/16/ (i've even tried this and the problem is the same)

`

<!DOCTYPE html>
<html>
<head>
<title>test</title>

<style>
#preview{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:5px;
    display:none;
    color:#fff;
    }
</style>
</head>


<body>
<script>
this.imagePreview = function(){ 
    /* CONFIG */

        xOffset = 10;
        yOffset = 30;

        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result

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


// starting the script on page load
$(document).ready(function(){
    imagePreview();
});
</script>


    <a href="./images/collection/a01.jpg" /*class="preview"*/><img src="./images/collection/a01.jpg" alt="gallery thumbnail" /></a>


</body>

</html>

`

I have spend many hours trying to figure out the problem but to no vain. I do not know what I am doing wrong.

You didn't say what the problem is.

Your sample code worked for me once I removed the comments on line #60. And of course, I added a reference to a jQuery library in the <head> section.

Ok. I'm new at this. Can you tell me how do I add jQuery reference and do I need to have this jQuery library downloaded somewhere ?

I've tried adding this in the head section but it still doesn't seem to work.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>

Nope, it still doesn't work for me :(

As JorgeM said, you should change this line also:

 <a href="./images/collection/a01.jpg" class="preview"><img src="./images/collection/a01.jpg" alt="gallery thumbnail" /></a>

Everything else in your code works... Once you get the jQuery reference in the head section, even if your path is incorrect on the <a> and <img> elements, you should at least see a broken image icon on the screen and the pop-up when you hover over it.

I can see the image but the pop-up never appears. And once I click on the image being displayed, it shift to the top left corner. The padding or the offset which was there I guess gets removed. The hover image or the hovering effect never appears.

for me the popup appears, only there is no image. Popup with no image appears.

screen shot

but then I checked the image url- pasted in the addres barr
http://i.imgur.com/XiDtL.jpg

and image is ok.

After that I reexecuted javascript ,and the image was wisible. It was gettgin 403 errors. Not sure why.

Check console - F12 developer tools in chrome. Are you getting more errors?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.