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
  • 308 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by McLaren

Dani AI

Generated

Short diagnosis and next steps (concise): the hover preview fails for one of a few common reasons — jQuery not loaded or loaded after the script that uses it, the selector not matching because the class="preview" was commented out, a protocol-relative CDN URL failing when the page is opened via file://, the image request being blocked (HTTP 403 / hotlink protection), or the anchor’s default click navigating the browser to the image (which explains the shift to the top-left). was correct that jQuery must be present, spotted the selector/class issue, and ’s 403 observation and advice to check DevTools is important.

Quick debugging checklist

  • Confirm jQuery is actually available in the page (DevTools → Console).
  • Ensure the jQuery <script> is included before any code that calls $ or jQuery. Avoid protocol-relative //... when testing with file:// — use an absolute https://... or run a local HTTP server.
  • Make sure the thumbnail anchor has an active class="preview" (HTML does not allow C-style /* ... */ comments inside attributes).
  • Watch the Network tab while hovering to see the image GET and its HTTP status (200 vs 403). Hotlink protection or server permissions will show as 403.
  • Prevent the anchor’s default navigation if the intent is only a hover-preview (otherwise the browser will replace the page with the full image).

Useful snippets to run in the Console or add as tiny helpers:

// quick console check to confirm jQuery loaded
console.log('jQuery loaded?', typeof jQuery !== 'undefined' ? jQuery.fn.jquery : 'no jQuery');
// prevent the anchor from navigating to the image when clicked
$(document).on('click', 'a.preview', function(e){
  e.preventDefault();
});

Extra tips: use a single reusable preview element rather than appending/removing on every hover, add an img error handler to catch load failures, set a high z-index for the preview, and prefer mouseenter/mouseleave to reduce flicker. Typical console messages to look for are Uncaught ReferenceError: $ is not defined (jQuery not loaded) and network 403 errors (hotlink/CORS/permission issues).

Recommended Answers

All 10 Replies

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.