CODEWITHSUNDEEP
jquery
Martin
Martin

Reputation: 795

jquery cloning an image from an image URL

I am wanting to change this codepen fiddle so that rather than using an image found within the DOM to clone, it is using an image from a specified URL eg: http://graphics.cars.com/images/core/buying-guide-suv.png (an image from a background-url) to clone: http://codepen.io/ElmahdiMahmoud/pen/tEeDn

How can I create an object from an image URL with jQuery?

I have tried doing it this kind of way but it doesn't work with the above fiddle:

var imgtodrag = document.createElement('img');
    imgtodrag.src = "http://graphics.cars.com/images/core/buying-guide-suv.png";

The actual tried code:

    var cart = $('#navigation .cart');

    var imgtodrag_actual = $(this).parents('.search-result').find(".main-thumb .the-thumb"); //This is where the animation starts from

    var imgtodrag_img = imgtodrag_actual.css("background-image"); // it is NOT an image element but a div with a background image - this is where the complication comes from       
    imgtodrag_img = imgtodrag_img.replace('url("','').replace('")',''); //the URL of that background image

    var imgtodrag = document.createElement('img'); //now we need to create an object that will be cloned
    imgtodrag.src = imgtodrag_img; //Set the image source of object, taken from the background image above

    if (imgtodrag) {
        var imgclone = imgtodrag.clone()
            .offset({
            top: imgtodrag_actual.offset().top,
            left: imgtodrag_actual.offset().left
        })
            .css({
            'opacity': '0.5',
                'position': 'absolute',
                'height': '150px',
                'width': '150px',
                'z-index': '100'
        }) ......

I really hope this makes sense.

Basically, I am wanting to use the fiddle code, but the image in the fiddle comes from an element. Where as I need it to come from a element's background image.

Upvotes: 0

Views: 514

Answers (2)

Jack
Jack

Reputation: 9388

Rather than clone the existing image, create your own image object. Then apply the correct source and continue on with the codepen logic.

$('<img>').attr('src', src_for_image)
// continue with the code pen

Here's an updated codepen: http://codepen.io/anon/pen/ogJRvj

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

The problem is imgtodrag is a dom element, which does not have methods like offset. Also since you are creating a new instance of img there is no need to clone it

In your case you can use jQuery to create the new img element

var imgtodrag = $('<img />', {
    src: imgtodrag_img //Set the image source of object, taken from the background image above
}) //now we need to create an object that will be cloned


var imgclone = imgtodrag.offset({
    top: imgtodrag_actual.offset().top,
    left: imgtodrag_actual.offset().left
}).css({
    'opacity': '0.5',
        'position': 'absolute',
        'height': '150px',
        'width': '150px',
        'z-index': '100'
})

Upvotes: 2

Related Questions