CODEWITHSUNDEEP
javascriptjqueryhtml
Elona
Elona

Reputation: 137

how to make imagePreview not clickable

Im usting a simple imagePreview script to preview a bigger size of image, but its usting a. as full size source,

how can i change that to dont make the link clickable, Ive tried replacing a. with span. but then preview not loaded.

See in jsfiddle: http://jsfiddle.net/7FLbU/

HTML Code:

<div class="image"><a href="https://www.google.com/images/srpr/logo11w.png" class="preview"><img src="https://www.google.com/images/srpr/logo11w.png"/></a></div>

Javascript:

this.imagePreview = function(){ 
        xOffset = 10;
        yOffset = 30;
    $("a.preview").hover(function(e){
        $("body").append("<p id='preview'><img src='"+ this.href +"'/></p>");                                
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");                        
    },
    function(){
        $("#preview").remove();
    }); 
    $("a.preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });         
};
$(document).ready(function(){
    imagePreview();
});

CSS:

.image {
float: left;
padding: 0px 10px 10px 0px;
}

.image img {
max-width: 240px;
max-height: 290px;
}

#preview{
position:absolute;
border:1px solid #0096B8;
background:#0096B8;
padding:5px;
display:none;
color:#fff;
max-width:500px;
border-radius: 4px;
}

#preview img {
max-width:500px;
}

Upvotes: 1

Views: 51

Answers (3)

Pranav C Balan
Pranav C Balan

Reputation: 115242

Use event.preventDefault() to prevent browser default action on button click

$('a.preview').click(function(e){
    e.preventDefault();
})

Documentation : http://api.jquery.com/event.preventdefault/

or use return false;

$('a.preview').click(function(e){
    return false;
})

Fiddle Demo

Upvotes: 2

dhana
dhana

Reputation: 6525

Try this, Here some code,

<div class="image"><a href="#" class="preview"><img src="https://www.google.com/images/srpr/logo11w.png"/></a></div>

Javascript:

    this.imagePreview = function(){ 
        xOffset = 10;
        yOffset = 30;
    $("a.preview").hover(function(e){
        $("body").append("<p id='preview'><img src='"+ $(this).find('img').attr('src') +"'/></p>");                              
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");    
        e.preventDefault();
    },
    function(){
        $("#preview").remove();
    }); 
    $("a.preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });         
};
$(document).ready(function(){
    imagePreview();
});

http://jsfiddle.net/7FLbU/8/

Upvotes: 1

Dr.Molle
Dr.Molle

Reputation: 117354

You may use a span, but a span doesn't have a href-property. Access the href-attribute(you may choose any attribute-name in this case) instead:

$(this).attr('href');

http://jsfiddle.net/7FLbU/5/

Upvotes: 1

Related Questions