CODEWITHSUNDEEP
jquerycssimageheightwidth
Airikr
Airikr

Reputation: 6436

"Syntax error, unrecognized expression" for height and width on image

I can't get the height and width of an image using the code below. I keep getting Uncaught Error: Syntax error, unrecognized expression: ...ge/p1010352.jpg.

$('body').on('click', '#view-large', function() {

    // VARIABEL
    var image = $(this).attr('data');
    var image_src = '../blog/images/uploaded/large/p1010352.jpg';
    var image_height = $(image_src).naturalHeight();
    var image_width = $(image_src).naturalWidth();
    console.log(image_height);

    // VISA & CSS
    $('.blog-image-view').show().css({
        'background-image': 'url(' + image_src + ')',
        'margin-top': '-' + (image_height / 2) + 'px',
        'margin-left': '-' + (image_width / 2) + 'px',
        'height': image_height + 'px',
        'width': image_width + 'px'
    });

});

The purpose of this code, is to click on a link and get the large image of the selected image (but in the demo, I only use a link - same problem). I have tested with height, width and clientHeight, clientWidth. Same error.

I will delete the link in the code above when this problem is fixed!

How can I fix this problem?

Upvotes: 2

Views: 1457

Answers (3)

user5125586
user5125586

Reputation:

The error in your code is you are passing a url as a class selector.

Here is a fix:

Change the following:

var image_src = 'http://nhagyavi.myftp.org/blog/images/uploaded/large/p1010352.jpg';
var image_height = $(image_src).naturalHeight();
var image_width = $(image_src).naturalWidth();

to

var image_src = 'http://nhagyavi.myftp.org/blog/images/uploaded/large/p1010352.jpg';
var temp_img = document.createElement("img");
temp_img.src = image_src;
var image_height = $(temp_img).height();
var image_width = $(temp_img).width();

Upvotes: 0

Tushar Gupta
Tushar Gupta

Reputation: 15913

This is because you are doing $(url).naturalHeight() which is not a valid selector, either add anm id or class or a image tag to fetch..

I have added an <img> tag with an id demo.

Also .naturalHeight() is not a valid function , you can use the .prop() to achieve the same

$(document).ready(function() {
    
    $('body').on('click', '#view-large', function() {
    
        // VARIABEL

        var image = $(this).attr('data');
        var image_src = 'http://nhagyavi.myftp.org/blog/images/uploaded/large/p1010352.jpg';
        $('#demo').attr('src',image_src);
        var image_height = $('#demo').prop('naturalHeight');
        var image_width = $('#demo').prop('naturalWidth');
        console.log(image_height);
    
        // VISA & CSS
        $('.blog-image-view').show().css({
            'background-image': 'url(' + image_src + ')',
            'margin-top': '-10px',
            'margin-left': '-10px',
            'height': image_height + 'px',
            'width': image_width + 'px'
        });
    
    });

});
.blog-image-view {
    background-color: #222222;
    display : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="javascript:void(0)" id="view-large" data="p1010352.jpg">View</a>

<div class="blog-image-view"></div>
<img id='demo' src=''/>

Upvotes: 2

elixenide
elixenide

Reputation: 44823

You seem to be trying to use the image source as a selector and dynamically determine the height and width of the image that way. That won't work because a URL is not a valid jQuery selector (for good reason; that has nasty security implications).

What you want to do is either get the height and width on the server side or load the image in a hidden div, then determine its dimensions.

Upvotes: 0

Related Questions