Member Avatar for shazzy99

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.

  • 4 Contributors
  • 10 Replies
  • 290 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by McLaren
Member Avatar for AleMonteiro

You didn't say what the problem is.

Member Avatar for JorgeM

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.

Edited by JorgeM
Member Avatar for shazzy99

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 ?

Member Avatar for shazzy99

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>
Member Avatar for shazzy99

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

Member Avatar for AleMonteiro

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>
Member Avatar for JorgeM

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.

Member Avatar for shazzy99

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.

Member Avatar for McLaren

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.